Import Maps · type=module · integrity · Safari · Chromium · 遠端 Mac · 2026
2026 年遠端 Mac 前端發布驗收：
Import Maps 與原生 ESM：Safari／Chromium 差異表與漸進增強三步清單
2026.04.16
前端／模組系統
約 8 分鐘閱讀
Import Maps 與 type=module 應可關閉而非唯一入口；僅跑 Linux Chromium 無頭易漏 WebKit 對 map 順序與 Worker 作用域。本文含對照表、漸進增強三步、integrity 與降級、Playwright 與預覽參數。延伸：Vite／Webpack 與 Safari 驗證、CSP 與 Safari 驗收、Safari × Playwright 相容矩陣。
01 常見翻車點（發布前掃一眼）
1）預發布與正式 map 不一致，裸說明符在 Safari 爆紅。2）integrity 與 CDN 內容輪換不同步，模組整批拒載。3）降級只刪 map 未切 script 或 legacy，白屏；使用者側難自助復原，常需維運回滾。建議將模組載入失敗率與主控台模組錯誤納入發布監控，與靜態資產版本綁定觀測，並於灰度期對照雙引擎。
02 Safari 與 Chromium 差異對照表
兩引擎皆支援 map 與 type=module；差異在解析邊界與排錯訊號。
| 主題 | Safari／WebKit | Chromium（Blink） |
|---|---|---|
| 模組解析與 map | importmap 須先於模組指令碼；裸說明符靠 map；Worker 是否與主文件共用 map 勿假設。 |
規則相近；問題面板對缺失說明符提示較直。 |
| integrity | map 與 script 的 integrity 須與回應體一致；錯快取即硬失敗。 |
同類；NetLog 可拆網路與 SRI。 |
| 動態 import | 失敗看主控台與網路 MIME 是否被改寫。 | 工具鏈更全；擴充功能可能改請求。 |
| 降級策略 | 關 map 後退回相對路徑或 bundle；隱私視窗快取敘事與主設定不同。 | 同理；無痕策略另有差異。 |
| 自動化與真機 | Playwright webkit 覆蓋主路徑；代理與憑證用遠端 Mac 真 Safari 補測。 |
chromium 加 Trace；與 WebKit 對照簽字。 |
同事務發布
map、入口 HTML、靜態資源與 integrity 同事務發布；灰度忌半新半舊。
03 漸進增強三步驗收
- 基線：無 map 可啟動（相對路徑或 bundle）；裸說明符僅增強路徑。
- 增強：同網址、同建置號，清快取後雙瀏覽器主流程；Playwright
webkit+chromium斷言無模組錯誤。 - 雜湊與回滾：工單記 map 版、
integrity、CDN 鍵；失敗回 legacy 或上一版 map，附主控台與 Trace。
04 本機預覽與 Playwright 要點（可執行）
與 QA 同指令；預覽須保證 Content-Type 正確。
- ▸Vite：
npx vite preview --host 0.0.0.0 --port 4173 --strictPort - ▸靜態：
npx serve -s dist -l 4173 --cors，查.mjsMIME。 - ▸Playwright：
npx playwright test --project=webkit --project=chromium，pageerror斷言，留trace.zip。 - ▸Safari：遠端 Mac 開發選單，網路裡核對
importmap與首模組。 - ▸Chromium：
chrome://net-export/可選，對齊 CDN 請求 ID。
05 可引用檢查項（貼進工單）
- ①建置號：SHA 或流水號與 map 同源發布。
- ②雜湊：帶
integrity的資源在預發布／正式各抽體校驗。 - ③截圖：雙引擎主控台零模組錯誤各一，附 UTC 時間。
06 FAQ
Worker 裡能用和頁面一樣的裸說明符嗎？
視註冊方式而定；勿假設繼承，Worker 內優先可解析 URL。
integrity 報錯如何快速判因？
比對體與雜湊，再查中間層改寫與快取鍵。
遠端 Mac 在流程裡站哪一格？
提供 WebKit 真 Safari，與 Chromium、CLI 同機對照，作模組簽字環境。