什麼情況下適合使用 WebAssembly
- 你的擴充功能會執行運算吃重的工作（剖析、媒體、光學字元辨識（OCR）、各種轉換）。
- 你需要對經常執行的程式碼路徑取得接近原生的效能。
- 你想沿用 web 專案中既有的 Wasm 模組。
WebAssembly 能做到的事
| 能力 | 帶來什麼好處 |
|---|---|
| 內建的 Wasm pipeline 預設值 | 不必手動串接 bundler，即可執行常見的 Wasm 流程 |
| 非同步 Wasm 支援 | 在擴充功能情境下載入 .wasm 模組 |
| 執行期相容性輔助 | 處理常見 Wasm 生態的資源模式 |
| 一般指令工作流程 | 以一般的 dev 與 build 指令使用 Wasm |
範本範例
sidebar-transformers-js
Extension.js 啟用了什麼
Wasm plugin 會設定：experiments.asyncWebAssembly = true- 模組解析中加入
.wasm副檔名 - 為常見 Wasm 函式庫設定路徑別名（例如處理媒體的 ffmpeg、影像處理的 imagemagick，以及做 OCR 的 tesseract），讓執行期能正確解析 import。
使用方式
在一般的開發／建置流程中使用擴充功能裡的 Wasm 模組：典型用途
- 運算吃重的剖析／轉換。
- 媒體處理 pipeline。
- OCR／影像處理流程。
- 對效能敏感、會在 web 與 runtime 情境共用的演算法。
最佳實務
- 讓 Wasm 模組專注在效能熱點，把協調邏輯留在 JavaScript/TypeScript。
- 驗證輸出體積與載入時機在各擴充功能情境（background、content script、頁面）的表現。
- 在你會發佈的所有瀏覽器目標（
chrome、edge、firefox）上測試 Wasm 吃重的流程。
下一步
- 進一步了解 WebAssembly。
- 了解 Extension.js 如何處理 ECMAScript Modules。