介绍
在前端开发中，由于浏览器缓存和 CDN 缓存等原因，经常会出现更新后代码在客户端缓存中无法更新的情况，这时候我们需要手动清除浏览器缓存或者 CDN 缓存才能看到最新的代码效果。
为了解决这一问题，有一种工具称为“缓存捣乱器”（Cache buster）或者“版本号管理器”（Versioning），其中比较常见的 npm 包是 break-cache。
break-cache 是一个可以帮助你轻松打破浏览器缓存、CDN缓存、以及服务器层的缓存的npm包，本文将介绍如何使用它。
安装
在 npm 仓库中可以搜索到 break-cache，你可以通过以下命令进行安装：
npm install break-cache
使用方法
在需要更新的链接后面添加 break-cache 提供的时间戳，使浏览器不能从缓存中读取该资源。
在链接中添加时间戳
通过 break-cache 可以共体时序字符串添加到其所需更新的资源 URL 后来打破缓存，例如：
<img src="example.jpg?cb=20220101"/> <link rel="stylesheet" href="example.css?cb=20220101"/> <script src="example.js?cb=20220101"></script>
通过添加 ?cb=20220101 使浏览器不再将资源从缓存中读取，从而达到更新资源的效果。可以按照时间周期来更新，如每小时更新一次、每天更新一次，根据实际需求而定。
在 webpack 中使用
在 webpack 项目中，可以使用 webpack-plugin-break-cache 来自动注入时间戳。
安装方式如下：
npm install webpack-plugin-break-cache
在 webpack 的 plugins 中使用 breakCachePlugin：
-- -------------------- ---- -------
----- ---------------- - --------------------------------------
-------------- - -
-------- -
--- ------------------
--------- ------------
--
-
--使用上述配置后，webpack 构建后会将时间戳注入到生成的 index.html 文件中，例如：
<link href="main.9317d03a.css?cb=1641030623596" rel="stylesheet"> <script src="main.56af7fa8.js?cb=1641030623596"></script>
这样，浏览器访问时就会将最新的资源下载下来。
注意事项
- 在使用 break-cache 时，需要注意时间戳的周期，不要过于频繁地进行更新，否则会增加服务器和用户的负担。通常情况下，可以根据实际情况确定时间戳的周期。
- break-cache 主要是用来解决浏览器缓存和 CDN 缓存中的问题，而不是用来应对服务器端的缓存问题。在遇到服务器端的缓存问题时，需要采用其他方法来解决。
结论
通过 break-cache，我们可以轻松地打破浏览器缓存和 CDN 缓存，让用户及时看到最新的代码效果。同时，通过 webpack-plugin-break-cache，我们还可以在 webpack 项目中使用 break-cache，实现自动添加时间戳的功能。希望本文可以对大家学习前端开发，解决缓存问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c86ccdc64669dde4f9b