当每个页面引入一组不同的文件时，缩小/连接 js/css 文件。如何？

Question

所以，我了解缩小/连接文件的过程，但如果我没记错，请更正，假设每页有相同的文件。

我经营一个网站，其中不同的页面引入了不同的 css 和不同的 JS。因此，我怎样才能在每页的基础上缩小和连接这些文件？

我在想，在任何特定页面上 - 在页面请求上缩小并捆绑 css/js。 1.后端代码读入文件-css/js。 2. 后端代码缩小并连接文件，将这些文件写入目录。 3. 后续请求会使用这个新写入的文件。

当然，问题在于“主页”可能包含 site.css 和 site.js - 它们可能会被缩小并与该页面上的其他 misc 文件连接。现在，如果我转到“产品页面”......这些文件（ site.js 和 site.css ）也将在那里，但现在它们与“其他产品页面”js / css 文件配对。因此，我们似乎无法真正“创建”一个新的组合文件。因为整个站点上会有大量相同文件的重复。

你有什么想法，当每个页面与其他页面引入不同的集合（想法也可以包含相同的 js/css 文件）时连接/缩小文件的游戏计划？

我研究了常见的程序 YUI 等。但它们似乎没有解决我的特定用例。

Answer 1

我不确定您是否需要担心连接每个页面上的每个脚本，因为您最终会缓存很多内容。例如，如果您缩小了 site.js 和 site.css 并且它们在每个页面上都很常见，那么您无需担心将它们包含在您继续在每个页面上执行的附加缩小和连接中的一些排列。这有意义吗？

另一方面，根据这些文件的大小，一个潜在的解决方案是缩小和连接整个站点的所有内容，然后将其发送一次，因为知道未使用的部分不会花费太多额外的带宽超过向服务器发出全新请求的成本。我知道至少有少数公司这样做只是因为从页面到页面的脚本的整体重量并不重要，他们最终需要从客户端发出更少的请求，从而加快页面加载速度和更容易在服务器上加载。