浏览器——HTTP缓存机制与webpack打包优化

本文介绍: 强缓存，直接使用缓存文件，不请求服务器。

在前端开发中，经常接触到JavaScript脚本文件、CSS、HTML文件，每一次开发后，我们需要重新编译，会导致文件名发生变化。这样使得浏览网页时候，需要重新加载资源

如果能合理利用浏览器的缓存，可以提高响应速度。

浏览器缓存涉及到客户端和服务器之间的交互，当浏览器请求一个资源的时候，他首先检查该资源是否已经存在于HTTP缓存中，如果存在，并且满足不过期条件，浏览器则会使用缓存的资源，而不会从服务器重新请求。这个就是缓存的作用。

在实际的项目开发中，浏览器为我们提供下面的三种缓存机制：强缓存、协商缓存和不使用缓存，下面针对以上三个类型进行说明。

强缓存，直接使用缓存文件，不请求服务器。

HTTP/1.1 200 OK
Date: Wed, 21 Oct 2025 07:28:00 GMT
Cache-Control: max-age=3600
Content-Type: text/html; charset=utf-8
Content-Length: 131

如果需要关闭强缓存，可以使用Cache-Control: no-cache，这将迫使浏览器每次都向服务器发送请求，通过协商机制来决定是否命中缓存。

当设置成为no-store时，则完全禁止使用任何缓存，不存在协商，直接拉取服务器资源，重新加载。

浏览器协商缓存，也称为弱缓存，是一种利用HTTP响应头中的Last-Modified 和Etag字段来验证资源是否修改的机制，来决定是否使用本地缓存。在使用协商缓时候，一定要设置cache-control：no-cache ，这样才能发起请求，向服务器确认资源是否被修改。

1.当我们第一次请求的时候，浏览器会在头添加Last-Modified 字段，这个值表示资源最后修改的时间。

2.在这个资源后续的请求中，浏览器都会在请求头中，添加 If-Modified-Since 字段，这个值就是上一次服务器在响应头添加的Last-Modified 的值。

3.服务器接受到这个请求后，会根据 If-Modified-since 的值与服务器上的资源做对比，如果值不一致，服务器资源发送变化，则服务器返回最新的资源和新的 last-Modified 字段。

4.如果对比发现，服务器上资源的最后修改时间和请求的 If-Modified-since一致，则返回304 Not Modified 状态码，告诉浏览器可以使用本地缓存。

通过 ETag 方式来实现的话，原理和流程和上诉的一致，不同的是ETag 值表示文件唯一标识,这个值随着随着文件内容改动而发生变化，而如果文件内容没有改变，则ETag 值不会发生变化。

我们日常的开发中，利用webpack 进行资源打包，默认情况下，生成的文件名称，带有hash 值。如下图中，用红线标出的地方，都是hash值。

这个hash 值是全局的，不局限于当前文件，也就是说，只要当前项目有任何一个模块或文件的内容发生改动的时候，项目的hash值都会发生变化。

如此一来，文件名称改动了，我们打包部署到服务后，客户端需要重新获取资源，而无法使用缓存来加快响应速度。

在Webpack中，输出文件名的哈希值默认是[hash]，这意味着每次构建时， 只要项目中有任何文件发生变化，生成的文件哈希值就会改变。这种哈希值与整个项目有关，因此它是全局的，不特定于某个文件或模块。

在webpack 项目中，可以修改 webpack.config.js 文件如下：

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js'
  },
};

在我们日常开发中，常常引入第三方库，如vue.js ，elementUi等。这些第三方库，在我们项目搭建初期，版本已经固定了，后面不需要改动，如果修改升级，则另外讨论。

如果我们可以将这些第三方库，和自己手写的源码分割处理，将第三方库独立出来，即使我们自己写的代码改动，不会影响第三方库文件模块，从而实现缓存命中。

幸运的是，webpack 默认带有代码分割的功能，它基于以下的规则

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

webpack 打包缓存

文章目录

概要

强缓存

定义

开启

关闭强缓存

协商缓存

工作机制

通过Last-Modified + If-Modified-Since

通过ETag + If-None-Match

不使用缓存

前端利用缓存机制，修改打包方案

webpack 打包

webpack 打包名称优化

webpack 默认的hash 值

webapck其他hash 类型

配置webpack打包

webpack 代码分割优化

小结

发表回复取消回复