简介
当网站前端的静态资源发生变化时，通常需要将其名称中添加一个带有随机字符串的哈希值，以此来强制浏览器重新请求资源，而不是从缓存中获取。此时，mimosa-asset-cache-bust 就可以为你解决这个问题。本文将详细介绍该 npm 包的使用教程，包括安装、配置、使用方法以及常见问题。
安装
通过 npm 进行安装：
npm install mimosa-asset-cache-bust --save-dev
配置
在 mimosa 的配置文件 mimosa-config.js 中进行配置，添加以下代码片段：
assetCacheBuster: {
fileTypes: ['css', 'js'],
defaultMethod: 'mtime'
}其中 fileTypes 指定要处理的文件类型，可以是 css 和 js 之一或两者的组合。defaultMethod 表示 hash 方法，可以是 mtime 和 crc32。mtime 表示使用文件的修改时间作为哈希值，crc32 则使用 crc32 校验和。
此外，该插件还支持更多的配置项，如 ignore、multiplier、key 和 hashLength 等，可根据实际情况进行配置。
使用方法
mimosa-asset-cache-bust 提供了三种使用方法：
命令行方式
通过以下命令将资源文件进行处理：
mimosa asset-cache-bust
编辑器插件
在 sublime text 中，安装 mimosa-sublime，即可通过 ctrl-alt-B 执行命令进行文件处理。
自动化构建工具
将 mimosa-asset-cache-bust 集成到 Grunt、Gulp 或 Webpack 等构建工具中，根据对应插件的语法执行文件处理。
示例代码
下面是一段示例代码，以将一个 style.css 文件的哈希值添加到 HTML 文件中为例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------------------------------------------------------------- --------------- ------- ------ ------- -------
其中 ?tc0314-4f5544ea949fba304cb44fe7a33a9a2c 表示带有哈希值的文件名。在使用 mimosa-asset-cache-bust 处理后，哈希值部分将会发生变化。
常见问题
为什么有时候更改文件名不生效？
如果文件名更改后不生效，可能是因为缓存中该文件的哈希值未被清除。在缓存的站点中，可以尝试使用 ctrl + F5 或 cmd + shift + R 强制刷新页面。
为什么哈希值发生变化后，无法获取到资源？
可能是因为未将哈希值添加到资源的路径中。在使用 mimosa-asset-cache-bust 处理文件时，需要同时更新资源文件的路径。
如何处理 HTML 文件中的动态路径？
如果 HTML 文件中包含动态路径，如 <img> 标签中的 src，则需要手动更新这些路径。建议使用模板引擎完成，如 EJS、Jade/Pug 等。
总结
mimosa-asset-cache-bust 是一款方便好用的 npm 包，使用简单且效果显著。通过本文的介绍，相信读者已经掌握了该包的使用方法和优化技巧。在实际开发中，可以根据自身需求进行配置和使用，提高网站的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f491d8e776d080411cd