2020-12-02Webpack 与浏览器缓存( Caching )（4.10.2）

实际上，当我们打包之后，生成的dist目录下的这几个文件，
应该是交给后端放到服务器上，服务器上就可以运行这些文件。
假设，我们已经把代码放到了服务器上运行了

image

假如我们我们现在的代码跑在服务器上，
那么它的请求过程，它的整个加载过程是这样的:

• 首先访问页面(index.html),然后页面会去请求两个JS文件，
• 当用户第一次访问的时候，这两个JS文件是肯定会被请求的。
• 但是当用户第二次刷新页面的时候，这两个文件实际上已经被保存在了浏览器里面，
  所以第二次访问页面的时候浏览器会直接去拿缓存了。

问题来了，当用户第一次访问过之后，
还没有进行第二个访问的时候，
我们修改了源代码，并打包后新生成的文件，上传到了服务器，
这样当用户刷新的时候，他看到的是原来的老的内容呢？ 还是我们修改过的新的内容呢？

• 实际上，如果用户是普通刷新(而不是强制刷新),
  他拿到的还是我们之前展示的老的内容。

• 因为，就算是我们修改了内容，
  但是我们打包生成的新的文件，还是原来的文件名。
  还是下边这几个名字

• 那么用户再请求页面的时候，浏览器发现这两个文件，本地已经有缓存了，
  就直接从缓存拿就行了，就不会用新上传到服务器的文件了。
  这就是产生问题。

image

为了解决用户浏览器上，缓存文件的问题，
我们可以引入一个概念叫做content hash

• 我们对代码做个变更，
  我们把webpack.common.js里的output部分配置拿出来放到webpack.dev.js里

  

  image
  

  image

• 因为开发环境下，我们不用去关注用户缓存的问题，
  每次我都单独打包然后刷新或者热模块更新，都会帮我们解决这个更新的问题。
  毕竟是开发环境。

• 上线的时候的配置也要改下，这里的contenthash也是和name一样的占位符

  

  image

• 如果我们的源代码没有改变，
  那么打包生成的contenthash永远都不会变。
  因为它是根据content产生的一个hash字符串。content不变hash字符串就不变。

• 我们来验证一下，先看下我们此时index.js里的代码

  

  image

• 然后我们运行打包

  

  image

• 然后我们修改下index.js的值

  

  image

• 然后再打包

  

  image

• 我们就会发现，我们的逻辑代码打包生成的文件的文件名里的hash值变了。
  而我们引入的lodash和jquery库因为没有变化，生成的文件的文件名里的hash值也就没有变化。

所以，如果我们对源代码做了变更，并且上传到服务器，
当用户再访问的时候，因为页面要请求的JS文件的文件名跟原来的不一样，浏览器就不会去拿缓存了,
就需要重新请求我们上传的新的JS文件了。
而vendos这个文件因为文件名没有变更，浏览器就会直接去缓存里拿

此时重新打包代码，把代码上线，
就会把dist目录扔到线上去，
用户再去访问线上的页面的时候，
流程：
会打开线上的index.html,
去加载vendors.xxxxx.js和main.xxxxx.js,
vendors.xxxxx.js和之前请求的vendors.xxxxx.js名字一模一样，就可以用本的缓存，
而mian.哈希值.js对应的哈希值变了，
所以它必须的到我们的服务器上重新的加载新的main.哈希值.js,


通过contenthash这种方式，
我们可以做到 当我们重新打包代码上线的时候，  
用户只需要更新我们有变化的代码，而没有变化的代码 用户可以直接用它本地的缓存
就是webpack去解决浏览器caching的方法

有的时候，如果我们是用的老一点的webpack4版本的时候会发现，

即便我们没有去改变源代码，但是两次打包的时候，有可能contenthash也是不同的，

这个时候需要我们额外的去做一个配置

image

• 当然了新版本webpack这样配置也是没有问题的。

• 运行打包的时候，会多出一个runtime文件

  

  image

实际上，当我们在做`webpack`打包的时候，
main.js放置的是我们的业务逻辑，
vendors.js放置的是我们的库，
但是我们的业务逻辑和我们的库之间，也是有关联的，
这个关联逻辑处理内置的代码叫做`manifest`,
默认manifest是既存在于main.js里，也存在于vendors.js里边的，


manifest每次打包的时候，
在旧版的`webpack`中可能会有差异，
正是因为它的差异导致了每次打包的时候，
虽然我们没有改变源代码，但是main和vendors里的代码也都跟着改变了，
这就是为什么老版本的webpack，
即便我们没有去改变源代码，
两次打包的`contenthash`也发生变化了。

当我们配置了`runtimeChunk`,就把`manifest`这一块关系相关的代码抽离出来，
单独放到了`runtime`这样一个文件里面去，
这样的话，`main.js`里就放业务逻辑，`vendors.js`里就放我们的库，
而他们之间的关系代码都放到`runtime`文件里去，
这样，在老版本里，无论我们怎么打包，
main对应的contenthash和vendors对应的contenthash都不会发生变化了。
因为他们两个里边不会有manifest的代码了。

链接：https://www.jianshu.com/p/b88e007d2de8