2

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

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

4

3 回答 3

1

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

然而，35MB 对于网站来说太多了。您确定其中没有很多未使用的东西，例如库吗？

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

于 2016-10-20T13:32:12.877 回答
0

35 MB 仅用于 JS 文件似乎很荒谬。可能整个构建可能就是那个大小（纹理、媒体等）。在这里查看如何减小构建大小。

于 2016-10-20T13:32:38.990 回答
0

虽然35 MB对于一个 JS 文件来说已经足够了，但您可以从以下指针开始：

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

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

此外，仅在需要时才加载资源。SPA有阶段。在需要时加载相关文件。将下载从 1 次拆分为部分按需下载。还要查看webpackor gruntorgulp来缩小 js。

于 2016-10-20T13:44:10.480 回答