載入 brotli 壓縮的 WASM-Golang-PHP中文網

載入 brotli 壓縮的 WASM

WBOY

發布： 2024-02-13 16:21:08

轉載

571 人瀏覽過

加载 brotli 压缩的 WASM

近年來，前端科技的發展日新月異，不斷推陳出新。其中，"載入 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中文網其他相關文章！