【问题标题】:How to improve webpack / babel build performance without using the watch feature?如何在不使用 watch 功能的情况下提高 webpack/babel 构建性能?
【发布时间】:2015-05-29 19:08:56
【问题描述】:

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

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

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

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

【问题讨论】:

    标签: webpack babeljs


    【解决方案1】:

    需要考虑的一些配置:

    【讨论】:

    • 能否告诉我们systemjs是否有类似的能力?
    • 你的意思是 webpack 2 特定的位吗?如果是这样,我认为这不会对局势产生太大影响。
    • 我们使用 systemjs builder (github.com/systemjs/builder) 而不是 webpack。而且我们在构建过程中也会遇到性能问题。所以我想知道systemjs builder是否有类似的东西来提高性能。
    • 啊,您可能想就此提出一个单独的问题。 :)
    • @johannchopin 感谢您的提醒!我已经相应地更新了。
    【解决方案2】:

    问题是它很慢。每次更改都会创建一个新的 webpack 实例,它会从头开始编译所有内容。

    当我们的模块库变得很大 (3.5k+) 时,我们遇到了同样的问题,其中 webpack 在普通 MacBook 13 上需要长达 80 秒才能执行 initial 构建。 p>

    我们采用的方法是并行化转换阶段(基本上是 webpack 加载器),这在某些机器上的构建时间方面产生了多达 500% 的收益。查看 https://github.com/amireh/happypack 的插件,看看它是否适合您。

    它还不支持所有加载器,但支持babel-loader,我相信这是你需要的。

    【讨论】:

    • HappyPack 很棒——希望它能与 TypeScript 一起使用
    • HappyPack 实在是太快了。在使用 HappyPack 之前,构建时间需要 70 秒,现在只需 35 秒。
    • @CoolGuy,你能提供一个代码 sn-p 来说明它如何与create-react-app 一起使用..
    【解决方案3】:

    Webpack 具有一项功能,可让您创建“DLL”(又名“库包”),您可以将其与主应用程序代码分开编译一次。

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

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

    在上面@bebraw 的建议中,我要特别指出 1) 为现有的缩小库添加别名,而不是将它们包含在包中 - 这与创建库包具有相同的好处,以及 2) 如果您使用的是转译器,它是重要的是,转译器只能通过module.loaders.(include|exclude) 选项在您自己的代码上运行,而不是node_modules/ 中的所有库代码

    【讨论】:

    • 感谢您的提示。归根结底,问题不仅在于速度,还在于热重载和其他很难在 sbt 中复制的酷 webpack 功能(或者我错了吗?)。现在我正在使用 webpack 进行开发,并且为 JavaScript 关闭了 sbt 构建系统。
    • 我对 sbt 不熟悉,但是要让热重载工作需要你至少在监视模式下运行 webpack(你不必使用 webpack-dev-server),这样 webpack 就会生成客户端用于检查和应用热更新的*.hot-update.(js|json) 文件。
    猜你喜欢
    • 2015-07-01
    • 2010-09-19
    • 2010-11-03
    • 1970-01-01
    • 2018-08-21
    • 1970-01-01
    • 1970-01-01
    • 2014-12-26
    • 1970-01-01
    相关资源
    最近更新 更多