组合 javascript 文件中的多个启动功能答案

【问题标题】：Multiple startup functions in a combined javascript file组合 javascript 文件中的多个启动功能
【发布时间】：2014-01-06 04:21:18
【问题描述】：

出于性能原因，我的应用程序的前端当前使用单个合并/缩小的 javascript 文件。这是一个方便的设置，但我遇到了问题。各个页面在 $(function()) 中都有自己的启动代码，但是由于在每个页面上都引用了该站点的组合 javascript，因此所有的启动函数在每个页面上执行，这完全是意料之外的。

我想出的唯一解决方案是在每个启动函数中放置一个条件，仅当可以在页面的容器中找到某些数据时才执行。例如：

$(function() {
  if($('title').text()=='some title') {
  // do something
  }
}

仅当页面的标题是“某个标题”时，上述函数才会运行，从而阻止它在其他页面上运行（当然，假设它们具有不同的标题）。这种策略可能适用于整个站点，但它看起来很笨拙且不安全。谁有更好的解决方案？

【问题讨论】：

只合并所有页面的共同点。 :-) 否则，这不是节省，而是浪费。

标签： javascript jquery frontend minify document-ready

【解决方案1】：

如果您有 1000 个页面，那么即使您不需要它们，您也正在下载 999 个功能。将单独的东西拉出到他们自己的 js 文件中。然后对于每个页面，您只会拉下两个 js 文件（核心文件和页面特定文件）。然后我会更进一步，在 imgs 和 js 文件上实现缓存，这样它们就不会被拉下，甚至不会检查它们是否被修改，从而节省了许多网络旅行。但是，当您推出更改时，您必须强制用户重新下载文件，通过每次“推送”或“构建”更改目录结构来做到这一点。

示例：yoursite/javascript/jan01build/allYourJsFiles

然后像这样在顶级 javascript 文件夹上实现缓存（比如一年）...https://stackoverflow.com/a/16753140/3112803

现在，如果您在 Chrome 中使用 F12 查看网络流量，您应该会看到 js 文件的“状态 200”和“大小 - 来自缓存”。这意味着甚至没有进行网络旅行来查看它是否被修改（304 状态）。

然后，当您更改代码并执行另一个“推送”或“构建”时，您将不得不强制用户获取新文件，只需将目录更改为...

示例：yoursite/javascript/feb01build/allYourJsFiles

（用图像重复所有这些）

【讨论】：