捆绑 .js 文件与 CDN

Posted 2023-02-22

【中文标题】捆绑 .js 文件与 CDN

【英文标题】：Bundling .js files vs CDN

【发布时间】：2011-11-18 17:49:04

【问题描述】：

为了提高我们网页的性能，我们建议使用CDNs 在我们的网页上提供.js 文件。这是有道理的。

此外，我们建议捆绑我们的.js 文件，以减少负载时向服务器发出的请求数。

因此，我们需要坐下来决定是使用 CDN 还是捆绑 .js 文件。

有什么好处和坏处？哪些更有意义？

【问题讨论】：

对 .js 文件only 使用 CDN 似乎是一个奇怪的决定。 :)

@bzlm 是吗？不适合很多人强硬。

你是什么意思？除非您的应用程序主要由 .js 文件组成，否则这不会导致延迟和缓慢，因为它们很容易在客户端合并、压缩和缓存。

对于 RTM，我们现在支持 CDN 上的 B/M。很快我们将提供回退保护（当 CDN 关闭时）

【参考方案1】：

为什么不能将它们捆绑并将它们放置为 CDN？这几乎不应该是一个或另一个的决定吗？

如果您必须选择其中一个，这取决于您包含多少个.js 文件。对于少量文件，我建议 CDN 会更快，而对于更多数量的文件，.js 文件包肯定 更快。切换的位置是您可以尝试的。

【讨论】：

那么开发阶段呢？它使您的项目紧密耦合。

@tugberk：它不是那样工作的。当您发布应用程序时，您编写一个将 javascript 文件组合在一起的构建脚本。在同一步骤中，您还可以缩小文件，这将进一步减小 JavaScript 文件的大小。

所以，您需要一个流程来处理这项工作。嗯，这需要思考，但很有意义。

@tugberk：不必那么完整。它可以是一个简单的 bash 脚本 (cat *.js > application.js)，或者你可以用你熟悉的语言编写一些东西……只是获取一些文件并将它们组合起来。

@tugberk：他们不提供捆绑文件是什么意思？当您在您自己完成捆绑和缩小后将其上传给他们时，他们会将其视为一个文件。

【参考方案2】：

我的回答：两者都。捆绑它们并将它们放在 CDN 上。

这样做的缺点是什么？要看。你的构建过程是什么样的？你能轻松地自动化捆绑和缩小吗？您使用的是 Yahoo YUI 还是 Google Closure 或其他？

另外，如果有很多依赖于 GUI 的 jQuery，由于元素/效果/css 不断变化，可能会出现一些耗时的摩擦。

测试也很重要，因为可能存在缩小问题。

底线：5 个 javascript 文件安全地 捆绑到 1 个文件中 === 减少了 4 个请求。

只有普通的旧 html 和一个外部 javascript 引用 === 2 个对您的服务器的请求的页面。但是，一个页面只有普通的旧 Html 和一个 CDN 上的外部 javascript 引用 === 1 对您的服务器的请求。

目前我们正在使用 Google Closure 工具。 Google Closure Inspector 有以下帮助：

Closure Compiler 会修改您的原始 JavaScript 代码并生成比原始代码更小、更高效但更难阅读和调试的代码。 Closure Inspector 通过提供源映射功能来提供帮助，该功能可识别对应于已编译代码的原始源代码行。

【讨论】：

将它们捆绑在一起对我来说并不复杂。让我思考的是我可以把它们放在哪里。你知道有什么好的供应商吗？另外，我有自己的 CDN。它处理 Cache-Control、If-Modified-Since、If-None-Match 标头。但不支持 GEO。

我已经使用 Rackspace Cloud Files - rackspace.com/cloud/cloud_hosting_products/files 六个月了 - 零问题并与 Akamai CDN 集成。

【参考方案3】：

正如其他人已经说过的那样，如果可能的话，答案是两者兼而有之。捆绑（和缩小）为您的用户带来好处，因为它减少了页面重量。 CDN 使您的服务器受益，因为您正在卸载工作。一般来说，除非您观察到性能问题或您无事可做，否则您也不需要优化。

【参考方案4】：

你需要考虑一些事情......

在页面加载早期需要加载多少 JS，延迟到后面可以延迟多少？

如果您可以延迟加载 JS（例如，将其放在页面底部）或像 Google Analytics 那样异步加载，那么您将最大限度地减少下载 JS 所花费的阻塞 UI 线程的时间。

在弄清楚如何拆分 JS 的负载后，我将处理各种 JS 文件的合并/缩小 - 减少 HTTP 请求是提高性能的关键。

然后考虑迁移到 CDN 并确保 CDN 可以提供压缩的 JS 内容并允许您设置标头以便“永久缓存”（如果您永久缓存，则需要对文件进行版本控制）。 CDN 有助于减少延迟，但也可以通过无 cookie 来减小大小

您可能要考虑的其他事情是为静态内容设置一个单独的域，在您整理内容时将其指向您的服务器，然后在看起来值得时切换到 CDN。

安迪