Webpack 缓存

Webpack 性能优化

一. 优化方向

1. loader 解析过程
2. loader 搜索耗时
3. 打包生成 chunk

二. loader 解析优化

1. 开启多线程 thread-loader

2. 缓存

   a: loader 本身缓存 babel-loader
   b: 使用 cache-loader

1. 解析loader 区别

1. thread-loader 在前还是 cache-laoder 在前？

   thread-loader

   thread-loader 放置在其他 loader 之前， 那 thread-loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行。
   

2. babel-loader、cache-loader 缓存区别？

   babel-loader 根据内容缓存，
   catche-loader 根据 mtime 缓存 (轻量)

   cache-loader 控制整个 loader 流程的缓存，而 babel-loader 这是缓存自己。

   cache-loader 缓存流程

   babel-loader缓存流程

3. 其他 loader 是否也需要自己的缓存？

   使用缓存是有 代价 的，所以必须是很重要的任务用才有效果，否则适得其反。
   比如 thread-loader:

   官方上说每个 worker 大概都要花费 600ms ，所以官方为了防止启动 worker 时的高延迟，提供了对 worker 池的优化.
   如果小项目，文件不多，无需使用thread-loader开启多进程，这样反而打包会变慢，因为开启进程也是需要额外耗时的。

打包 chunk 优化

optimization.splitChunks

把一些公共包打包成 公共模块。比如一些属性：

minChunks： 它控制的是每个模块什么时候被抽离出去：当模块被不同entry引用的次数大于等于这个配置值时，才会被抽离出去。

注意： 这个值的设置不能太大太不能太小。如果太小，会生成多个chunk ，增加 js 网络请求个数，适得其反。