捆绑脚本中的$(document).ready()

Question

我最近在网络优化方面做了很多工作,我遇到了一个有趣的问题.我想知道是否有人可能知道现有的解决方案.

假设您有多个特定于页面的外部.js文件,每个文件都有自己的页面特定 $(document).ready()功能.假设第1页的文档就绪功能将样式应用于<li>正文中的每个,而第2页中准备好的文档仅使用样式<input type="button" />s.只是一个简单的例子.

现在假设您将这两个脚本以及所有库脚本捆绑在一起,以减少页面加载时的http请求数.现在,两个文件准备就绪了,第2页的li将使用仅适用于第1页的代码进行格式化.

我的问题是 - 有没有办法通过jQuery或第三方库将特定文档分配到特定页面但仍然将它们全部捆绑到一个.js文件中？

Answer 1

从架构的角度来看，如果代码块仅在一个页面上有意义，为什么不应该将其与该页面捆绑在一起？我知道将所有 HTML 放在一个地方并将 javascript 放在另一个地方可能看起来更“有组织”，但这真的可以节省您的服务器或加快您的用户体验吗？

当我们减少连接数量但增加服务器负载时，捆绑就会出现一个问题，因为我们将大量未使用的垃圾填充到组合文件中。服务 1,000 个 1k 文件和 100 个 100k 文件哪个更好。如果您有 100 个页面，每个页面都有一个唯一的页面，那么当用户只访问一个页面时，document.ready您就会为他们添加大量数据。仅当用户很有可能使用某些捆绑内容时，这种捆绑的好处才真正有用。例如，Google.com 会预先缓存结果页面中所需的实体，因为事实上您位于 google.com，这意味着您将进行搜索的确定性相当高。但它不会预先缓存 gmail 或 google 文档。