react首屏优化总结(webpack相关)

1、splitChunks分包

module.exports = {
  //默认配置如下
  optimization: {
    splitChunks: {
      // 可选参数：all async initial
      // all: 不管是动态引入或者是入口文件引入 全部分包打包
      // async：只考虑动态引入包 分包
      // initial：只考虑入口文件引入 分包
      // 入口文件: entry-. 
      // 动态引入 ： import(() => {})
      chunks: 'async', 
      minSize: 30000,
      // 最小引用次数
      minChunks: 1,
      // 与入口文件相似，是动态引入的并发请求数限制
      maxAsyncRequests: 5,
      // 每个入口文件的并发请求数不能超过3 ，超过3的部分，谁的文件大，就把谁单独打包
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          // test设置成node包的意思是只筛选node_modules文件下引入的模块
          test: /[\\/]node_modules[\\/]/,
          // priority： 权重，与default的权重相比，谁大就按照谁的规则
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

参考文献如下：
理解webpack4.splitChunks