Webpack5文件资源缓存

要说文件资源缓存那就得先了解一下浏览器的缓存机制

浏览器大概可以分为强制缓存（强缓存）和协商缓存

浏览器每次与服务器通信的方式为应答模式，即：浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程图如下：

由上图我们可以知道：

• 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识

• 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

这里我们来着重说一下强制缓存

强制缓存

强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程，强制缓存的情况主要有三种(暂不分析协商缓存过程)，如下：

不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致），如下图：

存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存(暂不分析)，如下图

 

存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果，如下图 

那么强制缓存的缓存规则是什么？

当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。

在我们的HTTP/1.1中Expire已经被Cache-Control替代，所以这里我就只说明Cache-Control。

Cache-Control

在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：

• public：所有内容都将被缓存（客户端和代理服务器都可缓存）

• private：所有内容只有客户端可以缓存，Cache-Control的默认取值

• no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定

• no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存

• max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

接下来我们看一个例子：

如上图，这里的 Cache-Control设立了public和max-age说明该请求的所有内容在规定的时间内会被强制缓存，即就是如果该请求文件名称不发生变化的化会一直读取缓存文件。

第一次请求：

 当刷新页面再次请求：

---

接下来说说文件资源缓存在打包过程中的处理方式

为了让代码上线运行缓存更好使用，我们在webpack打包过程中，如果修改了相应的css或者js文件的话，因为浏览器的强缓存机制，在打包后我们的页面是不会发生变动的，所以在我们的webpack中需要对打包后的文件名进行相应的处理，去告诉浏览器这是个新的文件（发生变动的文件）需要重新请求资源。

在webpack中输出文件通常有三种命名方式：

 hash：每次webpack打包会生成一个唯一的hash值

       问题：因为js和css同时使用一个hash值 如果重新打包会导致所有缓存失效（可能我只改动一个文件）

chunkhash：根据chunk生成hash值。如果打包来源同一个chunk,那么hash值一样

       问题：js和css的hash值还是一样，因为css是在js中被引入的，所以同属于一个chunk

contenthash：根据文件的内容生成hash值。不同文件的hash值一定不一样

上述方法可以看出使用contenthash的方式输出文件是最好的方法。

---

接下来说说babel的缓存原理

我们在webpack中使用babel-loader是去为了兼容我们的js代码，将更高级的语法转译成浏览器所能识别语法。

为了确保这个过程更加快速准确，我们可以看一下官方文档是怎么做的

下面是我的做法

这里开启了cacheDirectory缓存，可以让我们的转译结果进行一个本地缓存，在我们之后的打包过程中如果js没有进行修改的话可以直接从缓存中读取文件进行输出，我来解释一下cacheDirectory缓存的原理

cacheDirectory原理

当有设置cacheDirectory时，指定的目录将用来缓存loader的执行结果。之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的Babel重新编译过程。如果设置了一个空值 (loader: 'babel-loader?cacheDirectory') 或者 true (loader: babel-loader?cacheDirectory=true)，loader 将使用默认的缓存目录 node_modules/.cache/babel-loader，如果在任何根目录下都没有找到 node_modules 目录，将会降级回退到操作系统默认的临时文件目录。

原文