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簡介


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM