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

Question

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

我运行一个网站，其中各个页面引入不同的 css 和不同的 JS。因此，如何在每页的基础上缩小并连接这些文件？

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

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

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

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

Answer 1

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

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