近年來，前端科技的發展日新月異，不斷推陳出新。其中，"載入 brotli 壓縮的 WASM" 是一個備受關注的話題。它可以幫助網頁開發者更有效率地載入和解析壓縮過的數據，提高網頁效能和使用者體驗。在這篇文章中，php小編子墨將為大家介紹這個技術的原理和使用方法，幫助大家更能掌握這項前端技術。讓我們一起來探索這個令人興奮的領域吧！
我有一個 brotli 壓縮的 WASM 檔案 main.wasm.br。我已經通過 CLI 手動壓縮了它。
目前在我的 HTML 檔案中，我有以下內容 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Go WASM</title>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</head>
<body></body>
</html>這會載入未壓縮的 WASM 檔案。如果我將其更改為 WebAssembly.instantiateStreaming(fetch("main.wasm.br"), go.importObject) 我收到以下錯誤 -
<code> Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'. </code>
如何將其載入到 HTML 中？
感謝所有發表評論並指導我找到解決方案的人。
所以它只是歸結為理解 HTTP 請求/回應的基礎知識 -
Content-Type 控制回應內容的實際資料類型。
Content-Encoding 控制我們使用什麼編碼/壓縮邏輯來編碼回應內容。
就我而言，我使用 gzip 手動壓縮 wasm 檔案並按如下方式配置 NginX -
location ~ \.wasm {
default_type 'application/wasm';
add_header 'Content-Encoding' 'gzip';
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}您可以設定 makefile 或建置腳本以在每次建置專案時壓縮 wasm。
以上是載入 brotli 壓縮的 WASM的詳細內容。更多資訊請關注PHP中文網其他相關文章！
