webpack性能提升之optimization.splitChunkPlugin

webpack4.0引入了，optimization这个配置，在这里面可以配置splitchunkPlugin,做代码分割

分离代码的好处，
1、同步的组件，分离后，有些公共的组件hash值不会改变，打包时候也会绕过直接使用缓存，页面加载时，Etag不变，直接从浏览器缓存里读取。
2、异步的组件，分离后，在页面加载时点击页面切换或者组件切换，才会加载对应的组件分离code，减少了首页的体积，造成不必要的资源浪费。
线上默认配置如下：

/**
 * 本来想使用commonchunkplugin来做splitcode，但是查了下webpack4版本
 * 新版本使用optimization.splitChunks来代替了commonchunkplugin
 * 并且在production模式下是默认开启的
 * 在development下得手动配置
*/

optimization: {
      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
        }
      }
    }

打包后的文件如下

0和1是两个异步组件打包后的结果
把reuseExistingChunk关了结果如下：

把reuseExistingChunk开了结果如下：

性能小幅度提升