打包.js文件 vs CDN

Question

为了提高网页性能，我们建议使用CDN来服务于网页上的.js文件。这是有道理的。

此外，我们建议捆绑我们的.js文件，以减少在加载时发送到服务器的请求数量。

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

有哪些优缺点？哪些更有意义？

- tugberk

---

仅仅为.js文件使用CDN似乎是一个奇怪的决定。 :) - bzlm

@bzlm 这是吗？对很多人来说并不是这样。 - tugberk

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

对于 RTM，我们现在在 CDN 上支持 B/M。很快我们将提供备用保护（当 CDN 宕机时）。 - RickAndMSFT

Answer 1

为什么不能将它们捆绑并放在CDN上？这应该不是一个选择一个的决定吧？

如果你必须选择其中之一，那就要看你包含了多少个.js文件。对于较少的文件，我建议使用CDN会更快；而对于更多的文件，打包.js文件肯定会更快。交换点取决于你的实验结果。

- Matt

---

那开发阶段呢？它会使你的项目耦合度高。 - tugberk

这并不是这样的。你需要编写一个构建脚本，在发布应用程序时将JavaScript文件组合在一起。在同一步骤中，你还可以压缩文件，从而进一步减少JavaScript文件的大小。 - Matt

所以，你需要一个处理这项工作的过程。嗯，这需要一些思考，但是非常有道理。 - tugberk

这是我的做法。在编译事件之前，我会使用AjaxMinify对它们进行压缩，然后将它们捆绑在一起。但我只在域上使用它。据我所知，像Google和MS Ajax这样强大的CDN并不提供捆绑的js文件服务。 - tugberk

@tugberk：你的意思是他们不提供捆绑文件的服务吗？当你自己完成捆绑和缩小后，上传到他们时，他们会将其视为一个文件。 - Matt

Answer 2

我的答案是：都可以。将它们捆绑在一起并放置在CDN上。

这样做的缺点？取决于什么。你的构建过程是怎样的？你能轻松自动化捆绑和压缩吗？你正在使用Yahoo YUI或Google Closure或其他工具吗？

此外，如果有很多基于GUI的jQuery，可能会由于不断变化的元素/效果/CSS而导致耗时的摩擦。

测试也很重要，因为可能存在压缩错误。

底线：5个JavaScript文件安全地捆绑成1个文件===少4个请求。

只有纯旧版Html和一个外部JavaScript引用的页面===向您的服务器发出2个请求。但是，只有纯旧版Html和一个外部JavaScript引用的页面在CDN上===向您的服务器发出1个请求。

目前我们正在使用Google Closure工具。 Google Closure Inspector帮助了以下内容：（Google Closure Inspector）

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

- Kris Krause

---

将它们捆绑在一起对我来说并不复杂。让我思考的是我可以把它们放在哪里。你知道任何好的提供商吗？此外，我有自己的CDN。它处理Cache-Control、If-Modified-Since、If-None-Match头文件。但没有地理位置支持。 - tugberk

我已经使用Rackspace Cloud Files - http://www.rackspace.com/cloud/cloud_hosting_products/files/六个月了 - 没有任何问题，并与Akamai CDN集成。 - Kris Krause

Answer 3

正如其他人已经提到的，如果可能的话，答案是两者都要。捆绑（和压缩）可以使页面重量减轻，从而使您的用户受益。CDN则使您的服务器受益，因为您可以卸载一部分工作。一般来说，除非您观察到性能问题或没有更好的事情可做，否则无需优化任何一个。

- jiggy

Answer 4

有几件事情需要考虑...

JS 在页面加载中需要提前加载多少，还有多少可以延迟加载？

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

在确定如何拆分 JS 的加载后，我会处理各种 JS 文件的合并/缩小 - 减少 HTTP 请求是改善性能的关键。

然后看看是否要转移到 CDN，并确保 CDN 可以压缩 JS 内容并允许您设置标题，使其“永久缓存”（如果您永久缓存文件，则需要对文件进行版本控制）。CDN 有助于减少延迟，同时也通过无 cookie 来减小大小。

您可能还想考虑的其他事情是设置一个用于静态内容的单独域名，将其指向您的服务器，而您解决问题后再切换到 CDN 如果看起来值得。

安迪

- Andy Davies