vue-cli4 打包优化之 moment 和 lodash

babel.config.js

module.exports = {
  presets: [
    '@vue/app',
    [
      '@babel/preset-env',
      {
        corejs: 3,
        useBuiltIns: 'entry'
      }
    ]
  ],
  plugins: [
    'lodash'
  ]
}

vue.config.js

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
module.exports = {
  configureWebpack(config) {
    return {
      plugins: [
	  	new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/),
	  	new LodashModuleReplacementPlugin(),
	  ]
	}
  },
  chainWebpack(config) {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('lodash', 'lodash-es')
  }
}

解析：

1. ContextReplacementPlugin 这行代码，把语言包过滤掉只剩下 zh-cn
2. 通过 alias 把 lodash 的依赖替换成 lodash-es，从而可以按需引入
3. babel.config.js plugins 加入 lodash 可以将所有 lodash 的依赖替换为具体函数的依赖

import _ from 'lodash';
_.map([1, 2, 3], i => i + 1);

↓

import _map from 'lodash/map';
_map([1, 2, 3], i => i + 1);

不过以下这种方式不会被优化

_([1, 2, 3]).map(i => i + 1).value();

5. LodashModuleReplacementPlugin 去掉所有你没用到的 lodash 函数