为什么我的 javascript 包下载这么慢？

Question

我已将所有 js 库捆绑到一个大文件中，以节省大量 http 请求。

但是由于某种原因，下载这个 1.2mb 的包需要 9.29 秒（有时是 +15）。

在这种情况下，包没有缩小，但即使缩小，783kb 也需要 4-7 秒，所以也好不到哪里去。

但最大的谜团是：如果我快速刷新页面 5-6 次，那么加载时间就会恢复正常（~150 毫秒）。每次刷新都正常。但是如果我等5分钟。并且不提出任何要求。然后加载时间又变慢了。

而且当我在本地环境中运行我的应用程序时，它总是加载很快。

现在我有两个问题想请教大家：

1：将我所有的库连接成一个文件是错误的吗？

2：为什么在我的情况下下载 ~1mb 需要将近 10 秒的时间？

也请看看图片，显示请求加载时间和我的请求头

Answer 1

1：“将我的所有库连接到一个文件中是错误的吗？”

这里没有正确和错误的答案，这很大程度上取决于捆绑包中的内容以及其使用方式（所以我假设您通常关心加载速度）。一些想法：

一般来说，组合和缩小 JS、CSS 几乎总是一个好主意（并且图像应该组合成sprites）。线路上的字节越少，传输速度就越快，请求越少，开销就越少，而且成本也更低。但...

• 当您说“我的所有库”时，您是否包括通过公共 CDN 提供的库？如果是这样，我会考虑使用这些替代方案。最终用户很有可能已经从大型/受信任的 CDN（例如 google）获得了给定文件，如果他们没有，则会在您的网站加载的同时快速下载该文件，并且无需您支付任何费用。（如果您有安全意识，这可能是不可接受的，依赖第三方来托管所需的库 - 但这是一个可能会节省大量加载时间的权衡 - 取决于您包含的库）。
• 浏览器限制每个主机名的请求（因此这取决于您总共发出多少请求），因此使用多个子域/域/cdn 来加载您的资产是有意义的（id 将其保留为 1 或 2 个附加域） ）。
• 根据您组合的库数量以及使用它们的频率，仅在需要它们的页面上加载特定库可能是有意义的（您甚至可以在不需要它们的页面上延迟加载它们，以便它们已经被缓存，但不暂停渲染其他页面）。仅在单个页面上需要的脚本可以合理地移动到 HTML 或单独的脚本文件中，并且可以提高平均页面加载速度。

2：“为什么在我的情况下下载 ~1mb 需要近 10 秒？”

你自己说过 - “本地环境......总是加载得很快”。您的问题是数据必须传输的距离，而不是数据的打包程度。无论您加载多少脚本，通过本地主机进行传输几乎是瞬时的，通过互联网发出和返回会增加建立连接的延迟。您的传输速度受到浏览器和服务器之间最慢的“链中链接”的限制。

为了缩短计算机和服务器之间的距离，您应该考虑缓存文件并将其托管在 CDN 后面。来自浏览器的请求将路由到请求者所在地理位置的 CDN 边缘位置服务器。如果 CDN 之前已经缓存了请求，它会立即返回（并且距离更短，因此速度更快）。如果 CDN 边缘位置尚未缓存该文件，它将代表您的最终用户（通过超快速专用网络）向您的服务器（称为 ）发出请求Origin，并且如果标头允许缓存该文件以供将来的请求。

缓存可能会导致大问题，所以我的建议是使用cache busting query string. 这提供了 CDN 和浏览器级缓存的好处 - 即巨大的速度改进，但仍然允许您轻松更新代码并确保访问者将检索最新版本。假设您有一个小型文件~/minified.js，您会将其引用为~/minified.js?v=1（名称/值并不重要）。将来您可以将~/minified.js标记替换并更新为~/minified.js?v=2. 这要求您的实际 HTML 不被缓存，或者至少使用短暂的缓存，但这意味着浏览器会将v=1和v=2视为两个单独的请求，因此将下载/缓存它们。

其他一些想法：

• 根据应用程序的不同，将 JavaScript 分成 2 个包可能是可行的。脚本critical path很小，下载速度很快，并且包含允许页面开始渲染的最低限度的内容。然后是一个更大的延迟加载脚本，其中包含将在页面加载稍后的某个时刻下载的所有其他内容。虽然这增加了传输文件的总开销，并且基本上回避了问题，但它可以让您的页面更快地开始渲染，从而使它们“显示”得更快。此外，您还可以将关键路径代码嵌入到 HTML 中 - 向初始负载添加几 KB，以换取 HTML 解析后脚本可用。
• CloudFlare 提供免费的 CDN 包 - 它是基本的，但可能合适（并且包括免费的 SSL）。