MFE in-flight user 與 ChunkLoadError race
Module Federation 部署最容易踩的坑:部署當下還在頁面上的 user,他們的瀏覽器已經拿到舊版 remoteEntry.js,但接下來可能會請求舊 hash 的 chunk。
Race 流程
- T0:User A 載入頁面 → 瀏覽器拿到舊版
remoteEntry.js - T0+10s:部署開始,新版 entry 上線、舊 chunks 被刪除
- T0+40s:User A 點某個 lazy route → 觸發載入「舊 hash 的 chunk」
- 結果:404 →
ChunkLoadError
為什麼 SPA 比傳統 multi-page 嚴重
傳統 SSR/multi-page 每次導航都重新請求 HTML,新 entry 立刻生效。MFE / SPA 的 lazy chunk 是在「用戶手上那份 entry 的記憶體」裡解析路徑,所以 entry swap 後仍會去抓舊 hash。
緩解手段
- 部署採 MFE 三段式部署 additive upload entry swap sweep,sweep 延遲 N 天/版本
- 前端 catch
ChunkLoadError→ 強制location.reload() - 保留期內舊 chunks 仍在 → user 不撞 404