出处：掘金

原作者：ErpanOmer

在构建现代 Web 应用时，WebAssembly（Wasm）已成为性能关键路径上的“加速器”。但与此同时，Wasm 模块往往体积不小，如果直接随页面加载，很容易拖慢首屏速度，破坏用户体验

于是一个自然的问题就出现了：

如何把 Wasm 模块部署到 CDN，同时实现按需懒加载？

本文将带你从原理到实战，系统梳理如何将 Wasm 模块作为独立资源部署到 CDN，并通过动态懒加载的方式在用户真正需要时再加载它。用最小的资源成本，换最大的性能收益

核心目标

将 Wasm 模块与主包解耦，部署到 CDN
避免页面初始加载时下载 Wasm
通过 JavaScript 动态懒加载
兼容不同构建工具（Vite、Webpack、Rollup）
支持版本控制、缓存与并发防抖

基本原理

Wasm 模块本质是一个二进制文件（.wasm），与 .js 文件类似，是可以独立加载的资源

所以这套机制的原理很简单：

编译阶段：Rust/C/C++ → 编译出 wasm + JS glue 代码
部署阶段：上传 wasm 文件至 CDN（如 jsDelivr、Cloudflare）
运行阶段：JS 页面逻辑中使用 dynamic import + fetch + WebAssembly.instantiateStreaming

简而言之，把 .wasm 当作远程资源就可以了 —— 而你需要做的，是优雅地“懒”一点

实现 CDN 懒加载

我们以一个 Rust 编写的图像处理模块为例，使用 wasm-pack build 构建，然后部署到 CDN，再在前端实现动态加载

1. 编译 Wasm 模块

Rust 示例：

use wasm_bindgen::prelude::*;
 
#[wasm_bindgen]
pub fn double(x: i32) -> i32 {
    x * 2
}

编译命令：

wasm-pack build --target web

会输出如下结构：

pkg/
├── your_wasm_module_bg.wasm
├── your_wasm_module.js
├── your_wasm_module.d.ts

你只需要把 .wasm 和 .js 上传至 CDN，例如 Vercel、Cloudflare、OSS 等

上传完成后的地址例如：

https://cdn.example.com/wasm/your_wasm_module_bg.wasm
https://cdn.example.com/wasm/your_wasm_module.js

2. 在前端实现懒加载逻辑

有两种主流方式，推荐手动懒加载 + CDN 解耦方案

方式一：手动 fetch + instantiateStreaming

async function loadWasm() {
  const response = await fetch('https://cdn.example.com/wasm/your_wasm_module_bg.wasm');
  const wasmModule = await WebAssembly.instantiateStreaming(response);
  return wasmModule.instance.exports;
}
 
async function onClick() {
  const wasm = await loadWasm();
  console.log(wasm.double(21)); // 输出 42
}

优点：

不依赖构建工具
模块可以异步随用随取
.wasm 可被 CDN 缓存

注意事项：

需要在服务器上设置正确的 MIME 类型：application/wasm
CDN 必须支持跨域 HEAD 请求（即正确响应 Access-Control-Allow-Origin）

方式二：使用 glue JS

例如 wasm-pack 输出的 JS

// dynamic import Glue JS
async function loadWasmGlue() {
  const wasmModule = await import('https://cdn.example.com/wasm/your_wasm_module.js');
  await wasmModule.default(); // 初始化
  return wasmModule;
}
 
document.getElementById('btn').addEventListener('click', async () => {
  const wasm = await loadWasmGlue();
  console.log(wasm.double(10)); // 输出 20
});

优点：

更好地封装了内存管理等底层细节
与 wasm-bindgen 生态更兼容

注意事项：

需要确保 .js 模块支持 ESM
CDN 必须支持 type="module" 的 JS 请求

注意陷阱：懒加载不是“免加载”

Wasm 懒加载虽好，但容易踩以下几个坑：

CDN 缓存未命中

若 CDN headers 未设置合理缓存策略，会导致每次点击都重新下载 Wasm 模块

建议设置：

Cache-Control: public, max-age=31536000, immutable

首次加载阻塞体验

虽然是懒加载，但首次加载依然有几十 KB~几百 KB 的等待时间

可以考虑：

配合 Loading 动画
提前缓存（例如页面预渲染时触发预加载）

多次触发并发加载

如果用户多次点击操作，而你的懒加载逻辑没有防抖或缓存，会重复下载模块

建议使用“加载锁”：

let wasmPromise = null;
 
function getWasm() {
  if (!wasmPromise) {
    wasmPromise = loadWasmGlue();
  }
  return wasmPromise;
}

进阶技巧：预加载 + 版本控制

CDN + Hash 版本控制

使用构建工具自动加 hash：your_module_bg.abc123.wasm

JS 动态加载时可自动适配对应 hash，避免缓存污染

使用 preload 提前加载

若用户“几乎一定”会点击，可以用 preload：

<link rel="preload" href="https://cdn.example.com/wasm/your_module_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous">

配合懒加载可以做到“秒开”

兼容性与浏览器支持

技术	是否支持
WebAssembly	✅ 所有主流浏览器
instantiateStreaming	✅ Chrome、Firefox、Edge、Safari（但 IE 不支持）
`import()` ESM 动态加载	✅ 新版浏览器，IE 不支持
SharedArrayBuffer（多线程场景）	⚠️ 需开启 COOP+COEP

适配构建工具的补充建议

Vite

使用 vite-plugin-wasm 或配置 rollupOptions.external 保证 .wasm 不打包进 JS 主包：

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['https://cdn.example.com/wasm/your_module.js']
    }
  }
});

Webpack

使用 wasm-loader 配合 file-loader 指定外链路径：

module.exports = {
  experiments: {
    asyncWebAssembly: true,
  }
};

结语

Wasm 是提升 Web 性能的一把利剑，但“用力过猛”会变成“双刃剑”

将 Wasm 部署到 CDN 并通过 JavaScript 懒加载，既减少首屏体积，又在用户需要时快速加载所需逻辑，实现了性能 + 用户体验的双赢

它不仅是性能优化的手段，更是一种工程架构思维的升级：

模块化
解耦
可缓存
动态按需

如果你正在做 WebAssembly 开发，或者未来希望将 AI 模型、图像引擎、游戏逻辑加载到浏览器中 —— 这个技巧，你一定用得上

My-Notes

全部文章

004.Wasm 模块加载优化