前言

大家好，我是东东吖，一名前端工程师。今天我要分享的是如何解决打包部署之后，应用却没及时更新的缓存问题？在日常工作中，测试经常对开发说的一句话就是：“你有没有打包发版本？为啥还是上一次的版本？”而开发对测试经常说的一句话就是“你刷新一下！！！”

为什么要刷新一下？应用部署后，为了防止客户端反复请求资源，服务器都会设置缓存，来减少带宽流量压力。但是设置缓存之后就会导致我们刚刚谈到的问题，当我们进行打包部署之后，应用却没有及时更新，那怎么办呢？我们的需求是：每次打包，如果代码没有发生变更，就使用缓存。如果发生了变更，就不使用缓存。那我们该怎么做呢？

如何解决缓存问题？

我们如何解决以上的需求呢？其实我们可以在打包后的文件名去做手脚，每次打包生成和上一次不同的文件名，全新的文件名就代表全新的请求，自然不会有缓存问题，因为在此之前，你还从来没有请过该资源，自然就不会有缓存问题呢?

webpack输出文件名hash

为了解决缓存问题，在生产环境下，我们可以对文件名中添加hash值，当文件发生改变，文件名称也会跟着改变。webpack支持三种hash,效果有所不同。

• 项目级别hash

    filename: "[name].[hash]_bundle.js", //打包后文件名

直接使用方括号hash值，是属于项目界别的hash，我们可以看见hash都是一样的，当项目的任何一个地方发生改变，hash值就会发生变化。

• chunk级别chunkhash

chunkhash是当同一个chunk发生改变，hash值才会发生变化。

   filename: "[name].[chunkhash]_bundle.js", //打包后文件名

• 文件级别contenthash

contenthash同一个文件的内容发生改变，hash值才会发生变化。

  filename: "[name].[contenthash]_bundle.js", //打包后文件名

如果你觉得20位的hash太长，还可以指定他的长度，在hash值后面加上:8就可以指定hash值的长度为8。

 filename: "[name].[contenthash:8]_bundle.js", //打包后文件名
 

nginx配置

在实际项目中，打包后的文件名已经有了hash值，但是还是有缓存问题，这是因为是打包好的index.htm文件在服务器端可能存在缓存问题，所以进行nginx 配置，让index.html不缓存。

location = /index.html {
       add_header Cache-Control "no-cache"; 
}

no-cache 和 no-store 用作控制缓存，被服务器通过响应头 Cache-Control 传递给客户端

• no-cache

可以在客户端存储资源，每次都必须去服务端做新鲜度校验，来决定从服务端获取新的资源（200）还是使用客户端缓存（304）。也就是所谓的协商缓存。

• no-store

永远都不要在客户端存储资源，永远都去原始服务器去获取资源。

结束