一个配置一个库，代码分割提性能

在 Webpack 4 中，可以通过配置 splitChunks 避免两份代码有相同的第三方引用库，具体配置如下：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

具体参见官方文档

Webpack 默认提供 Tree shaking 功能，即可以把使用 ESModule 的库的被使用的部分在构建时「摘」出来，不把没有用到的部分打包到 chunk 中，这可以帮助我们合理的减少打包后的代码体积。为了更好地使用这个功能，我们需要使用一个库：babel-plugin-transform-imports，具体功能看文档，反正用就对了！

另外，有时我们会在项目中引入 lodash，记得使用 lodash-es，因为通常我们不会使用 lodash 所有的功能，通过使用 ESModule 下的 lodash，搭配上上面提到的 babel 库，恩，可以起飞了。