一個配置一個庫，代碼分割提性能

在 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 庫，恩，能夠起飛了。