ionic3 懶加載在微信上緩存的問題

1.懶加載是什麼？

    在ionic2中全部的組件、模塊、服務、管道等都堆積在app.module.ts模塊中，在頁面初始化的時候會一次性加載全部的資源，致使資源過大，頁面渲染緩慢，也致使app.module.ts混亂，不美觀，不易維護，不適用於結構繁多、業務複雜的項目。

   懶加載的出現，使得在跳轉到對應頁面的時候加載對應頁面的js、css、html,這樣每一個頁面都是一個模塊，只有在須要的時候纔會加載，大大緩解了首屏的壓力。

2.懶加載的使用：

　　https://ionicframework.com/docs/api/navigation/IonicPage/

3.實戰項目的結構：

　　

 

　　app.module.ts中並無導入任何頁面模塊或申明頁面組件。每一個頁面都應用了一個懶加載模塊。直接經過push導入模塊就能夠了。

　4.打包後的結構：

　　

　　　build文件下的js文件是每一個頁面懶加載編譯後的js，跳轉到對應頁面纔會引用對應的js文件，能夠在控制檯中network中觀察。

5.問題來了！

　　index.html

　　

　　index.html文件中引用的js加版本號可有效清除對應js 的緩存。

　　但由於build下的一堆數字js是系統編譯後自動生成的，無法加版本號，致使被瀏覽器或服務器緩存。

　　出現一個狀況:man.js、vendor.js、polyfills.js是請求最新的,build下的js從緩存中讀取,因此項目在跳轉對應頁面，加載引用的js時，會找不到。

6.花式嘗試方法

　　服務器不作緩存，無效。

　　找出頁面模塊編譯後引用js的地方，解決了頁面應用js的問題,但致使polyfills.js報錯，混淆的代碼，已經沒有了可讀性。

　　使用meta不作瀏覽器緩存，無效

　

7.解決辦法，去掉懶加載，使用首屏所有加載，混淆代碼，極致壓縮。

　　網上不多有對應的資源，由於ionic3基本上用來作app開發，資料不多。由於已經上了正式服，無奈要趕忙解決，所有去掉了懶加載。

　　去掉懶加載後的打包

　　

　　　只剩下暴露在index.html中引用的js了,加版本號可解決緩存。

8.自動化混淆代碼，每次打包修改文件名，達到清除緩存的做用

　　

　　npm install map-replace -D
　　npm install hashmark -D

　　package.json scripts加：

　　

　　"hashcb": "hashmark -l 8 -r --cwd www/build \"*.{js,css}\" {name}.{hash}{ext} | map-replace -m \"<[^>]+>\" www/index.html",
　　"dist": "npm run clean && shx rm -rf www/* && npm run build --prod && npm run hashcb && workbox injectManifest"

　　

　　打包： npm run dist

　　取www/目錄下的文件，放棄ionic cordobva build browser --prod 的方式。

9.後續跟進懶加載緩存問題的解決，問題主要仍是在ios蘋果端的強緩存。。。。