zoukankan      html  css  js  c++  java
  • 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
    

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

    3.html页面缓存的原因

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

    参考文章
    Service Worker API 服务工作线程概念和用法

    Service Worker简介

  • 相关阅读:
    20165212第八周学习总结
    20165212第八周课上测试补做
    20165212实验二面向对象程序设计
    Titanic生存预测
    聚类算法数据生成器make_blobs
    k-means
    监督学习、无监督学习与半监督学习
    在线Latex公式编辑器
    西瓜书课后习题——第四章
    ML经典数据集
  • 原文地址:https://www.cnblogs.com/zfygiser/p/10489289.html
Copyright © 2011-2022 走看看