前言

近期做了下react工程的webpack优化，做下记录，方便后续其他工程优化时避免重新查找相关方案。（ps:webpack版本是4.x）

下面是个人的优化工具记录，详细的介绍可以转至参考

优化的分析工具

在做优化时，要知道哪些地方需要优化——可以通过一些分析工具来判断。
webpack-bundle-analyzer：用于分析包的大小的工具，可以可视化展现
speed-measure-webpack-plugin：用于分析打包速度的工具，可以分析出各个环节的打包时间

HardSourceWebpackPlugin

使用 webpack 缓存的方法有几种，例如使用 cache-loader，HardSourceWebpackPlugin 或 babel-loader 的 cacheDirectory 标志。所有这些缓存方法都有启动的开销。重新运行期间在本地节省的时间很大，但是初始（冷）运行实际上会更慢。
HardSourceWebpackPlugin是webpack的插件，用于为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行两次webpack：第一次构建将花费正常时间。第二个版本将明显更快。

threadLoader

在webpack构建过程中，实际上耗费时间大多数用在 loader 解析转换以及代码的压缩中。
可以利用threadLoader进行多进程操作，提高打包效率。
关于HappyPack，目前在4.x版本，因其不再维护，官方也更推荐使用threadLoader。
但在creat-react-app ，开发者是将threadLoader移除了，因为threadLoader开启需要预热等原因，详情可以看相关的issue