将Elm运行时提取到单独的块中

时间:2017-01-25 07:57:46

标签: webpack elm webpack-2

编译Elm文件时,Elm运行时将被提取到同一文件中。我们从现在开始调用此文件app.js。即使在app.js中更改了单个字节,散列也会更改,导致客户端再次下载文件,即使只更改了一个字节。有没有办法将Elm运行时提取到单独的vendor(或commons)块中?

1 个答案:

答案 0 :(得分:5)

在Elm 0.18和之前的版本中,Elm的核心包含在每个捆绑包中。

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

解决方法(未经测试!)

  1. 将您的Elm代码编译为捆绑包output.js
  2. 打开output.js并从文件开头一直到最后一个var声明,如下所示:

    var _elm_lang$html$Html_Events$Options = F2(
    

    在以_elm_lang开头的最后一个变量声明之下,你应该看到写的模块的代码。这就是分离开始的地方。

  3. 将整个块复制并粘贴到单独的文件中,并将其命名为elm-core.js
  4. 多田!您现在应该可以在HTML文件中加载它们了:

     <html>
     <script src="elm-core.js"></script>
     <script src="output.js"></script>
     </html>
    
  5. <强>小心!整个输出包被包装在IIFE(立即调用的函数表达式)中,因此您必须将其中的所有块包装起来以确保其正常工作。如果不这样,则会出现类似“F2”的错误未定义“和”A2未定义“。

    榆树0.19 +

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