Taro 打包时无法清除 moment语言包的问题与解决方案

最近我在给一个使用tarojs（v3.6.14）的项目"瘦身"时，发现项目中使用了momentjs，过分的是，它还把momentjs全家（语言包）都打包进来了，这可让咱的小程序主包瞬间肿了一圈。原本我以为动用一下webpack的三板斧：moment-locales-webpack-plugin、ContextReplacementPlugin和IgnorePlugin就能轻松搞定，结果它们集体罢工，搞得我怀疑是不是见鬼了。

不过，真相往往隐藏在细节之中。经过1天的排查，原来问题出在tarojs使用webpack进行小程序打包时的默认配置上。

tarojs在打包小程序是默认设置是如下这样:

css 复制代码

resolve: {
  mainFields: ['browser', 'module', 'jsnext:main', 'main']
},

webpack在寻找依赖的入口文件时，会按照mainFields字段设置的优先级来查找package.json的。

而momentjs这家伙呢，它的package.json里藏着这样的秘密：

json 复制代码

"main": "./moment.js",
"jsnext:main": "./dist/moment.js"

也就是说，当tarojs打包小程序时，默认会选择"jsnext:main"指向的文件作为入口，而之前我尝试使用的那些插件，都是基于"main"字段来干活的，这就难怪它们在面对momentjs的语言包时束手无策了。

解决之道虽曲折但并不复杂，提供了两种策略供你选择：

方案一，先改规则再动手脚：我们可以调整mainFields的顺序，让它先去找"main"，然后再引入能剔除多余语言包的moment-locales-webpack-plugin。就像这样：

css 复制代码

webpackChain(chain, webpack) {
  chain.resolve.mainFields.clear();
  chain.merge({
    resolve: {
      mainFields: ['browser', 'module', 'main', 'jsnext:main'], // 先让main排前面
    },
  });
  
  chain.merge({
    plugin: {
      momentLocalesPlugin: { // 然后请出我们的大侠，只保留中文语言包
        plugin: require('moment-locales-webpack-plugin'),
        args: [
          {
            localesToKeep: ['zh-cn'],
          },
        ],
      },
    },
  });
}

方案二，直接对症下药：我们也可以调整ContextReplacementPlugin的参数，让它精准打击到momentjs/dist/locale目录下的非中文语言包并将其剔除：

perl 复制代码

webpackChain(chain, webpack) {
  chain.merge({
    plugin: {
      momentLocalesPlugin: {
        plugin: webpack.ContextReplacementPlugin,
        args: [/moment[/\]dist[/\]locale$/, /zh-cn/], // 只留下中文语言包，其它的统统靠边站
      },
    },
  });
}

所以，在代码的世界里，解决问题有时就像是一场智力拼图游戏，一旦找寻到关键线索，一切难题都将如云开见月明般迎刃而解！

参考资料：github.com/NervJS/taro...