在前端开发中，我们经常会遇到静态资源缓存问题，例如浏览器缓存导致新版本的 CSS、JS 文件无法及时更新，从而影响用户体验。为了解决这个问题，我们可以使用 asset-cache-bust 这个 npm 包来实现资源缓存版本控制。
安装
使用 npm 命令安装 asset-cache-bust 包：
npm install --save asset-cache-bust
用法
引入
在需要使用该库的文件中，首先需要引入该库：
var assetCacheBust = require('asset-cache-bust');插入版本号
assetCacheBust 函数接收两个参数：第一个参数是包含资源路径的字符串，第二个参数是需要添加的版本号。例如，在 HTML 文件中，我们可以使用以下代码实现对 CSS 文件的版本控制：
<link rel="stylesheet" href="<%= assetCacheBust('/styles/main.css', 'v1.0') %>">上述代码会将 /styles/main.css 替换成 /styles/main.css?v=v1.0，从而实现版本控制。同样的，我们也可以对 JavaScript 文件进行版本控制，例如：
<script src="<%= assetCacheBust('/scripts/main.js', 'v1.0') %>"></script>版本号生成
在上面的代码中，我们手动指定了版本号，但是实际应用中，我们可能需要自动生成版本号。asset-cache-bust 包提供了 defaultOptions 方法来实现自动生成版本号。
首先，我们需要在包引入时设置默认配置：
assetCacheBust.defaultOptions.hashFunction = 'md5'; assetCacheBust.defaultOptions.baseDir = __dirname;
其中，hashFunction 是用于生成版本号的哈希算法，默认为 md5，也可以使用 sha1 等其他哈希算法。baseDir 则是资源目录的基础目录，用于计算资源的相对路径。
接着，在使用 assetCacheBust 函数时，我们不需要显式指定版本号：
<link rel="stylesheet" href="<%= assetCacheBust('/styles/main.css') %>">asset-cache-bust 包会自动根据资源路径和配置信息生成版本号。当文件内容发生改变时，版本号也会相应更新，从而实现缓存版本控制。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- ------- --- -------------- - ---------------------------- -- ------ ------------------------------------------ - ------ ------------------------------------- - ---------- -- ------ --- ------- - ------ ---------------- ------- - ---------------------------------- - ----- -- ------ --- -------- - -------- ------ - ---------------------------------- - -------------- -- -- ---- --- ---- - ---------- ------------------------ - ------- - --------------------- - -------- - --------------------- ------------------
以上代码会输出以下 HTML 代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------------------------------------------- ------- ------ ------- ------------------------------------------------------------------- ------- -------
可以看到，asset-cache-bust 包已经为资源添加了版本号。这样一来，我们便可以轻松实现对前端静态资源的版本控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005546e81e8991b448d1b6a