如何在不使用手表功能的情况下提高webpack / babel构建性能？

Question

我正在开发一个SBT / Scala Web项目，我想利用ES6功能和前端JavaScript层的新模块语法。 SBT有自己的构建系统，我设法调整现有的sbt插件来运行webpack来使用babel构建我的JS文件。目前的解决方案有点混乱，但它的工作原理和生活在sbt构建系统中。

问题在于它很慢。对于每次更改，都会创建一个新的webpack实例，它会从头开始完全编译所有内容。

我知道我可以跳出sbt构建系统，只是为了开发阶段，分别使用webpack来观察和重建我的文件。但在我这样做之前，我想知道是否有一些方法可以加快webpack构建过程。

我检查了文档，在我看来，任何可用的缓存只在内存中处理，并且不适用于我的情况。或者是否有某种文件缓存可以在单独运行的webpack构建之间存活？例如，我的所有npm依赖项在大多数情况下都不会改变，所以它们可以编译一次，缓存然后简单地包含......

Answer 1

需要考虑的一些配置：

• module.loaders include - 您应该将include设置为指向您的来源。默认情况下，它将遍历所有内容（node_modules特别慢）。确保已设置
• resolve.unsafeCache
• module.noParse
• 启用 babel-loader 缓存 - loader: 'babel?cacheDirectory'。
• aliasing already built, minified libraries
• future - cache - 这可能会有效one day。遗憾的是，还没有很好的方法来序列化缓存数据。

Answer 2

  

问题在于它很慢。对于每次更改，都会创建一个新的webpack实例，它会从头开始完全编译所有内容。

当我们的模块基础变大（3.5k +）时，我们遇到了同样的问题，其中webpack在常规MacBook 13上花费长达80秒来执行初始构建。

我们采用的方法是并行化转换阶段（基本上是webpack加载器），这在一些机器上的构建时间方面产生了高达500％的增益。查看https://github.com/amireh/happypack插件，看看它是否适合您。

它还不支持所有加载器，但支持babel-loader我认为是您需要的。

Answer 3

Webpack有一个功能，可以让你创建'DLL'（又名“库包”），你可以编译一次，与主应用程序代码分开。

一个典型的工作流程是将任何大型，不经常更改的库放在供应商库包中，您可以编译一次，然后为您自己的代码创建一个小得多的应用程序包。

我在这里写了一篇关于如何做到的帖子：https://robertknight.me.uk/posts/webpack-dll-plugins/

@ bebraw的上述建议，我特别指出1）对现有的缩小库进行别名而不是将它们包含在捆绑中 - 这与创建库捆绑包具有相同的好处，并且2）如果您使用的是转换器，则它是重要的是，转换器只能通过module.loaders.(include|exclude)选项在您自己的代码上运行，而不是node_modules/

中的所有库代码