前言

在 Webpack 配置时，可以使用强制缓存和协商缓存来缓存不同的资源，以达到优化网站性能的目的。

Webpack 通过对文件名加上 hash 值的方式来实现对强制缓存的控制。这样，当文件内容发生变化时，文件名的 hash 值也会随之发生变化，使浏览器不再使用旧版本的缓存，从而达到强制刷新的效果。

但是，强制刷新缓存并不是最优秀的解决方案。因为即使文件内容没有发生变化，仍然需要重新加载资源，消耗了用户的流量和时间。这时候，就可以使用协商缓存来有效地利用浏览器缓存。

一、webpack配置时，哪些资源适合用强缓存，哪些资源适合用协商缓存？

通常情况下，我们可将以下资源归为强制缓存：

第三方库和基础模块：第三方库通常不会频繁更改，比如 bootstrap、jquery 等，这些库可以缓存一段较长时间，以减少不必要的网络请求。

图片、字体等静态资源：这些资源通常改动频率较低，而且不同于 HTML、CSS、JS 等文件资源的改变直接影响可视化的内容，因此可以长时间缓存，以便于用户浏览。

而以下资源通常适合使用协商缓存：

HTML、CSS、JS 等文本文件：这些文件通常会被频繁修改，而且改动可能比较小，如仅改变了一行代码、少量样式或者变量等，因此使用协商缓存可以实现更精细的缓存控制，避免不必要的网络请求。

动态生成的内容或接口请求结果：这些资源通常是动态生成的，是依赖于用户请求才能得到的，因此无法使用强制缓存，通常要借助协商缓存来实现缓存控制。

二、webpack怎么实现强制缓存

1.Webpack 可以通过在浏览器中设置 HTTP 头来实现强制缓存。在 Webpack 配置文件中，我们可以使用 `output.headers` 属性来设置 HTTP 响应头，具体如下：

output: {
  // 输出文件存放的目录
  path: path.resolve(__dirname, 'dist'),
  // 输出文件名格式
  filename: '[name].[contenthash].js',
  // 输出模块的文件名格式
  chunkFilename: '[name].[contenthash].js',
  // 设置 HTTP 浏览器缓存有效期，单位是秒
  // 以下是一年的秒数
  // 60 * 60 * 24 * 365 = 31536000
  // 这里将强制缓存设置为一年
  headers: {
    'Cache-Control': 'max-age=31536000'
  }
}

在上面的配置中，我们将 output.headers 属性设置为一个对象，其中 Cache-Control 属性被设置为 max-age=31536000，表示浏览器应该将这个资源缓存一年。这样，在用户第一次访问网站时，Webpack 会将这个 HTTP 响应头添加到浏览器的缓存中，以便在将来用户再次访问时使用。这就是强制缓存的基本原理。

需要注意的是，在强制缓存的时间范围内，浏览器不会向服务器发送任何请求，而是直接从缓存中获取资源。因此，在开发和测试阶段中，为了验证最新更改的效果，我们应该把缓存时间设置为很短的时间，或者设置一个容易更改的版本号或哈希值。

三、webpack怎么实现协商缓存

协商缓存指的是由浏览器与服务器协商决定是否使用缓存的一种机制。它的原理是，当浏览器请求资源时，服务器会在返回的响应头中加入一些关于这个资源的元信息，比如 Etag 和 Last-Modified 等。当再次请求资源时，浏览器会将这些元信息带在请求头中发送到服务器，由服务器根据元信息判断是否需要使用缓存。

Webpack 通常会使用 webpack-md5-hash 或 chunkhash 等插件为静态资源生成固定的 hash 值，从而在资源被修改时改变资源的名称和 URL，达到强制缓存的目的。对于需要使用协商缓存的资源，我们可以在配置文件中开启 output.hashedModuleIds 和 optimization.moduleIds 选项，来确保每个模块都有一个稳定的标识符。

1.在配置文件中，我们还可以设置响应头的一些选项来配合协商缓存，例如在 `output.headers` 属性中设置：

headers: {
  'Cache-Control': 'no-cache',
  ETag: true,
  Last-Modified: true
}

这样，在响应头中就会添加相应的元信息，从而使得浏览器可以利用协商缓存减少不必要的网络请求。当然，这需要服务端进行相应的配置，才能有效开启协商缓存的机制。

总结

强制缓存适合静态文件或者很少改变的文件资源，而协商缓存适合经常改动但改动细节很小的文本文件资源。

综上所述，通过在 Webpack 中设置 HTTP 头，我们可以轻松实现强制缓存的效果。但是需要注意的是，强制缓存虽然可以有效的减少服务器的请求压力，但是一旦文件内容发生改变，浏览器中仍然会存留缓存，需要清理缓存才能够重新请求新的文件。因此在实际应用中，我们需要考虑到缓存的问题，选择合适的缓存策略，从而达到更好的性能优化效果。

一文看懂webpack对于强制缓存、协商缓存的配置

前言

一、webpack配置时，哪些资源适合用强缓存，哪些资源适合用协商缓存？

二、webpack怎么实现强制缓存

1.Webpack 可以通过在浏览器中设置 HTTP 头来实现强制缓存。在 Webpack 配置文件中，我们可以使用 `output.headers` 属性来设置 HTTP 响应头，具体如下：

三、webpack怎么实现协商缓存

1.在配置文件中，我们还可以设置响应头的一些选项来配合协商缓存，例如在 `output.headers` 属性中设置：

总结

猜你喜欢