如何与 webpack 集成？ - 问题详情 - 创脉思

解读

在国内前端工程化面试中，Rust 与 webpack 的集成通常指把 Rust 编译成 WebAssembly（WASM）模块，再由 webpack 像普通 JS 模块一样打包、懒加载、热更新。面试官想确认候选人是否：

熟悉 wasm-pack 这一官方工具链；
能把生成的 .wasm 与 .js 胶水代码无缝接入 webpack5 的 experiments.asyncWebAssembly；
理解 vite/rollup 场景下的差异，并能给出性能优化（如 wasm-opt、base64-inline 阈值、线程池）与 CI 缓存策略；
能权衡 wasm-bindgen 与 js-sys/web-sys 的代码体积，避免把整个 DOM 绑定打进去导致包体爆炸。

知识点

wasm-pack：一键生成 pkg/ 目录，包含 .wasm、.js、.d.ts，直接当 npm 包发布。
webpack5 内置 WASM：无需 wasm-loader，开启 experiments: { asyncWebAssembly: true }，配合 import('xxx/pkg') 异步加载。
vite 差异：vite 使用 @rollup/plugin-wasm，需 ?url 或 ?init 显式声明，且默认不开启 top-level await，需 build.target 设为 esnext。
体积优化：wasm-opt -Oz、wee_alloc 替代默认分配器、#[wasm_bindgen(skip_typescript)] 减少 .d.ts、cargo features 裁剪依赖。
浏览器兼容性：Chrome 57+、Firefox 52+、Safari 11+ 已支持 WASM，但 iOS 11 早期版本 存在 Streaming compile 失败 回退逻辑需处理。
线程与 SIMD：若启用 wasm-bindgen-rayon 多线程，需同域 COOP/COEP 头：Cross-Origin-Embedder-Policy: require-corp 与 Cross-Origin-Opener-Policy: same-origin。
CI 缓存：把 ~/.cargo/registry 与 target/ 目录缓存到 GitHub Actions Cache 或 公司内网 MinIO，可把 5 分钟编译降到 30 秒。

答案

初始化 Rust 侧

cargo new --lib my-wasm
cd my-wasm
cargo add wasm-bindgen

在 lib.rs 中暴露函数：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fib(n: u32) -> u32 {
    (0..n).fold((0, 1), |(a, b), _| (b, a + b)).0
}

使用 wasm-pack 构建
```
wasm-pack build --target web --out-dir pkg --release
```
生成 pkg/my_wasm_bg.wasm 与 my_wasm.js 胶水文件。

webpack5 集成
安装依赖：

npm i -D @wasm-tool/wasm-pack-plugin webpack-cli html-webpack-plugin

在 webpack.config.js 中：

const WasmPackPlugin = require('@wasm-tool/wasm-pack-plugin');

module.exports = {
  mode: 'production',
  experiments: {
    asyncWebAssembly: true,
    syncWebAssembly: false   // 推荐异步，利于分包
  },
  plugins: [
    new WasmPackPlugin({ crateDirectory: path.resolve(__dirname, 'my-wasm') })
  ]
};

业务代码：

import init, { fib } from 'my-wasm';

async function run() {
  await init();          // 自动 fetch 并编译 .wasm
  console.log(fib(40));
}
run();

体积与性能优化
- 在 Cargo.toml 加：
```
[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
```
- 构建后跑 wasm-opt -Oz pkg/my_wasm_bg.wasm -o pkg/my_wasm_bg.opt.wasm 可再降 15%。
- 若 WASM 文件 < 4 KB，可在 webpack 中配置 type: 'asset/inline' 直接 base64 内联，减少一次 HTTP 往返。
热更新与调试
- wasm-pack 生成的 .d.ts 让 VSCode 自动提示；
- 在 devtool: 'eval-source-map' 下，chrome://inspect#wasm 可单步调试 Rust 源码；
- 若修改 Rust 代码，wasm-pack-plugin 会监听 src/ 并增量编译，webpack-dev-server 秒级热重载。

拓展思考

同构场景：若公司使用 Next.js，需把 init() 放到 useEffect 中避免 SSR 时 Node 环境缺失 WebAssembly 对象；可封装 dynamic(() => import('my-wasm'), { ssr: false })。
微前端：在 qiankun 子应用里，主应用与子应用域名不同时，.wasm 文件需放同一 CDN 并加 **Access-Control-Allow-Origin: ***，否则 COEP 头会阻断跨域请求。
边缘计算：国内云厂商如 阿里云边缘函数 已支持 WASM，可把 Rust 编译成 .wasm 直接上传，webpack 仅负责生成带签名的 URL，此时要关闭 wasm-opt 的 sign-ext 特性以兼容旧引擎。
安全审计：金融级项目需把 wasm-pack 固定到 0.12.1 并在 Cargo.lock 加 cargo-audit 门禁，防止 RUSTSEC-2022-0041 这类 wasm-bindgen 内存泄露漏洞流入生产。
演进方向：未来 WebAssembly Component Model 与 Webpack5 Module Federation 结合，可实现 Rust 微组件在运行时动态链接，一次编译、多端共享，面试时可主动提及以展示技术前瞻性。