单个JS文件XMLHttpRequest vs组合gzip下载

Question

在我可以陈述情况之前的一些统计数据，

total JS code = 122 MB
minified = 36 MB
minified and gzip = 4 MB

我想一次将整个4 MB压缩下来（在页面上带有加载进度指示器），解压缩它们，但尚未解析它们。 当此时可能不需要很多代码时，我们不希望代码在浏览器的内存中扩展。 当遇到具有相应js文件名的脚本标签时，应进行解析。

目的：更快地一键下载js文件，但从浏览器角度看，其行为保持不变。

是否存在这样的解决方案？ 我什至在想理智吗？ 如果是，我知道如何获取gzip，我想知道如何将其保存在浏览器缓存中，以便在遇到脚本标签时，浏览器不会再次为其触发XMLHttpRequest。

Answer 1

诀窍是利用HTTP缓存指令。 首先，看看这个 。 您只需要获取一次JS代码，因为您可以安全地设置cache指令来指示浏览器无限期地保留JS文件（取决于空间）。 在这种情况下，无限期通常表示2035年。

当您准备使用新版本的JS文件更新所有浏览器端的缓存时，只需使用缓存无效查询字符串即可。 可以使用任何序列号或时间和日期，也可以使用简单的版本号，例如；

<script src="/js/myfile.js?v2.1"></script>

一些缩小框架为您处理缓存清除。 例如，一种好的技术是将内容MD5用作MD5内容并将其用作缓存无效化查询字符串。 这样，无论您的源JS何时更改，浏览器都会请求新版本（因为QS嵌入在HTML脚本标记中），然后再次缓存尽可能长的时间。

XMLHttpRequest将尊重您设置的缓存素数。

在问题的另一部分，我相信您要问的是是否可以下载一个组合的脚本文件，然后仅在页面上使用单个脚本标签引用它的一部分。 不-我不相信你可以做到。 如果要引用单个文件，则需要为要单独使用的每条GZIPped内容提供一个HTTP URL和缓存指令。 但是，您可能会发现它起初的性能与一个大文件相比甚至更高，甚至更多，这取决于您可以实现多少并行化。

一个巧妙的技巧是预加载很多您需要的东西。 Google多年来一直在主页上进行此操作。 基本上，它们预加载资源堆栈（当然是图像，但也可能是JS）。 因此，当您考虑输入什么搜索查询时，他们已经在缓存中加载了您在下一页上想要的内容。

因此，您可以在需要它们之前使用XMLHttpRequest来获取您的JS文件（无需解析它们）。 然后，当您的<script/>标记引用它们时，它们便已被下载，您只需解析它们即可。

Answer 2

除了cirrus关于使用HTTP缓存的观点之外，您还可以分解仍然很大的4mb文件，并仅在需要此功能时才加载它们。

这是更多的HTTP请求，但是4MB一口气就大受欢迎。

建议像require.js这样的东西在需要时加载适当的文件： http ://requirejs.org/docs/start.html