react打包之后更新到服务器有缓存问题

这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战”

最近项目中遇到了一个问题,项目部署到生产环境后不强制刷新,就还是原来的界面,经过排查后发现是缓存的问题

解决方案是在打包的时候增加一个随机数,通过判断数值是否一致来让页面刷新

1. 在根目录index.js中添加以下代码

// 获取版本更新的jsonp回调函数
window.getVersion = version => {
    if((localStorage.random && version !== localStorage.random) || (window.random && version !== window.random)) {
        window.location.reload(); //刷新页面
    }
    localStorage.random = version; // 保存 以便下次使用判断
    window.random = version
}
复制代码

原理就是在访问的时候，我们去检查本地存储里面有没有我存储版本号，如果没有存储那存储到本地并且将版本号带到URL中强制刷新一次。如果本地存储中包含版本号，就去判断版本号和我的更新文件中的版本号是否一致，如果一致则不做处理，不一致则强制刷新。

2. 在静态资源文件夹下添加verson.js

getVersion('1629688444417')
复制代码

并在index.html中添加引用

<script src="%PUBLIC_URL%/version.js"></script>
复制代码

目的是调用获取版本更新的jsonp回调函数

3. 在打包的时候生成新的version.js

在’confige/webpack.config.prod.js’中添加以下代码

// 定义随机的version
const Version = new Date().getTime();
var content = "getVersion('" + Version + "')"

console.log('开始创建版本文件...')
fs.writeFile("public/version.js", content, function(err) {
  if(err) {
    return console.log(err);
  }
  console.log("The file was saved!");
})
复制代码

fs.writeFile(‘文件路径’，’要写入的内容’，[‘编码’]，’回调函数’);
写入的时候如果没有这个文件，会自动创建这个文件 如果被写入的文件已存在内容，那么写入的话，会覆盖之前的内容

如果没有config文件夹,可以通过以下代码

1. npm run eject
2. yarn eject
复制代码

这样就会出来config文件夹了