我最近在网络优化方面做了很多工作，并且遇到了一个有趣的问题。我想知道是否有人可能知道现有的解决方案。
假设您有多个特定于页面的外部 .js 文件，每个文件都有自己的特定于页面
$(document).ready() 函数。假设第 1 页的文档就绪功能将样式应用于正文中的每个 <li>，而第 2 页中的文档就绪仅样式 <input type="button" />s。只是一个简单的例子。
现在假设您将这 2 个脚本与所有库脚本捆绑在一起，以减少页面加载时的 http 请求数量。现在，两个 document ready 都将触发，第 2 页上的 li 将被格式化为仅适用于第 1 页的代码。
我的问题是——有没有办法通过 jQuery 或第三方库将准备好的特定文档分配给特定页面，但仍将它们全部捆绑到一个 .js 文件中？
【问题讨论】：
标签： javascript jquery optimization
您始终可以从“应用程序角度”处理页面加载。
例如，创建一个“导航器对象”，在用户想要导航到页面时设置一个常量：
const navigateTo = (page) => {
let pageName = '?';
switch (page) {
case 'login.html':
pageName = 'Login';
break;
case 'index.html':
pageName = 'Home';
break;
default:
console.log("Unknown page: " + page);
}
location.href = page;
return pageName;
}
将您的“document.ready”脚本转换为函数，例如登录页面就绪函数：
$(function() {
console.log( "Login page ready!" );
});
变成：
const loginReady = () {
console.log( "Login page ready!" );
}
然后，每当用户更改页面时，通过单击链接或导航栏项目，运行如下函数：
const runReadyScripts = (page) => {
switch (page) {
case 'Login':
loginReady();
break;
case 'Home':
homeReady();
break;
default:
console.log("Unknown page: " + page);
}
};
【讨论】：
我想一个简单的if 可以解决这个问题：
$(document).ready(function(){
if(location.href == page1) {
...
}
});
$(document).ready(function(){
if(location.href == page2) {
...
}
});
如果您不想接触代码，则不想只包含每个页面上的 .js 文件。这更好，因为您不会将客户端资源浪费在他不会使用的代码上。
实现这一点的一个例子是创建某种服务器代码来将所有文件粘合在一起，而不是手动执行。一个 PHP 示例：
<script type="text/javascript" src="<?php echo Glue::javascript($array_of_files); ?>"></script>
您可以根据需要将其扩展为“粘合”css 或其他类型的文件。此外，您甚至可以包含代码来缩小它们。当然，该函数会缓存这些文件，因此不必每次都“粘合”它。
【讨论】：
您应该根据您的页面捆绑您的脚本。
假设您的主页需要 jquery 和一些自定义脚本。将它们捆绑在一起并引用此捆绑包。
对于像个人资料页面这样的其他页面，您捆绑所需的脚本并引用它。
【讨论】：
从架构的角度来看，如果代码块只在一个页面上有意义，为什么不应该与该页面捆绑呢？我知道将所有 HTML 放在一个地方，将 javascript 放在另一个地方似乎更“有条理”，但这真的可以节省您的服务器或加快您的用户体验吗？
当我们减少连接数但增加服务器上的负载时，捆绑就出现了一点，因为我们将大量未使用的垃圾塞入我们的组合文件中。提供 1,000 个 1k 文件或 100 个 100k 文件哪个更好。如果您有 100 个页面，每个页面都有一个唯一的 document.ready，那么当用户只访问一个页面时，您就会为他们添加很多数据。这种捆绑的好处只有在用户很可能会使用某些捆绑内容时才真正有用。例如 Google.com，他们在结果页面中预先缓存了所需的实体，因为事实上您在 google.com 上意味着您非常肯定会进行搜索。它确实 not 预缓存 gmail 或 google 文档。
【讨论】：
我认为您要实现的目标存在冲突：其中一些是常见的，而另一些则特定于单个页面。如果是后者，为什么在公共模块中？
话虽如此，我们成功使用的一种方法是将所有常用函数移动到主 .js 文件中，以及站点范围内的 $(document).ready() 内容。
个别页面可能有一个localready()函数，而$(document).ready()的最后一步是如果存在就运行它：
/* === common.js === */
$(document).ready(function(){
// snip
if (typeof(localready) != 'undefined') {
localready();
}
});
在附近的文档中：
</body>
<script>
function localready() {
foo();
bar();
}
</script>
</html>
因此，如果正在呈现的页面有一个 localready() 函数，它就会被调用并执行它必须做的任何事情。如果没有，则标准的 ready() 已执行，仅此而已。
希望对您有所帮助。
【讨论】：
“捆绑”是指suturing？
我见过并自己部分实施的一种策略是，应用程序在构建视图时通知视图构建器所有必需的 CSS/JS；在您的示例中，在构建第一页时，它会让视图构建器知道它需要一个特定的 JS 文件。
当页面准备好服务时，head中只引用了一个JS和一个CSS文件，它们是缝合文件。
我已经看到它只是动态完成的，例如<link rel="stylesheet" href="/style.css?pageOne&specialFooter&member" /> 或使用缓存引擎，例如<link rel="stylesheet" href="995093293da7f03f9b631e8d3ec4efc7.css" />（这实际上是第一次请求样式表组合时生成的文件，现在是纯 CSS [不再动态]）
【讨论】：
<style> 标签总是比外部资源快。访问多个缓存的 CSS 文件（或一些缓存的 CSS 文件和一个较小的非缓存文件）将比为每个页面构建的单个缝合的 CSS 文件更快。
【讨论】：