如何在浏览器中推迟代码评估？

Question

我正在开发相当大的SPA（最终约30MB），不幸的是，其中一个要求是必须将应用程序作为一个大的html文件发布。我使用webpack将所有部分连接在一起。

目前我遇到了性能问题（有些库很大）。他们＆＃34;吃＆＃34;由于浏览器中的代码评估，大量内存并影响加载时间。我想推迟它并仅评估应用程序主屏幕所需的这些模块。

我的想法是使用与webpack相同的机制来处理源图：

https://webpack.js.org/configuration/devtool/（eval-source-map）

Webpack只是将代码放在 eval（＆＃34;模块代码＆＃34;）中，这会阻止Javascript引擎自动评估。当然，这段代码不能缩小，并且还有源码映射作为base64附加到最后。我想在没有源图和包括uglification的情况下做同样的事情。此外，我有一个想法，通过压缩源减少应用程序的大小，所以最终它将 eval（gz.decompress（＆＃34;模块代码＆＃34;））。

这将是一个巨大的应用变化，所以在我要重新发明轮子之前我想问你：

1. 从问题的角度来看是否有意义？
2. 您知道任何现有的解决方案吗？
3. 您是否建议使用webpack中的任何现有组件，如：

https://webpack.github.io/docs/code-splitting.html

或从头开始编写自己的解决方案（loader / plugin）。

Answer 1

不要那样做你想要的！

如果你想找到一个奇怪的技巧来获得你想要的东西，请尝试动态地包含你的大JS文件。请参阅here或Google jquery getscript。无需其他Webpack操作。

如果没有，请继续阅读。

你是从错误的角度处理问题。

首先，确保您正在执行所有明显的HTML / HTTP内容：

1. 您正在下载文件的gzip版本（如果没有，请点击Google http script gzip）
2. 您在<script>的末尾添加了body标记。这将在HTML呈现后开始下载和解析JS。

然后，最重要的是，试着找出30MB来自哪里。你所有的大脂肪依赖都不太可能。通常，它是一个特定的膨胀库（或两个）。确保使用got代替request，因为最少的是膨胀。查找超大依赖项的替代方案。

世界上没有一个SPA应该拥有30MB的JS捆绑包。我假设您的项目不是很大，因为否则它会对业务至关重要，您会投资提供一个体面的后端策略（例如代码拆分，死代码消除等）。

Answer 2

1）使用Webpack code splitting功能可以解决类似的问题。

我们的想法是，在用户访问特定页面之前，您不会加载特定于路由的代码和库。

2）看看这个：script-ext-html-webpack-plugin，看起来非常有希望做这些事情。例如，延迟选项适用于您希望延迟执行的模块或脚本。 Async将用于在HTML执行时要执行的脚本。关于竞争条件要小心。

3）您提到您使用的库很大，请确保将Webpack与tree shaking一起使用。如果您使用没有树抖动的旧Webpack（版本1. *），您应该尝试手动优化导入。例如，代替import _ from 'lodash'，它将是import map from 'lodash/map'。

4）你还提到过ram是问题，所以压缩怎么能帮助ram？压缩可以帮助浏览器更快地检索它。

5）另一个想法是：

1. 加载主页所需的脚本
2. 执行它们。此时，用户可以看到正常运行的页面
3. 然后在幕后加载其他脚本，而用户却没有注意到它。
4. 评估加载的代码，因为它将成为用户所需。