SPA 部署後部分頁面載入失敗?覆蓋式部署的對應解法
這是近期工作上遇到的問題,記錄一下原因與解法,解法不一定是最佳解。
問題背景
接手了公司的一個網站,發現使用者一直在此單頁應用 SPA 中遇到偶發、但令人頭痛的問題。通常會在網站「部署新版本」後、且「使用者尚未重新整理頁面」的情境下發生。
情境如下:
1. 使用者正在我們的後台網站上瀏覽(例如還停留在 /home)。
2. 這時我們開發者部署了一個新版本,且採用了「覆蓋式部署」(也就是直接覆蓋掉原本的靜態資源)。
3. 使用者繼續使用網站並透過前端路由導覽到尚未載入過的頁面(例如 /profile),這個頁面會觸發懶加載動作(例如 Profile.chunk.js)。
4. 由於使用者當前的 HTML 是舊版本,因此所引用的 chunk 路徑還是舊版本的,如 static/js/Profile.abcd1234.chunk.js。
5. 但這個資源已經在部署新版本時被移除或覆蓋,