webpack性能優化-PWA(離線訪問技術)


 

PWA:漸進式網絡開發應用程序(離線可訪問),需要通過serviceWorker 實現,

首先,webpack 配置使用  workbox-webpack-plugin 這個插件,生成一個 serviceWorker 配置文件

引入插件:

在plugins插件入口處引入插件

 接着,在入口文件 index.js 中注冊 serviceWorker

 然后在修改package.json中 eslintConfig 配置

因為 eslint不認識 window、navigator 等全局變量

 使用webpack打包

 然后運行代碼:

 serviceWorke 必須運行在服務器上,所以需要啟動服務器,

  1. 可以通過 node.js,運行

  2.全局安裝 npm i serve -g

     然后啟動服務器,將 build 目錄下的所有資源作為靜態資源暴露出去

    啟動: serve -s buid

 打開:http://localhost:5000/    serviceWorker 注冊成功:

 將瀏覽器置於 offine ,資源同樣可以加載出來,

 

 


免責聲明!

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



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