编程语言研究书库
WebAssembly 权威指南

搭一套 WebAssembly 开发环境 — 工具链、构建流水线与调试

搭一套 WebAssembly 开发环境 — 工具链、构建流水线与调试

1. 这一章讲什么

第 1 章讲了 Wasm 是什么,这一章讲怎么开工:装哪些工具、源码怎么一步步变成 .wasm 文件、 出了问题怎么调试。三件主角——Emscripten(C/C++ 的工具链)、wasm-pack(Rust 的工具链)、 浏览器 DevTools(调试)——会在后面每一章反复出现。这一章也是全书「动手」部分的起点。1

2. 顶层全景

  源代码(C / C++ / Rust / AssemblyScript)
      │ ① 编译:翻译成 LLVM IR(与平台无关的中间表示)
      ▼
  中间表示(LLVM IR)
      │ ② 优化:死代码消除、内联、循环展开……(LLVM + Binaryen 两级)
      ▼
  优化后的 IR
      │ ③ 二进制生成:编码成 .wasm 字节序列
      ▼
  .wasm 文件(+ 胶水 JavaScript + source map)
      │ ④ 集成:浏览器里用 JS API 加载,或服务器上用 Wasmtime/Wasmer 跑
      ▼
  跑起来的模块

图说:这条四级流水线是全章主轴,每一节讲一级加上这一级用什么工具。

3. 核心原理

3.1 Emscripten:C/C++ 进 Wasm 的大门

Emscripten 是一个开源工具链,底层用 LLVM(一个编译器基础设施:提供「中间表示」这种 与具体语言、具体机器都无关的中间形态,以及一整套在它上面做优化的工具), 把 C/C++ 编译成 WebAssembly 或 JavaScript。2

它真正的价值不只是「能编译」,而是替你把 C/C++ 程序依赖的那些系统能力接到了 Web 上:3

原生世界的东西Emscripten 怎么接
OpenGL 图形调用映射到 WebGL(浏览器里的硬件加速 3D 接口)
多媒体(图形、音频、输入)接到 SDL(一个跨平台多媒体库)
系统级操作(文件 I/O、线程、套接字)提供部分 POSIX 兼容(POSIX 是 Unix 系列操作系统的统一系统调用标准)
声音、网络、新图形标准WebAudio、WebSockets,以及新兴的 WebGPU(让浏览器直接调显卡的新标准)

书里点名它撑起过 Google Earth 的浏览器版、网页版 AutoCAD 和大量网页游戏。4

装它的流程走一遍(命令都是原书给的):5

  1. git clone https://github.com/emscripten-core/emsdk.git —— 克隆 emsdk(Emscripten SDK,装与管 Emscripten 的工具);
  2. ./emsdk install latest —— 装编译器、LLVM 后端、Binaryen,约 1–2 GB;
  3. ./emsdk activate latest 然后 source ./emsdk_env.sh —— 激活并把 emcc(它的编译命令)加进 PATH;
  4. emcc -v —— 验明正身,书里给的示例输出是 emcc (Emscripten gcc/clang-like replacement) 3.1.45。

然后第一条编译命令:

emcc hello.c -o hello.html

这一行会产出三个文件:.html(加载页面)、.js(Wasm 与浏览器之间的胶水代码)、 .wasm(真正的二进制)。注意浏览器不允许从 file:// 地址跑 Wasm(安全策略), 所以要起个本地服务器(书里用 python -m http.server 8080),再开 http://localhost:8080/hello.html 看结果。6

3.2 Rust 路线:wasm-pack 与 Rustup

Rust 侧的装法更短,三步:7

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh   # ① 装 Rustup(Rust 的安装与版本管理器)
rustup target add wasm32-unknown-unknown                          # ② 加 Wasm 编译目标
cargo install wasm-pack                                           # ③ 装 wasm-pack

