向 esbuild 添加缓存破坏器

以你之姓@ 2023-10-15 14:52 21阅读 0赞

### 将 Cache Buster 添加到您的 esbuild Pipeline ###

您有一个很棒的 JS 应用程序，您的用户喜欢它。但每次您想要部署新代码时，您都会遇到来自用户的相同支持消息：

“我还没看到？”  
“还是不行。”  
“你知道自己在做什么吗？”  
“我不认为你解决了它。”  
当然，您的屏幕上会出现世界各地的开发人员反复对他们的屏幕说的同一句话：

“但它在我的屏幕上看起来很棒！”

这一切的发生是因为您网站的先前资源（特别是 CSS 和 JS 文件）已缓存在用户的浏览器中。由于我们无法在缓存过期之前将您的笔记本电脑运送给每个用户，因此我们需要一种方法来允许用户尽快获取代码的更新版本。输入缓存清除。

什么是缓存清除？  
当网络还很年轻、带宽还不是我们今天大多数人可用的消防水带时，浏览器公司对提高网络性能的方法非常感兴趣。这并不是说现在不再是一个问题，但在现代互联网上，250kb 文件和 125kb 文件之间的加载时间差异非常小，而在 2002 年，这对于拨号来说是一个非常大的交易™ 。逻辑是，有些资产在页面加载过程中将保持静态，因此如果浏览器在本地保留它们的副本，那么从硬盘驱动器加载它们比通过互联网请求和传输它们要快。

这也有助于服务器性能，因为进入服务器的必须单独处理的传入请求减少了。好处是，在第一个页面加载后，它极大地提高了浏览器快速重新加载页面的能力。

当然，缺点是，如果 HTML、CSS 或 JS 等资源在缓存版本过期之前发生更改，那么用户将看不到新代码，并且体验会不太理想。

缓存清除通过确保每个文件名请求添加唯一标识符来强制浏览器每次加载文件的新副本来解决此问题。

以前的内容https://somesite.com/js/app.js现在会变成类似https://somesite.com/js/app.1693597811135.jsor 的内容https://somesite.com/js/app.js?version=1693597811135。无论哪种情况，文件名或 URI 的附加值都会强制浏览器获取文件的新副本，因为它与本地存储的内容不匹配。

虽然这两种方法都是有效的，但我们将使用第一个示例，其中我们修改文件的文件名。这是因为某些站点速度工具和 CDN 不建议使用查询字符串进行缓存清除。

在 esbuild 中执行此操作  
在 Create React App (CRA) 消亡之后，许多开发人员开始使用基于 esbuild 的工具。CRA 是基于 webpack 的，缓存清除是它很容易处理的事情。随着 Vite 等工具的出现，业内许多人正在转向 esbuild 作为首选的捆绑器/构建工具。

是的，我知道它不是唯一一个好的捆绑器，但它是一个很好的捆绑器。esbuild 与 esbuild 的相对优点<insert your bundler/build tool of choice>可以在另一篇文章中介绍。

我们需要执行的步骤的粗略概述如下：

1.  创建我们的“模板化”版本index.html
2.  在构建过程中生成 unix 毫秒时间戳
3.  将该值替换为我们的index.html
4.  重写我们的index.html
5.  在 esbuild 中进行构建
6.  利润

创建模板  
index.html为了实现这一点，我们希望在可以逻辑访问它的地方创建文件的副本。由于我的项目的顶级目录中有一个构建脚本，其目标是构建到一个public文件夹中，因此我templates向我的项目添加了一个文件夹。

在该目录中，我复制了现有目录index.html并将其命名为template.html. 它看起来像这样：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="/css/index.css" /