如何提高webpack / babel的性能而不使用手表功能？

Question

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

问题是，，它是慢的，。对于每一个变化，webpack的一个新的实例被创建，它从零开始编译所有的东西。

我知道我可以跳出sbt构建系统，只是在开发阶段单独使用webpack来查看和重建我的文件。但在此之前，我想知道是否有办法加快webpack的建设进程。

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

Answer 1

需要考虑的一些配置：

• module.rules包括 --您应该将include设置为指向源。默认情况下，它将遍历所有内容(特别是node_modules是缓慢的)。一定要把它设置好
• resolve.unsafeCache
• module.noParse
• 启用babel-loader缓存- loader: 'babel?cacheDirectory'。
• 已建立的、缩小规模的图书馆的别名
• 未来-- 缓存 --这可能对总有一天有用。遗憾的是，还没有一种很好的方法来序列化缓存数据。

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)将现有的小型库混在一起，而不是将它们包含在包中--这与创建库包具有相同的好处；如果您使用的是一个转换程序，那么重要的是，只通过module.loaders.(include|exclude)选项在您自己的代码上运行，而不是在node_modules/中的所有库代码上运行。