随着前端开发的发展，Web 应用越来越复杂，文件体积也越来越大，前端代码的优化变得越来越重要。其中一个重要的方面是长缓存（Long-term Caching），即在用户再次访问网站时，能够更有效地使用缓存，以减少加载时间和带宽使用，提高用户体验。
Webpack 是一个流行的前端构建工具，它也提供了处理长缓存的功能。然而，使用 Webpack 处理长缓存也会遇到一些坑，本文将介绍一些问题和解决方法。
什么是长缓存？
长缓存指的是在用户再次访问网站时，服务端和浏览器能够识别和使用客户端已经缓存的资源而不是重新下载。这可以大大减少不必要的带宽使用和加载时间，提高用户体验。
为了实现长缓存，通常的做法是使用文件名中包含哈希值的方法，让每个版本的文件名不同。例如，app.1923y4hd.js 表示文件名为 app.js，哈希值为 1923y4hd。在每次构建时，Webpack 将会为每个文件生成一个新的哈希值，然后改变对应的文件名，并更新引用该文件的代码的引用路径。
Webpack 长缓存的基本配置
Webpack 有一些内置的功能来处理长缓存问题。具体来说，我们可以使用 output.filename 和 output.chunkFilename 选项来为生成的文件名添加哈希值。例如：
// webpack.config.js
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js',
},
};这会使得生成输出的文件名包含哈希值，从而实现长缓存。在每次构建时，Webpack 将为每个文件生成一个新的哈希值，然后将其添加到文件名中并更新引用该文件的代码的引用路径。
Webpack 长缓存的问题和解决方法
Webpack 的长缓存功能虽然强大，但仍然存在一些问题。下面我们就来看看一些常见的问题以及解决方法。
问题一：第三方库的长缓存
我们通常会将第三方库打包到与应用代码分开的文件中，以便更好地利用浏览器的缓存机制。然而，如果这些库发生了变化，而我们的应用代码没有变化，应用代码和库代码就会处于不同的版本，从而导致浏览器重新下载和解析这些库。这将浪费带宽和时间，降低用户体验。
解决方法是将第三方库的哈希值与应用代码的哈希值分开，以便在任何一方发生变化时都能够保持一致。这可以通过设置 Webpack 配置常量来实现：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
----- ----------------------- --------
--------- --------------------------
-------------- --------------------------
--
------------- -
---------- ---------
------------ -
------------ -
------- -
----- -------------------------
----- ----------
------- ------
--
--
--
--
--这里我们为第三方库文件的生成一组独立的且不受应用代码影响的哈希值，这样在第三方库更新时，我们只需要改变该哈希值即可，而不会影响应用代码的哈希值。这里使用的是 Webpack 内置的 moduleIds: 'hashed' 配置项，它将根据模块的相对路径生成一个哈希值。
问题二：文件名修改导致服务端缓存失效
在应用程序更新时，我们会为所有的静态资源（例如代码、样式和图片等等）生成新的哈希值以实现长缓存。然而，在服务端缓存文件的情况下，客户端下载的文件实际上可能并非最新的版本。
为了解决这个问题，可以使用插件 webpack-manifest-plugin 来生成一个映射文件，该文件将文件名与哈希值进行映射。该插件将该文件存储在我们定义的位置中（在下面的示例中是 dist 目录中的 manifest.json 文件），并将其作为 Webpack 打包输出的一部分。
-- -------------------- ---- -------
-- -----------------
----- - --------------------- - - -----------------------------------
-------------- - -
------- -
----- ----------------------- --------
--------- --------------------------
-------------- --------------------------
--
-------- -
--- -----------------------
--------- ----------------
----------- ---
---
--
--假设我们有一个 index.js 文件，其生成的哈希值为 47ac9f3e, 打包生成的文件名为 index.47ac9f3e.js。在生成的 manifest.json 文件中，我们将看到以下条目：
{
"index.js": "index.47ac9f3e.js"
}因此，服务端可以使用这个映射文件来查找正确的文件名。
问题三：取消模块代码压缩会导致哈希值不一致
在 Webpack 中默认情况下会对代码进行压缩，从而减小文件大小。然而，在开发模式下，这可能会使得调试更加困难，同时在某些情况下也可能导致代码无法运行。
取消模块代码的压缩可能会导致生成的哈希值与之前的不一致，从而使得长缓存无法起作用。因此，我们需要按模式分别配置 Webpack，以便在生产模式下进行压缩，并在开发模式下禁用该功能。
-- -------------------- ---- -------
-- -----------------
----- ------ - -------------------- --- -------------
-------------- - -
----- ------ - ------------ - --------------
-- ----- -------
------------- -
--------- -------
--
--在这里，我们使用 NODE_ENV 环境变量判断当前是生产模式还是开发模式，以决定是否启用代码压缩。
结论
长缓存是优化 Web 应用程序的关键方面之一。Webpack 提供了内置的功能来处理长缓存，但也有一些问题需要特别注意。本文中，我们介绍了一些常见的问题以及解决方法，希望能够帮助您更好地掌握 Webpack 的长缓存功能，从而优化 Web 应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671a08ae9babaf620fa097bf