webpack构建加速

分析打包速度

speed-measure-webpack-plugin插件测量你的 webpack 构建期间各个阶段花费的时间

分析影响打包速度环节

搜索时间

搜索所有的依赖项

解析时间

webpack根据我们配置的loader 解析相应的文件，由于 js 单线程的特性使得这些转换操作不能并发处理文件，而是需要一个个文件进行处理

压缩时间

将所有解析完成的代码，打包到一个文件中，为了使浏览器加载的包更小（减小白屏时间），所以webpack 会对代码进行优化。JS 压缩是发布编译的最后阶段，通常 webpack 需要卡好一会，这是因为压缩 JS 需要先将代码解析成 AST 语法树，然后需要根据复杂的规则去分析和处理 AST，最后将 AST 还原成 JS，这个过程涉及到大量计算，因此比较耗时，打包就容易卡住。

二次打包

当更改项目中一个小小的文件时，我们需要重新打包

优化打包速度

优化解析时间

thread-loader

把 thread-loader 放置在其他 loader 之前， 那 thread-loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行。
一个worker 就是一个nodeJS 进程。
仅在耗时的 loader 上使用。

合理利用缓存

使用 webpack 缓存的方法有几种，例如使用 cache-loader，HardSourceWebpackPlugin 或 babel-loader 的 cacheDirectory 标志。 所有这些缓存方法都有启动的开销。 重新运行期间在本地节省的时间很大，但是初始（冷）运行实际上会更慢。
如果你的项目生产版本每次都必须进行初始构建的话，缓存会增加构建时间

1. cache-loader
2. HardSourceWebpackPlugin