React 项目生产版本迭代页面不刷新问题

React 页面缓存

react 打包项目进行服务端部署后，会发现index.html被浏览器缓存，访问项目url指向的还是上个版本的内容。原理是index.html被缓存后，路由指向和跳转都是旧版的js和css文件，所以会出现react项目更新后，刷新浏览器显示旧版本内容的现象。可以通过强制清除缓存看到新版本页面，但是在发布版本的时候不能要求每个用户去操作清除浏览器的缓存，所以需要在程序中找到解决办法。

1.html 在head标签头添加cache和cache-control

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">

上述方法在项目部署后并没有起到作用。

2.html 在head标签头添加cache和cache-control

create-react-app 脚手架在创建项目后，运行打包命令

npm run build / yarn build

这个文件是项目针对于浏览器中需要缓存的文件目录，可以在最下面找到index.html文件的缓存，把他注释掉后面版本迭代再也没有出现过浏览器总是出现旧版本的情况，也不需要强制清除浏览器缓存。

3.html页面缓存的原因

很多同学都会发现项目新建完成后会在src文件下生成一下个registerServicesWorker.js文件，它的作用简单说来就是将项目中不需要动态生成的文件，以缓存的形式存储在浏览器的Cache Storage中，包括index.html，所以这个就是生成缓存的来源，具体的作用大家可以去官网上查看相应解释。

参考文章

Service Worker API 服务工作线程概念和用法

Service Worker简介