我曾经在mod_pagespeed上工作，它会重写网页，以便它们加载更快。一个关键组件是捆绑：将多个小型资源组合成一个较大的资源以减少开销。例如，它具有组合多个CSS 、 JS和图像的工具。
然而，我们的方法有严重的缺点，因为没有对捆绑的内置支持：
-
组合许多小图像需要精灵，使用 CSS 来确定每次使用所需的图像区域。这是一种非常不同的语法，手工操作很尴尬。我们自动执行此操作的能力是有限的，因为它需要了解网站的 css，并且发布者需要有意设置他们的 css 以尽量减少所需的更改。
-
结合许多小的 CSS 或 JS 文件效果更好，但仍然需要 hack 来防止一个文件中的错误破坏其他文件。
-
我们不得不更改页面中的 URL，这主要是图像的问题。修改图像 URL 的 JS，例如在悬停时将
foo.png更改为foo_hover.png，可能会被破坏，并且如果您下载它们，图像将不会具有正确的名称。这有时也会破坏 JS，因为 JS 期望它可以从其 URL 中获取相关文件的位置。 -
我们需要单独的 CSS、JS 和图像文件。
然而，随着 Chrome/Edge/Opera/Vivaldi 104 的发布，有一个新的 API 使得捆绑子资源变得非常自然。这是一个演示： wbn-demo 。
演示的核心是：
<script type="webbundle">
{
“来源”：“子资源.wbn”，
“资源”：[“script.js”，“sheet.css”]
}
</脚本>
<link rel=stylesheet href="sheet.css">
<script async src="script.js"></script>
这告诉浏览器获取subresources.wbn ，然后如果它需要加载script.js或sheet.css ，它将从包中获取它们，而不是发出单独的请求。当然，这对于我的小演示来说是多余的，但如果我有一个包含大量小资源的页面，那么节省的费用就会加起来。
您可以通过查看规范或 Chrome解释器来了解有关此 API 的更多信息。我希望 Firefox 和 Safari 决定添加对这个功能的支持！
上面我列出了 Chrome、Edge、Opera 和 Vivaldi，五个主要的基于 Chromium 的浏览器中的四个支持此功能。勇敢者呢？ Brave反对Web Bundle，认为它们可以用来解决广告屏蔽问题。我认为他们是错误的，并且当时如此争论，但显然他们并不相信。然而，由于这是一个渐进式增强，Brave 禁用它很好：他们的用户将干净地退回到加载多个资源，而性能成本很小。
（还有另一种使用此功能的方法，它不仅可以减少网络请求，还可以让您有效地将不受信任的内容隔离在唯一的来源上。我在WebBundles for Ad Serving中对此进行了描述，其中描述了如何使用此功能来加载和以更安全和私密的方式展示广告。但不会降低它们的可屏蔽性。）
原文： https://www.jefftk.com/p/built-in-bundling-for-faster-loading