如何提高webpack的打包速度？
网友回复
首先我们要知道webpack打包编译的过程中哪些地方耗费的时间长，所有需要测量
Speed Measure插件用于分析插件和加载器的性能。这使我们可以集中精力进行搜索，并确定最容易获胜的地方。
下面我们来讲讲如何加快webpack的速度
HappyPack多线程打包
地址：https://github.com/amireh/happypack
HappyPack实际上所做的是启动构建过程的多个线程。
听起来不错。但是在现实生活中，它并没有表现出更好的性能，甚至更糟-我们开始经历了验证缓存不正确的问题，这种情况不是很常见，但是仍然很烦人。
我承认我们只是在配置方面玩的不够，但是确实取得了不错的成绩。HappyPack背后的大量逻辑必须证实我的想法。但是接下来的两个解决方案使我们能够以更少的配置获得更好的结果。
DLL webpack
地址：https://github.com/webpack/docs/wiki/list-of-plugins#dllplugin
平均节省时间-25％
使用DLL webpack插件，您可以只构建一次node_modules，而无需再进行更改，直到再次更改node_modules中的任何内容为止。在下一个版本中，Webpack将重用已编译的dll-bundle中的模块。
这个过程有点复杂，但这是值得的。
首先，使用单独的webpack配置和DllPlugin构建dll-bundle和manifest.json 。
然后应用DLLReferencePlugin以在任何其他Webpack构建中重用DLL捆绑包。
好消息是它不仅适用于node_modules。您可以将应用程序的任何部分移动到dll-bundle中。
发现代码/模块很少更改？将其移动到dll捆绑包中，节省您的时间！
使用DllPlugin的唯一警告是，如果您从npm包导入，它将不知道package.json：main并保留导入文件的完整路径。
这对您来说意味着在构建dll-bundle之后，在manifest.json中而不是 像redux这样的导入路径中，您会发现./ redux / es / index.js。这将破坏您的应用程序导入路径。要解决此问题，请将修改的manifest.json内容传递给DLLReferencePlugin。
HardSource插件
地址：https://github.com/mzgoddard/hard-source-webpack-plugin 平均节省时间-70％（！）
它是在讨论Webpack缓存问题时从此线程开始的。并导致创建了缓存插件，该插件为构建过程带来了惊人的性能提升。创建它的家伙深入研究了webpack的源代码，以找到有效的缓存解决方案。您绝对应该阅读该线程。
在大型应用程序中，具有几乎默认配置的HardSourcePlugin将我们的构建速度从40s降低到10s。我们中一些拥有良好硬件的人甚至在大约2秒钟内就构建了相同的应用程序。到目前为止，我们对HardSourcePlugin没有任何严重的问题。
结论
将DllPLugin与HardSourcePlugin结合使用可使我们忘记冗长的构建。
严重地。这对于本地开发人员环境是正确的，而对于CI等第三方则是正确的。
CI的问题在于，应用程序代码可能在内部版本之间发生重大变化，从而增加了无效问题的机会。
解决此问题将使您清理CI服务器上的缓存目录，并重新启动构建过程，而无需缓存。这需要很多时间。
我不知道如果我们使用CI运行HardSourcePlugin，我们会经常遇到无效问题，我很想知道。我们将在现实生活中对其进行测试，如果结果良好，我将在一篇文章中解释所有流行CI的设置。
