背景
在开发 Vue 单页应用 (SPA) 时，我们经常使用 webpack 打包静态资源，如样式表、JS 文件和图片等。这些资源需要被客户端缓存以提高页面加载速度。但是，因为 webpack 给静态资源文件加的哈希值是基于文件内容的，所以在每次打包时，即使文件内容未改变，哈希值也会发生变化，导致缓存失效。
分析
Vue 应用中的静态资源文件通常被打包成一堆带哈希值的文件名。例如，我们使用 webpack 打包 JS 文件时，输出的文件名通常是 app.bf38b7f053.js。这样做的目的是为了让客户端缓存这些文件，不再重复请求。
然而，如前所述，每次打包时，哈希值都会变化，即使文件内容未改变。这会导致客户端缓存的文件已经失效了。这对于用户体验和网站性能都是不利的。
解决方案
思路
解决这个问题的一种方法是让哈希值与文件内容无关。我们可以使用文件的最后修改时间来计算哈希值，这样只要文件内容不改变，哈希值就不会变化。因此，我们可以根据文件最后修改时间来生成唯一的文件名，而不是每次使用新的哈希值。
具体实现
我们可以使用 webpack 插件 [file.cksum-webpack-plugin][1] 来实现这一目的。
首先，安装插件：npm install file.cksum-webpack-plugin --save-dev。
然后，在 webpack 配置中引入插件：
const FileCksumPlugin = require('file.cksum-webpack-plugin');插件配置如下：
-- -------------------- ---- -------
-------- -
--- -----------------
-- -----------
------ -
---------------
----------------
----------------
----------------
-----------------
----------------
----------------
-----------------
----------------
---------------
--
-- -----
--------------- -----------------------
-- ------------- ---- ------
---------- --- - ----
--
-FileCksumPlugin 的配置参数如下：
files：要计算哈希值的文件路径。fileNameFormat：生成的文件名格式。默认为[name].[cksum].[ext]，其中[name]代表文件名，[cksum]代表哈希值，[ext]代表文件扩展名。skipBytes：计算哈希值时要跳过的字节数。默认为 512KB。
使用插件后，打包后的文件名将长成这个样子：app.4c3a2454.js。其中，4c3a2454 是根据文件内容计算出的校验和。
代码示例
下面是一个完整的 webpack 配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- --------------- - -------------------------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- --------
--------- -------------------
--
-------- -
--- -------------------
--------- --------------------
-------- --------------------
---
--- -----------------
-- -----------
------ -
---------------
----------------
----------------
----------------
-----------------
----------------
----------------
-----------------
----------------
---------------
--
-- -----
--------------- -----------------------
-- ------------- ---- ------
---------- --- - ----
--
--
------- -
------ -
-
----- --------
------- ---------------
-------- --------------
--
-
----- ---------
------- ------------
--
-
----- ---------
---- ---------------- -------------
--
-
----- ------------------------------------------
------- -------------
-------- -
------ ----
-
-
-
--
-------- -
------ -
----- ---------------------
--
----------- ----- ------ ------- --------
--
---------- -
----- -----
------------------- -----
------- -----
-------- -----
----- ----
--
-------- ------------------
--结论
在 Vue SPA 应用中，静态资源文件的缓存是重要的性能优化手段。通过使用 file.cksum-webpack-plugin 插件，我们可以解决哈希值的问题，让客户端缓存更加有效。这能够提高用户体验和站点性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672f1ddceedcc8a97c8caf3e