如何在HTML中加载Brotli压缩的WASM文件？

出现这个错误的核心原因有两个：

• 服务器返回的main.wasm.br文件MIME类型不是application/wasm
• 浏览器未收到Content-Encoding: br响应头，无法识别这是Brotli压缩内容

下面是具体解决步骤：

一、配置服务器（推荐方案） #

这是最标准的做法，让服务器自动处理压缩文件的响应头：

Nginx配置 #

在Nginx配置文件（比如nginx.conf或站点专属配置）中添加：

# 优先返回Brotli压缩的WASM文件
location ~* \.wasm$ {
    add_header Content-Type application/wasm;
    brotli_static on;
}

# 或者直接针对.br后缀文件配置
location ~* \.wasm\.br$ {
    add_header Content-Type application/wasm;
    add_header Content-Encoding br;
}

配置完成后，你依然可以在HTML中加载main.wasm，Nginx会自动返回同目录下的main.wasm.br压缩文件（前提是该压缩文件存在）。

Apache配置 #

先启用mod_headers和mod_brotli模块，再在.htaccess或站点配置中添加：

# 自动为WASM文件返回Brotli压缩版本
<FilesMatch "\.wasm$">
    Header set Content-Type "application/wasm"
    SetOutputFilter BROTLI_COMPRESS
</FilesMatch>

# 或者针对.br后缀文件配置
<FilesMatch "\.wasm\.br$">
    Header set Content-Type "application/wasm"
    Header set Content-Encoding "br"
</FilesMatch>

Node.js/Express配置 #

使用compression中间件自动处理Brotli压缩，或者手动实现逻辑：

const express = require('express');
const compression = require('compression');
const app = express();

// 启用Brotli压缩，优先返回压缩文件
app.use(compression({
    level: 11, // Brotli最高压缩级别
    filter: (req, res) => {
        return req.headers['accept-encoding']?.includes('br') 
            ? true 
            : compression.filter(req, res);
    }
}));

// 或者手动处理.br文件请求
app.get('/main.wasm', (req, res) => {
    if (req.headers['accept-encoding']?.includes('br')) {
        res.setHeader('Content-Type', 'application/wasm');
        res.setHeader('Content-Encoding', 'br');
        res.sendFile('main.wasm.br', { root: __dirname });
    } else {
        res.setHeader('Content-Type', 'application/wasm');
        res.sendFile('main.wasm', { root: __dirname });
    }
});

二、前端手动处理（仅用于无法修改服务器的场景） #

如果无法调整服务器配置，可以通过fetch手动获取压缩文件，解压后再编译WASM：

async function loadCompressedWasm() {
    const response = await fetch('main.wasm.br', {
        headers: { 'Accept-Encoding': 'br' }
    });
    // 读取原始压缩二进制数据
    const compressedBuffer = await response.arrayBuffer();
    // 引入Brotli解压库（比如npm的brotli模块）后解压
    const decompressedBuffer = brotli.decompress(new Uint8Array(compressedBuffer));
    // 编译并实例化WASM
    const wasmInstance = await WebAssembly.instantiate(decompressedBuffer);
    // 使用WASM导出的方法
    console.log(wasmInstance.exports);
}
loadCompressedWasm();

注意：这种方法需要额外引入Brotli解压库，会增加前端体积，效率不如服务器端处理。

关键注意点 #

• 无论哪种方案，必须确保服务器返回的Content-Type为application/wasm，这是WebAssembly.compile要求的必填响应头
• 如果手动加载.br后缀文件，服务器必须同时返回Content-Encoding: br，否则浏览器无法自动解压

内容的提问来源于stack exchange，提问作者ArunKolhapur