webpack优化

测量打包速度

• speed-measure-webpack-plugin插件
• progress-bar-webpack-plugin插件
• --report-json 命令参数

配置loader

优化搜索时间、缩小文件搜索范围、减少不必要的编译工作

DLL、Externals

原理都是减少第三方库的编译

多进程

• thread-loader（v4以后的官方推荐）
• happypack（不怎么维护了）
• parallel-webpack（不怎么维护了）

使用 thread-loader 将开销较大的 loader（例如babel-loader）放到独立进程中（官方描述 worker pool）处理

module.exports = {  
  module: {  
    rules: [  
      {  
        test: /\.js$/,  
        include: path.resolve("src"),  
        use: [  
          "thread-loader",  // 放在需要单独加载的loader的前面
          // your expensive loader (e.g babel-loader)  
        ]  
      }  
    ]  
  }  
}  

使用缓存

• cache-loader
• babel-loader的cacheDirectory
• HardSourceWebpackPlugin

Webpack 4 的打包性能方面足够好，再使用 dll 收益并不大，但是使用hard-source-webpack-plugin，二次编译时使用缓存，效果显著

• webpack4自带优化对比

webpack3	webpack3+dll	webpack4	webpack4+dll
172-189	137-148	59.7-80	51.3-72.2

• 使用hard-source-webpack-plugin

webpack4	hard-source-webpack-plugin
12s左右	首次16s 二次5s-7s

测试效果从首次16s直接降低到5s左右 速度将近提升了3倍

多进程代码压缩

有时我们可以看到编译时在98%时停留很久，这是由于在进行代码压缩，因此我们可以使用多进程进行代码的压缩terser-webpack-plugin