2020-12-02Webpack 与浏览器缓存( Cachin
实际上，当我们打包之后，生成的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的代码了。
