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

Question

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

目前我遇到了性能问题(有些库很大).由于浏览器中的代码评估,它们会"吃掉"大量内存并影响加载时间.我想推迟它并仅评估应用程序主屏幕所需的这些模块.

我的想法是使用像webpack一样的机制来实现源映射:

https://webpack.js.org/configuration/devtool/(eval- source-map)

Webpack只是将代码置于eval("模块代码")中,这阻止了Javascript引擎的自动评估.当然这个代码不能缩小,并且还有一个sourcemap作为base64附加到最后.我想在没有源图和包括uglification的情况下做同样的事情.此外,我有一个想法,通过压缩源来减少应用程序的大小,所以最终它将是eval(gz.decompress("模块代码")).

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

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

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

或者从头开始编写自己的解决方案(loader/plugin).

Answer 1

不要那样做你想要的!

如果你想找到一个奇怪的技巧来获得你想要的东西,请尝试动态地包含你的大JS文件.看到这里或谷歌jquery getscript.无需其他Webpack操作.

如果没有,请继续阅读.

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

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

1. 你正在下载文件的gzip-ed版本(如果没有,谷歌http script gzip)
2. 你将<script>标签包含在最后body.这将在HTML呈现后开始下载和解析JS.

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

世界上没有一个SPA应该拥有30MB的JS捆绑.我假设您的项目不是很大,因为否则它将是业务关键,您将投资提供一个体面的后端策略(例如代码拆分,死代码消除等).