【问题标题】：Extract Elm runtime into separate chunk将 Elm 运行时提取到单独的块中
【发布时间】：2017-06-10 07:35:09
【问题描述】：

编译 Elm 文件时，Elm 运行时会被提取到同一个文件中。从现在开始，让我们将此文件称为app.js。即使app.js 中的一个字节发生变化，哈希也会发生变化，导致客户端重新下载文件，即使只有一个字节发生变化。有没有办法将 Elm 运行时提取到单独的 vendor（或 commons）块中？

【问题讨论】：

我不确定有没有办法做到这一点。有一种方法可以编译并将更多模块添加到 app.js 中。 Webpack 实际上感觉比 Elm 慢，因此尝试使用 webpack 进行分块会降低性能。这是一个很好的问题，最好通过elm make 单独发送
@RudolfOlah 将 Elm 运行时移动到单独的块中更适合生产构建。出于我所说的缓存原因，将运行时放入供应商代码中感觉不错。
是的，我同意这一点，但是使用 Elm 似乎性能更好。我想知道在生产中使用 Elm 的公司是如何部署它的，我想知道他们是否使用 webpack 或其他东西。
我的理解是，从 0.18 开始，这是不可能的。 0.19 更多地针对这样的问题，所以可能请继续关注该版本（不幸的是，我不知道它有任何 ETA）。
我发布了一个潜在解决方法，今天晚些时候将使用多个 Elm 编译的 JS 文件对其进行测试，以确保它确实有效，但这就是它的要点。

标签： webpack elm webpack-2

【解决方案1】：

在 Elm 0.18 及之前的版本中，Elm 的核心包含在每个包中。

这可能会降低效率，例如，如果您在多个页面上加载不同的 Elm 组件。每个页面都需要生成自己的包，但 Elm 核心将包含在每个包中。

解决方法（未经测试！）

将你的 Elm 代码编译成一个包，output.js
打开 output.js 并从文件的开头开始直到最后一个 var 声明，如下所示：
```
var _elm_lang$html$Html_Events$Options = F2(
```
在最后一个以_elm_lang 开头的变量声明下方，您应该看到您编写的模块代码。这就是分离的开始。
将整个块复制并粘贴到一个单独的文件中，并将其命名为elm-core.js

多田！您现在应该可以在 HTML 文件中像这样加载它们：

 <html>
 <script src="elm-core.js"></script>
 <script src="output.js"></script>
 </html>

小心！整个输出包包装在 IIFE（立即调用的函数表达式）中，因此您必须将所有块包装在其中以确保其正常工作。 如果不这样做，您将收到类似“F2未定义”和“A2 未定义”。

榆树 0.19+

在 Elm 的未来版本中，应该有更好的解决方案来解决这个问题。

【讨论】：