跨站点组合 JS 文件的最佳方式

Question

我的网站有 1、2、3 页和 js 文件 A、B、C、D、E、X 和 Y。以下概述了每个页面包含的文件：

Page 1: A
Page 2: A, B, C, D, E
Page 3, A, B, C, X, Y

目前，所有这些文件都是单独发送的，第一次下载它们需要一段时间。我知道将它们压缩成一个文件可以减少传输时间，所以这是我的计划。但在这种情况下，我不想将它们全部压缩到一个文件中，因为第 3 页可以从第 2 页中受益，因为已经缓存了 A、B 和 C（如果有一个大的 ABCDE 文件和一个大的 ABCXY 文件）。是的，用户在典型使用中会在 2 和 3 之间切换。

但这里的答案并不一定只是“制作一个 ABC 文件、一个 DE 文件和一个 XY 文件并完成”，因为我所描述的情况只是一个更大问题的一部分。

人们通常如何处理跨网站合并 JS 文件，其中一些页面共享一些文件？

注意1：所有文件都在几百到几千行的数量级。

注意：如果您由于缺少某些细节而无法回答问题，请解释为什么该细节很重要，以及它如何改变您的答案！

Answer 1

我的第一个想法是缩小 javascript 文件，这是一个选项吗？这可能会解决您加载多个文件的问题；你是如何加载文件的，它是模板的一部分吗？

新编辑：关于主题，我通常也会尝试将文件保存在一个大 javascript 中，但大多数时候这非常困难，所以我尽可能缩小甚至在服务器上使用压缩。

Answer 2

我的项目也有同样的情况，常用的脚本有几十个，每个页面都有自己的附加集。我选择那个选项：

Page 1: A
Page 2: ABC, DE
Page 3: ABC, XY

是的，有 ABCDE 可能会更好，然后你有一个 http 请求，但这会使支持有点棘手（需要记住向所有页面添加新的通用脚本），所以在你之前不要这样做确实看到您的服务器受到请求数量的影响。过早的优化是邪恶的！

另一个问题：浏览器可以同时从一个域加载 2 个脚本文件（一些新浏览器甚至增强了该数量），因此客户端不会被阻止等待脚本加载。因此，采用这种方法应该没有问题，您仍然可以轻松维护它。

您还可以考虑可以自动化它的库。对于Java，你可以看看Jawr，我不知道你的服务器端是什么，所以看看它的可能性并为你的环境找到类似的东西。

ADD-ON：只弹出一个问题，在 Jawr 的帮助下，我们可以使用“调试”模式，这意味着所有文件将单独发送，这有利于开发。在生产中，我们设置jawr.debug.on = false，它使用捆绑包。

换句话说，在开发应用程序时：

Page 1: A
Page 2: A, B, C, D, E
Page 3: A, B, C, X, Y

在生产中，我们使用 ABC...这只是更改了颚式配置，恕我直言，这是最好的方法。如果你使用java，你可以花一些时间玩它，否则真的值得寻找类似的框架/库。