前言
近期做了下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
SplitChunksPlugin
在webpack3.x中，是用CommonsChunk,而在4.x中，废弃了CommonsChunk，转而用SplitChunks。
SplitChunks比起CommonsChunk，对抽取切割包更细颗粒度的控制。
参考
webpack官方文档
玩转 webpack，使你的打包速度提升 90%
十大webpack优化插件
webpack 4 Code Splitting 的 splitChunks 配置探索
在淘宝优化了一个大型项目，分享一些干货（代码实例，图文结合）
网友评论