JavaScript 缩小和优化答案

【问题标题】：JavaScript Minification and OptimizationJavaScript 缩小和优化
【发布时间】：2016-12-21 08:22:51
【问题描述】：

我对如何最好地优化我的 JavaScript 和脚本依赖关系有点困惑。

假设我有一个名为 foo.js 的脚本和一个名为 bar.js 的脚本。

foo.js 需要jquery ui-sortable，bar.js 需要jquery ui-datepicker。

我的网站上只有少数几个页面需要foo.js 和bar.js。

我是否将所有内容编译成一个文件并缩小它，并在每个页面上调用它，即使一次只需要一部分函数？

或者最好只在需要时单独调用它们，并在这些实例中发出额外的 http 请求？

还有更好的选择吗？

【问题讨论】：

这是一个权衡。您不希望每个页面上都有单独的资源，因此本地浏览器永远不能使用缓存。但是，您不希望在每个页面上都堆积了该页面上未使用的内容，从而使每个页面负担过重。所以，你必须找到一个快乐的媒介，如何为任何给定的页面选择取决于一堆事情。无论哪种方式，都没有绝对的答案。如果可行，您可以考虑使用少量单独的最小化文件，这些文件可以有效地缓存并使用适合给定页面的文件，并努力优化最常用的页面。

【解决方案1】：

就个人而言，我更愿意仅在需要时调用所需的资源。您将没有负担管理每个页面的不必要导入，并将改善您网站的加载时间。

【讨论】：

【解决方案2】：

这确实是一个与您的应用程序特别相关的权衡问题。

首先，您可以考虑使用jQuery from a CDN，这将允许增加缓存命中的机会（减少服务器使用的带宽量），并确保用户在地理上接近回应。

关于您的自定义代码，衡量优化影响的最佳方法是为您的应用运行测试。尝试设置 A/B 测试并研究用户对您网站的体验。

在我看来，一般来说，在生产中使用唯一的缩小文件（这会导致单个 HTTP 请求）通常是一个合适的解决方案，但它实际上取决于您的代码库的大小。

【讨论】：