拆分非常大的javascript文件

Split very large javascript file

本文关键字：javascript 文件 非常 拆分      更新时间：2023-09-26

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

如果可能的话，我想避免这种冻结，但我无法使用WebWorkers做到这一点，因为脚本需要访问UI。我的另一个可能的解决方案是尝试将js文件分割成较小的，但我不知道如何做到这一点。你有什么建议吗?

如果你添加async到你的脚本标签，像这样的<script async src="app.min.js"></script>，它将不再阻止渲染。此外，在浏览器中缓存脚本或从CDN传递脚本可以帮助减少下载时间。

35MB对于一个网站来说太大了。你确定里面没有很多没用的东西，比如图书馆吗?

我们最近写了一篇关于web性能最佳实践的文章，在这里解释了关键的渲染路径和其他前沿问题

仅为JS文件35 MB似乎很荒谬。整个构建可能就是这个大小(纹理、媒体等)。查看一下如何减小构建大小。

虽然35 MB对于JS文件来说太大了，但您可以从以下指针开始:

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

基本思想是将代码拆分为多个文件。然后，让代码更易于重用。你甚至可以查看加载库来减少你的负载。

同样，只在需要时加载资源。SPA有阶段。在需要时加载相关文件。拆分下载从一次到部分，按需方式。也可以查看webpack或grunt或gulp来缩小js.

相关文章：