解决React Webpack打包慢的问题

1、advanced module optimization 编译速度很慢的问题

安装babel-plugin-dynamic-import-node依赖，然后在.babelrc文件中添加即可

npm install babel-plugin-dynamic-import-node --save-dev

.babelrc中添加

###.babelrc
{
  "plugins": ["dynamic-import-node"]
}

此段选自：CSDN，作者:勇敢的豆沙包，传送门

2、css-loader版本过高导致编译速度慢

• 开启devtool: "#inline-source-map"会增加编译时间
• css-loader 0.15.0+ 使webpack加载变得缓慢

//css-loader 0.16.0
Hash: 8d3652a9b4988c8ad221
Version: webpack 1.11.0
Time: 51612ms

//以下是css-loader 0.14.5
Hash: bd471e6f4aa10b195feb
Version: webpack 1.11.0
Time: 6121ms

此段选自GitHub，作者：hawx1993，传送门

3、thread-loader多线程打包

{
        test: /\.js$/,
        exclude: /node_modules/,
        // 创建一个 js worker 池
        use: [ 
        //直接在loader之前使用
          'thread-loader',
          'babel-loader'
        ] 
      },
    //自定义配置行
    use[
    {
    loader: "thread-loader",
    // loaders with equal options will share worker pools
    // 设置同样option的loaders会共享
    options: {
      // worker的数量，默认是cpu核心数
      workers: 2,
      // 一个worker并行的job数量，默认为20
      workerParallelJobs: 50,
      // 添加额外的node js 参数
      workerNodeArgs: ['--max-old-space-size=1024'],
      // 允许重新生成一个dead work pool
      // 这个过程会降低整体编译速度
      // 开发环境应该设置为false
      poolRespawn: false,
      //空闲多少秒后，干掉work 进程
      // 默认是500ms
      // 当处于监听模式下，可以设置为无限大，让worker一直存在
      poolTimeout: 2000,
      // pool 分配给workder的job数量
      // 默认是200
      // 设置的越低效率会更低，但是job分布会更均匀
      poolParallelJobs: 50,
      }
    }
    'babel-loader'
    ]

此段选自掘金，作者：好学习吧丶，传送门