webpack中SplitChunksPlugin代码分割

SplitChunksPlugin相关配置解读

·````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
        }
      }
    }
  }
};

1. 为什么用SplitChunksPlugindangwomen
当业务代码文件打的时候他的打包文件会很大，加载时间过长，并且若不使用当修改是再次打包时加载时间过长

1. chunks ，all，async和initiall就是同步和异步分割或者是同步和异步代码都分割；.
2. minSize：就是最小多少kb.
3. **maxSize:**就是最最大多少kb，一般不会设置.
4. **minChunks:**就是模块被引入<‘次数’.
5. **maxAsyncRequests:**异步引入最大次数
6. **maxInitialRequests:**入口点处的最大并行请求数。
7. **automaticNameDelimiter:**文件名的分隔符
8. cacheGroups缓存组
9. cacheGroups.test:引入模块
10. cacheGroups.priority分割的模块打包的优先级越大越高
11. cacheGroups。reuseExistingChunk引入模块若发现再次引入相同模块就直接忽略