wasm-pack 干四件事:把 Rust 代码编译成 .wasm、生成 JavaScript 绑定 (让 JS 像调普通函数一样调 Rust 函数)、按 npm 包格式打包、支持 TypeScript。 编译命令是 wasm-pack build --target web。8

一个细节值得记住:Rust 函数要标 #[no_mangle]。 名字修饰(name mangling) 是编译器给函数名加前后缀防重名的惯例, no_mangle 等于说「别改名,让外部按原名找到这个函数」—— 否则 JS 那边按 add 找,找到的是编译器改过的怪名字。9

3.3 WebAssembly Studio:不开工位也能玩

WebAssembly Studio 是一个免费的浏览器 IDE(webassembly.studio),支持 AssemblyScript、 C/C++、Rust,选模板、改代码、点构建,直接在浏览器里看到模块输出。适合零安装原型验证, 大项目还是要回本地 VS Code。10

3.4 WAT:二进制的「人话版」

.wasm 是二进制,人不能读。WAT(WebAssembly Text Format)是它的文本表示, 和二进制一一对应。书里的例子,一个加法模块:11

(module
  (func $add (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add
  )
  (export "add" (func $add))
)

读法:定义一个模块;里面有个函数 $add,收两个 32 位整数(i32),返回一个 32 位整数; 函数体三行是栈式操作——把第 0 个参数压栈、把第 1 个压栈、做 32 位加法(从栈顶取两个数、 把和压回去);最后把这个函数以 "add" 之名导出。 WABT 工具包里的 wat2wasm / wasm2wat 负责文本和二进制互转。12

3.5 构建流水线:四级,每级有明确定义和工具

这是全章的承重墙,原书按四级拆:13

级别干什么主力工具
① 源代码编译源码 → LLVM IR(平台无关的中间表示)Emscripten 里的 clang、Rust 的 rustc、AssemblyScript 的 asc
② 优化在 IR 上做死代码消除、内联、循环展开、常量折叠LLVM 的 -O3、Binaryen 的 wasm-opt
③ 二进制生成优化后的 IR 编码成 .wasmLLVM 的 Wasm 后端、wat2wasm
④ 集成在宿主里加载执行浏览器 WebAssembly JS API、Wasmtime/Wasmer

几个数字要带走:

  • wasm-opt 能把 .wasm 体积缩小 20–50%(wasm-opt -O3 input.wasm -o output.wasm);14
  • 优化要分场景:用户网络慢、下载贵(带宽敏感)用 -Os 压体积,计算量大(算力敏感)用 -O3 追速度 (wasm-opt --strip-dwarf);15
  • 生成出来的二进制要用 wasm-validate 校验再交付。16

还有一对「目标」要分清:wasm32-unknown-unknown 是给浏览器的, wasm32-wasi 是给服务器端的——同一个 Rust 项目,目标不同,产物走的集成路线完全不同。17

3.6 调试:source map 是全部的关键

直接在 .wasm 里断点,你看到的是一堆 local.get、i32.add。 Source map 是一张「编译后位置 ↔ 源代码位置」的对照表(书里说能把调试时间省最多一半), 生成方式按语言分:Emscripten 加 -g,Rust 在 Cargo.toml 写 debug = true 或 wasm-pack build --dev,AssemblyScript 加 --sourceMap。18

有了 source map,Chrome DevTools 的 Sources 页里出现的就不是字节码而是你的 main.c/lib.rs, 可以下断点、单步、看变量。两个浏览器有差别:Chrome 强在 DWARF 调试(Chrome 114 起), Firefox 强在反汇编视图;书里的实务建议是两个都装、都试。19

调试线性内存也有直接入口:Chrome 的 Memory 页把 Wasm 内存当连续字节数组看, JS 侧用 new Uint32Array(instance.exports.memory.buffer) 开视图直接读写。 C++ 项目建议开发期开 Emscripten 的 -s SAFE_HEAP=1 抓越界。20

3.7 工具箱全景与最佳实践

除了两大工具链,书里还盘点了一圈:VS Code 加四个插件(WAT 高亮、Emscripten 调试、 rust-analyzer、WASM 语言支持);命令行侧 WABT(wat2wasm/wasm2wat/wasm-objdump)、 Binaryen(wasm-opt)、Wasmtime/Wasmer(本地跑 Wasm);云端还有 Endor 这类 预装好工具链的隔离开发环境。21

最佳实践部分按六组归:22

组要点
环境工具链保持更新、用包管理器装、CI 里锁版本;Git 管理,构建产物进 .gitignore
代码优化-Os/-O3 按场景选、wasm-opt 压体积、类型化数组传数据、模块懒加载
调试开发期带 source map、上线剥掉;多浏览器验证;实例化包 try-catch
安全JS-Wasm 边界消毒数据、按最小权限给 WASI 能力、加密应用查侧信道
测试集成cargo test + Jest;Wasm 只留给重活,UI 留给 JS
跟进盯 WebAssembly.org、Bytecode Alliance、WasmCon

3.8 主线例子:hello.c 从源码到页面

把一个具体输入从头走到尾。输入是书里那个五行的 hello.c(只调一次 printf)。 (命令与文件名均出自原书;终端输出的大小是演示编的。)

第 1 步:进流水线。 emcc hello.c -o hello.html。Emscripten 内部先调 clang 把 C 翻成 LLVM IR,做 -O 级别优化,再经 LLVM 的 Wasm 后端编码成二进制,最后生成 hello.html、 hello.js、hello.wasm 三个文件。23

第 2 步:看产物分工。 打开目录:.wasm 里是编译好的机器无关字节码; .js 是胶水,负责 fetch 那个 .wasm、铺好线性内存、把 printf 桥到页面; .html 只是把前两者装起来的壳。24

第 3 步:起服务。 python -m http.server 8080——直接从 file:// 双击打开是不行的, 浏览器安全策略禁止,这一步书里专门写了。25

第 4 步:浏览器内四级集成的最后一级。 页面加载,胶水 JS 调 WebAssembly.instantiateStreaming(fetch('hello.wasm'), imports), 浏览器做加载 → 校验 → 编译,imports 里就有胶水提供的系统调用替身。 main() 跑起来,printf 的输出经胶水写到页面。26

第 5 步(演示编的数):看体积。 未开优化的 hello.wasm 大约是 2 KB 量级,跑一遍 wasm-opt -O3 hello.wasm -o hello_opt.wasm 能再瘦一圈——「20–50%」是书对 wasm-opt 能力的整体描述,单个 hello 世界的实测数字这里是演示编的,方向是文件更小、加载更快。27

第 6 步:出问题就回源代码。 如果输出不对,重编时加 -g,DevTools 里断点就落在 hello.c 那一行,而不是落在 i32.add 上。28

4. 作者的判断与证据

这一章是操作手册型内容,判断不多,主要是两处:

  • 「source map 最多省一半调试时间」:书给了数字,但没给实验来源,属于经验性断言;
  • 「wasm-opt 缩 20–50%」:这是 Binaryen 项目一贯的宣传量级,书里引用了它并给了命令, 等级算「转述官方资料」。29

另外要注意:本章大量命令带版本号(Emscripten 3.1.45/3.1.68、Chrome 114、Firefox 128、 Safari 18.2、「2025 更新」「WASI 0.3」),这是一本以 2025–2026 年为时间坐标的实操书, 版本过了就会旧——这是特性不是错误,但引用时要带上时间。

判断(我们的,不是书里的): 这章的工具链建议总体扎实,但有一处要当心—— wasm32-unknown-unknown 配 wasm-pack 的官方度在下降,Rust Wasm 工作组近年更推 wasm32-unknown-emscripten 直出和 cargo 内置 build-std 流程;wasm-pack 本身维护已放缓。 书里的路线仍然能用,但新开工的项目值得先核对 Rust 官方 Wasm 文档的现状。 如果错,会错在: 如果 wasm-pack 恢复活跃维护(社区确有讨论),这条修正就过头了—— 无论如何,版本号要以当下官方文档为准,书里数字只作坐标。

5. 边界与局限

  • 本章不深入讲互操作的类型问题:胶水代码怎么传字符串、对象,只在集成一节带过, 留给第 4 章;
  • 调试只覆盖浏览器:命令行/WASI 侧调试(GDB/LLDB 经 DWARF)只提了一句;
  • 「Endor」这类工具着墨很少,基本是列表式盘点,不构成推荐;
  • 安装步骤会过期:emsdk 命令稳定,但「~1–2 GB」「~5 GB 磁盘」这类数字随版本漂移。

6. 可带走的

  1. 选工具链先看语言:C/C++ → Emscripten,Rust → wasm-pack + Rustup,TS 背景 → AssemblyScript。
  2. 记住四级流水线:编译成 LLVM IR → 优化(LLVM + wasm-opt)→ 生成 .wasm → 集成(浏览器 JS API 或独立运行时)。
  3. emcc hello.c -o hello.html 出三个文件:html、js 胶水、wasm 本体;file:// 打不开,必须起本地服务器。
  4. wasm-opt 压体积 20–50%,-Os 管大小、-O3 管速度,上线剥调试符号。
  5. 浏览器目标 wasm32-unknown-unknown,服务器目标 wasm32-wasi,别混。
  6. WAT 是二进制的可读镜像,wat2wasm/wasm2wat 互转;读 WAT 记住「栈式」:压栈、取数、压回。
  7. Rust 函数对外要 #[no_mangle],否则 JS 找不到名字。
  8. 调试先开 source map(-g / debug = true / --sourceMap),上线再剥掉。
  9. 两个浏览器都装:Chrome 强 DWARF,Firefox 强反汇编;内存问题用 Memory 页 + Uint32Array 视图。
  10. 全流程自动化:构建脚本串起编译、wasm-opt、wasm-validate、跨浏览器测试。

8. 加厚一:云端 IDE 与命令行工具箱(原书细节)

WebAssembly Studio 的本体是一个网页:选模板(AssemblyScript / Rust / C/C++)→ 浏览器里改代码 → 点构建看模块输出。书里列的四个特性——语法高亮与自动补全、 集成构建与调试、分享协作、实时输出——决定它只适合「零安装的试玩与课堂」; 项目一大,还是得回到本地 VS Code。30

WABT(WebAssembly Binary Toolkit)是二进制和文本之间的翻译官: wat2wasm module.wat -o module.wasm 把文本编成二进制, wasm2wat module.wasm -o module.wat 反汇编人读,wasm-objdump 看段结构。 手写 WAT 或想读懂编译器产出时,这三件是全套家当。31

Binaryen 的 wasm-opt 在前文已经见过(压体积 20–50%);本章补它的定位: 它干的是「源码编译器(Emscripten/rustc)干不完的活」——在二进制上做内联、 常量折叠、死代码消除。构建脚本里放在最后一级,是各家流水线的共同收尾。32

一个本章特有的提醒:开 SIMD 或线程这类特性时,要按浏览器版本对表 (书里写的是 Chrome 114+ / Firefox 128+),生成的二进制别超过目标浏览器的 能力集;wasm-validate 是发布前的最后一道闸。33

9. 原文地图

主题原书章原文位置
Emscripten 定义与 API 集成Setting Up Your WebAssembly Development Environmenttext/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:95(搜「open-source, LLVM-based compiler toolchain」)
emsdk 安装五步同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:181(搜「git clone https://github.com/emscripten-core/emsdk.git」)
emcc 三产物与 file:// 限制同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:297(搜「emcc hello.c -o hello.html」) · text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:347(搜「file://」)
wasm-pack 安装与功能同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:461(搜「sh.rustup.rs」) · text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:495(搜「Automatic generation of JavaScript bindings」)
#[no_mangle]同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:477(搜「no_mangle」)
WebAssembly Studio同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:503(搜「online IDE」)
WAT 示例与转换工具同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:585(搜「human-readable representation」)
流水线四级同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:641(搜「Intermediate Representation (IR)」) · text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:751(搜「Dead Code Elimination」) · text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:853(搜「Wasm backend」) · text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:951(搜「host environment」)
wasm-opt 20–50%同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:789(搜「20-50%」)
source map 三种生成法同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1327(搜「bridge compiled Wasm binaries」)
Chrome/Firefox 调试差异同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1213(搜「Chrome 114」) · text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1319(搜「Safari 18.2」)
线性内存检视同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1445(搜「contiguous byte array」)
最佳实践六组同上text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:2203(搜「Overview of Best Practices」)

Footnotes

  1. 出处:「Setting Up Your WebAssembly Development Environment」第 13–39 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:15,搜「robust and well-configured development environment」)。 ↩

  2. 出处:「Setting Up Your WebAssembly Development Environment」第 95 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:95,搜「LLVM-based compiler toolchain」)。 ↩

  3. 出处:「Setting Up Your WebAssembly Development Environment」第 97–139 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:99,搜「WebGL」)。WebGL、SDL、POSIX 的映射表见 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:127(搜「Maps OpenGL/OpenGL ES calls」)。 ↩

  4. 出处:「Setting Up Your WebAssembly Development Environment」第 153 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:153,搜「Google Earth」)。 ↩

  5. 出处:「Setting Up Your WebAssembly Development Environment」第 159–277 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:181,搜「git clone https://github.com/emscripten-core/emsdk.git」)。版本示例输出见 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:277(搜「3.1.45」)。脚注内网址为原书所引安装命令,非外部资料,查阅于 2026-10-19。 ↩

  6. 出处:「Setting Up Your WebAssembly Development Environment」第 291–339 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:297,搜「emcc hello.c -o hello.html」);file:// 限制见同章 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:349(搜「due to security policies」)。 ↩

  7. 出处:「Setting Up Your WebAssembly Development Environment」第 457–471 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:461,搜「sh.rustup.rs」)。 ↩

  8. 出处:「Setting Up Your WebAssembly Development Environment」第 491–499 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:495,搜「Automatic generation of JavaScript bindings」)。 ↩

  9. 出处:「Setting Up Your WebAssembly Development Environment」第 561–567 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:567,搜「prevent name mangling」)。 ↩

  10. 出处:「Setting Up Your WebAssembly Development Environment」第 501–533 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:503,搜「online IDE」)。 ↩

  11. 出处:「Setting Up Your WebAssembly Development Environment」第 585–605 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:591,搜「(module」)。 ↩

  12. 出处:「Setting Up Your WebAssembly Development Environment」第 613–623 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:617,搜「wasm2wat」)。 ↩

  13. 出处:「Setting Up Your WebAssembly Development Environment」第 639–651 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:641,搜「Intermediate Representation (IR)」)、text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:751(搜「Dead Code Elimination」)、text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:845(搜「compact, portable format」)、text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:951(搜「host environment」)。 ↩

  14. 出处:「Setting Up Your WebAssembly Development Environment」第 779–793 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:789,搜「20-50%」)。 ↩

  15. 出处:「Setting Up Your WebAssembly Development Environment」第 815–833 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:819,搜「-Os」)与 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:829(搜「strip-dwarf」)。 ↩

  16. 出处:「Setting Up Your WebAssembly Development Environment」第 925–935 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:933,搜「wasm-validate」)。 ↩

  17. 出处:「Setting Up Your WebAssembly Development Environment」第 715–723 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:717,搜「wasm32」)。 ↩

  18. 出处:「Setting Up Your WebAssembly Development Environment」第 1325–1433 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1329,搜「Generating Source Maps」)。「省最多一半」见 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1423(搜「up to 50%」)。 ↩

  19. 出处:「Setting Up Your WebAssembly Development Environment」第 1207–1213 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1213,搜「DWARF-based debugging」)与 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1319(搜「Firefox 128+」)。 ↩

  20. 出处:「Setting Up Your WebAssembly Development Environment」第 1435–1509 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1459,搜「instance.exports.memory」);SAFE_HEAP 见 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1483(搜「SAFE_HEAP」)。 ↩

  21. 出处:「Setting Up Your WebAssembly Development Environment」第 1581–2201 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1595,搜「Visual Studio Code」)与 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1787(搜「Command-line tools」)。 ↩

  22. 出处:「Setting Up Your WebAssembly Development Environment」第 2203–2427 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:2203,搜「Overview of Best Practices」)。 ↩

  23. 出处:「Setting Up Your WebAssembly Development Environment」第 639–711 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:657,搜「Emscripten uses clang」)。四级内部流程是原书对构建流水线的描述,演示中把它套用到 hello.c 这一次具体编译上。 ↩

  24. 出处:「Setting Up Your WebAssembly Development Environment」第 297–315 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:307,搜「minimal HTML file」)与 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:311(搜「glue code」)。 ↩

  25. 出处:「Setting Up Your WebAssembly Development Environment」第 341–349 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:347,搜「file://」)。 ↩

  26. 出处:「Setting Up Your WebAssembly Development Environment」第 955–969 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:965,搜「instantiateStreaming」)。 ↩

  27. 出处:「Setting Up Your WebAssembly Development Environment」第 779–793 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:789,搜「reduce size by 20-50%」)。hello 世界的体积数字是为演示编的。 ↩

  28. 出处:「Setting Up Your WebAssembly Development Environment」第 1329–1347 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1335,搜「-g」)。 ↩

  29. 出处:「Setting Up Your WebAssembly Development Environment」第 1419–1425 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1423,搜「Reduces debugging time」)。 ↩

  30. 出处:「Setting Up Your WebAssembly Development Environment」第 501–533 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:527(搜「Syntax highlighting」)。 ↩

  31. 出处:「Setting Up Your WebAssembly Development Environment」第 1839–1893 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1843(搜「WebAssembly Binary Toolkit (WABT)」)与 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1879(搜「wat2wasm module.wat」)。 ↩

  32. 出处:「Setting Up Your WebAssembly Development Environment」第 1935–1971 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1939(搜「Provides optimization」)与 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:1951(搜「20-50%」)。 ↩

  33. 出处:「Setting Up Your WebAssembly Development Environment」第 825–833 段(text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:833(搜「Chrome 114+」)与 text/13-fm-ultimate-webassembly-for-high-performance-apps-b.txt:933(搜「wasm-validate」)。 ↩

为什么需要 WebAssembly — 从 JavaScript 的极限到浏览器里的原生性能

Previous Page

在浏览器里跑起 WebAssembly — 生命周期、JS API 与线性内存

Next Page

On this page

搭一套 WebAssembly 开发环境 — 工具链、构建流水线与调试1. 这一章讲什么2. 顶层全景3. 核心原理3.1 Emscripten:C/C++ 进 Wasm 的大门3.2 Rust 路线:wasm-pack 与 Rustup3.3 WebAssembly Studio:不开工位也能玩3.4 WAT:二进制的「人话版」3.5 构建流水线:四级,每级有明确定义和工具3.6 调试:source map 是全部的关键3.7 工具箱全景与最佳实践3.8 主线例子:hello.c 从源码到页面4. 作者的判断与证据5. 边界与局限6. 可带走的8. 加厚一:云端 IDE 与命令行工具箱(原书细节)9. 原文地图Footnotes