Javascript 如何在浏览器中推迟代码求值？

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

目前我面临性能问题（有些库相当大）。由于浏览器中的代码求值，它们“消耗”了大量ram并影响加载时间。我想推迟它和评估只有这些模块是必要的，在主屏幕上的应用程序

我的想法是使用与webpack对sourcemaps相同的机制：

（评估源地图）

Webpack只是将代码放在eval（“模块代码”）中，这会阻止Javascript引擎进行自动评估。当然，这段代码不能缩小，而且在代码的末尾还附加了一个sourcemap作为base64。我想在没有源地图的情况下做同样的事情，包括丑陋化。此外，我有一个想法，通过压缩源代码来减小应用程序的大小，这样最终它将eval（gz.decompress（“模块代码”）

这将是应用程序的一个巨大变化，因此在我打算重新发明轮子之前，我想问您：

从问题的角度看，这有意义吗

你知道现有的解决方案吗

您是否建议使用webpack中的任何现有组件，如：

或者从头开始编写自己的解决方案（加载器/插件）。

1）类似的问题可以通过Web包功能解决

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

2） 看看这个：，看起来很有希望做这类事情。例如，延迟选项适用于要延迟执行的模块或脚本。Async适用于希望在执行HTML时执行的脚本。不过要注意比赛条件

---

3） 您提到您使用的库非常大，请确保使用带有的Webpack。如果您使用的旧网页包（版本1.*）没有树抖动，则应尝试手动优化导入。例如，它不是从“lodash”导入地图，而是从“lodash/map”导入地图

4） 您还提到ram是问题所在，那么压缩如何帮助ram呢？压缩可以帮助浏览器更快地检索它

5） 另一个想法是：

加载主页所需的脚本

执行它们。此时，用户将看到正在运行的页面

然后在后台缓慢加载其他脚本，用户不会注意到

根据用户需要评估加载的代码

---

不要做你想做的事

如果您确实想找到一个奇怪的技巧来获得您想要的东西，请尝试动态地包含您的大JS文件。请参阅或谷歌

jquery-getscript

。无需其他网页包操作

如果没有，请继续阅读

---

你从错误的角度处理这个问题

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

您正在下载该文件的

gzip

-ed版本（如果没有，请使用谷歌

http脚本gzip

）

您将

标记包含在

正文的末尾。只有在呈现HTML之后，才会开始下载和解析JS

然后，最重要的是，试着找出30MB来自哪里。这不太可能是你所有肥胖依赖的合理总和。通常，它是一个特别臃肿的库（或两个）。确保使用，而不是因为最小的是膨胀。为超出大小的依赖项寻找替代方案

---

世界上没有一家温泉浴场应该拥有30MB的JS捆绑包。我假设您的项目不是很大，因为否则它将是业务关键型的，您将投资于提供一个体面的后端策略（例如，代码拆分、死代码消除等）。

当您的应用程序不是作为一个包含所有内容的html文件发布时，这一点很明显。对于代码拆分，我可以使用jsonp机制，但在本例中不行。您提到您使用的库非常大，您是否使用带有树抖动（）的Webpack？因此，如果不需要，您有机会不加载任何代码，那么如果您不想对其进行评估，为什么还要加载它呢？您还提到ram是问题所在，那么压缩如何帮助ram呢？压缩可以帮助浏览器更快地检索它。另一个想法是：1）加载主页所需的脚本2）执行它们。此时，用户看到正在运行的页面3），然后在幕后缓慢加载其他脚本，用户不会注意到。4） 根据用户需要评估加载的代码。您忘记了主要约束，这是一个单文件web应用程序（由于后端资源不足，这是一个关键要求）。我只是无法在幕后加载更多脚本，我已经拥有了所有脚本。我只想通过浏览器、JIT等延迟评估。这将加快启动应用程序的速度，并在开始时消耗更少的内存。您是否监控了Chrome任务管理器中的“JavaScript内存”量？我遇到了一些类似的问题，我放弃了

gz的想法。解压

，因为最终，它的客户端比提供gzip内容要重得多。实际上，这个项目非常庞大，它包含多个客户端操作，如解析/linting xml、定制语言验证器（如antler等）。您建议使用get/request，你还是不明白重点。在整个应用程序生命周期中，我不能下载多个文件。我知道这不是构建SPA的好方法，我只是在处理现有的架构及其限制。然后我的主要观点是尽可能减少下载文件的大小。我的got/request建议只是一个简单的例子，说明一个依赖项可能会消耗掉您的捆绑包的兆字节