在前端开发中，为了提高网站性能和用户体验，我们通常会使用缓存技术。而 cache-manifest-webpack-plugin 这个 npm 包就为我们提供了一种简单、可靠的缓存方案。
什么是 cache-manifest-webpack-plugin
cache-manifest-webpack-plugin 是一个 webpack 插件，可以在打包时生成 cache.manifest 文件。cache.manifest 文件是一种文本文件，其中包含需要缓存的资源列表。
这个插件可以自动从 webpack 打包结果中提取资源，然后生成 cache.manifest 文件，并将其添加到 HTML 文件头部。这样，在第二次访问页面时，浏览器就可以从缓存中直接读取资源，而无需再次从服务器下载。
如何使用 cache-manifest-webpack-plugin
首先，需要在项目的根目录下安装 cache-manifest-webpack-plugin：
npm install --save-dev cache-manifest-webpack-plugin
然后，在 webpack 的配置文件中，引入 cache-manifest-webpack-plugin 并进行配置：
-- -------------------- ---- -------
----- -------------------------- - -----------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------------
--------- -----------------
-------- ------
--------- ------------------
-------- -----------------------------
-------- ---
----------------- ----------------
--
-
--接下来，我们可以在 HTML 中引入该文件：
-- -------------------- ---- -------
--------- -----
----- --------------------------
------
--------- -----------
---- --- ---
-------
------
---- --- ---
-------
-------这样，当浏览器再次访问该页面时，就会从缓存中读取资源。如果该资源还没有被缓存，则浏览器会从服务器下载最新版本的该资源，并将其缓存到本地。
cache-manifest-webpack-plugin 配置项详解
cache-manifest-webpack-plugin 支持以下配置项：
filename：cache.manifest 文件的文件名，默认为 "cache.manifest"。network：指定哪些 URL 要立即从网络获取。默认为["*"]，即所有 URL 都需要从网络获取。fallback：提供一个替代内容的 URL。当指定的 URL 不可用时，浏览器就会使用该 URL 中的内容。默认为[]，即没有提供替代内容。exclude：一个正则表达式或正则表达式数组，用于排除某些资源不被缓存。默认为[]。include：一个正则表达式或正则表达式数组，用于指定哪些资源需要被缓存。默认为[]，即所有资源都需要被缓存。manifestVariable：指定生成的 cache.manifest 文件中的变量名，默认为 "CACHE_MANIFEST"。
cache-manifest-webpack-plugin 示例代码
以下是一个简单的 webpack 配置文件，演示如何使用 cache-manifest-webpack-plugin：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------------- - -----------------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- ------------------
---
--- ----------------------------
--------- -----------------
-------- ------
--------- ------------------
-------- -----------------------------
-------- ---
----------------- ----------------
--
-
--在 index.html 中，将 manifest 属性设置为 "cache.manifest"：
-- -------------------- ---- -------
--------- -----
----- --------------------------
------
--------- -----------
---- --- ---
-------
------
---------- -----------
------- -------------------------
-------
-------现在，运行 webpack 构建你的应用程序，然后在浏览器中打开 index.html 文件。第一次访问页面时，浏览器会从服务器下载所有资源并缓存它们。然后，将网络断开并重新加载页面。此时，浏览器会直接从缓存中加载资源，并显示 "Hello, World!" 消息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c91ccdc64669dde5969