拆分非常大的javascript文件

Question

我正在开发一个使用统一生成的webgl内容的Web项目。当尝试加载所需的js文件时，浏览器会冻结大约30秒。主js文件解压缩了35MB大小，所以这似乎是原因。

我希望尽可能避免这种冻结，但由于脚本需要访问UI，我无法使用WebWorkers进行此操作。我的另一个可能的解决方案是尝试将js文件拆分为较小的文件，但我不知道该怎么做。你有什么建议吗？

Answer 1

如果您将async添加到脚本代码中，例如此<script async src="app.min.js"></script>，则不会再阻止呈现。此外，在浏览器中缓存脚本或从CDN传送脚本有助于缩短下载时间。

然而，35MB对于网站来说太过分了。你确定它中没有很多未使用过的东西吗？

我们最近写了一篇关于网络效果最佳做法的文章，解释了关键渲染路径和其他前端问题here

Answer 2

仅用于JS文件的35 MB似乎很荒谬。可能是整个构建可能都是那么大（纹理，媒体等）。看看here如何减少构建大小。

Answer 3

虽然 35 MB 对于JS文件来说很简单，但您可以从以下指针开始：

• 创建实用程序并重用代码。这可以是任何级别。无论是通用组件（HTML生成代码）还是验证逻辑，如果可以使用参数进行配置，则创建一个函数并使用它。
• 如果您的js中有Hard-coded JSON，请将它们移至.josn个文件，并仅在需要时加载它们。
• 根据视图中的部分拆分文件。在SPA中，有些情况下某个部分不可见。对于这种情况，请不要加载此类文件。将代码库从1个文件扩展到100个文件。
• 如果您有很多事件侦听器，请将它们移动到其他文件。您可以拥有section_event.js，section_data.json，section_utils.js和section_index.js。如果涉及大量数据解析，您甚至可以使用section_parser.js

基本思路是将代码分成多个文件。然后，使代码更可重用。您甚至可以查看加载库以减少负载。

此外，仅在需要时加载资源 。 SPA有阶段。在需要时加载相关文件。拆分下载从1次到部分按需方式。另请查看webpack或grunt或gulp以缩小js。