【第 3592 期】揭秘 Bolt.new 背后的技术

文章深度剖析了 Bolt.new 这款“一句话应用构建器”背后的核心技术 WebContainer。Bolt 通过将用户输入的提示词发送给大语言模型（LLM）生成代码，随后在浏览器内运行的 WebContainer 虚拟机中执行代码并展示预览，实现了快速、安全、低延迟的应用生成体验。WebContainer 是 StackBlitz 团队七年技术积累的成果，它通过一系列创新技术克服了浏览器沙盒的限制，包括：使用 Rust/WASM 构建高性能虚拟文件系统、利用 Web Worker 模拟 Node.js 的进程和线程模型、通过 Service Worker 实现虚拟 localhost 网络以及兼容 ESM 和 CommonJS 模块。文章还强调了 WebContainer 通过精简运行时包、快照式文件系统和即时安装等优化，实现了接近原生的启动和运行时性能。Bolt 正是凭借 WebContainer 的强大技术底蕴，结合 LLM 的最新进展，从濒临倒闭的 StackBlitz 成功转型，实现了业务的爆炸式增长，成为技术创新与市场机遇完美结合的典范。

---

src="https://api.eyabc.cn/api/picture/scenery/?k=480d1ae4&u=https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FmeG6Vo0MevhAYM3AHb66GQ8es1icOKMGAkqiaUsHtzdNJAyv50GYFeLwTM41rkEmjq22ySEpic95IicI3lJHXcZ7AQ%2F0%3Fwx_fmt%3Djpeg">

前言

讲述了 Bolt.new 的技术细节和成功故事。Bolt 是一个基于 AI 的一键式应用构建器，用户输入一句话就能生成完整的运行项目。今日前端早读课文章由 @Lior Neu-ner 分享，@飘飘编译。

译文从这开始～～

好技术 + AI = 盈利机器

如果你最近尝试过做一个副业项目，很可能已经碰到过 Bolt —— 一款凭借看起来像魔法般的演示而迅速走红的一句话应用构建器。输入一句话，稍等几秒钟，一个完全可运行的项目就出来了。

从表面上看，Bolt 像是 “一夜成名” 的故事 —— 又一家赶上 AI 浪潮的创业公司。但实际上，Bolt 是史上最成功的转型案例之一。这所谓的 “一夜成功”，背后却酝酿了七年。

这张图说明了一切。自 2024 年 10 月转型以来，Bolt 用户已经创建了数百万个应用，公司凭借仅 15 人的工程团队，就实现了年经常性收入（ARR）4000 万美元的成绩。这可以说是一次史诗级的逆袭。

我采访了联合创始人兼 CTO Albert Pai，以及早期工程师 Dominic Elm，来了解 Bolt 是如何做到的。

Bolt 的工作原理

要理解 Bolt 背后的技术挑战，可以看看输入提示词之后究竟发生了什么：

• 1、用户输入提示，例如：“帮我做一个狗狗版的 Tinder 网页应用”。

• 2、提示会发送到大语言模型（LLM），生成应用代码。

• 3、同时，浏览器会启动 WebContainer —— 一个运行在浏览器里的虚拟机，代码就在这里执行。

• 4、WebContainer 收到相关指令，去安装并初始化项目，比如运行 npm install、创建项目文件等。

• 5、代码生成完成后，虚拟机运行代码并展示预览。

令人惊讶的是，这一切的流程其实非常简单。

【第3570期】LLM 和 ChatGPT：文本提示与 JSON 提示的对比

我原以为 Bolt 会 orchestrate（编排）一整套 LLM 调用链，还要用各种微调模型。但实际上，整个应用只来源于一个精心设计的提示。

这里真正的主角在是 WebContainer，也就是 Bolt 的浏览器虚拟机。正如联合创始人兼 CTO Albert Pai 所说：“很多人以为我们在运营一个庞大的服务器集群。其实真正的服务器就是你的浏览器。”

【第2297期】WebContainers简介：在你的浏览器中运行Node.js

从 StackBlitz 到 Bolt

在做 Bolt 之前，团队花了七年时间开发 StackBlitz，这是一款基于浏览器的在线 IDE。StackBlitz 的核心技术就是 WebContainer，这是一款他们自研的开源运行时，可以在浏览器里完整启动 Node.js。

尽管拥有数百万开发者使用，StackBlitz 一度濒临关闭。直到 2024 年中，最新一代 LLM 展示出可以端到端构建高质量应用的能力。

团队意识到 WebContainer 完美适配这种新工作流，于是果断转型，并在 2024 年 10 月以 Bolt 的身份重新上线。短短 30 天就从 0 做到 400 万 ARR，半年后更是暴涨 10 倍，达到 4000 万。

WebContainer：Bolt 的超级武器

大多数 AI 应用生成器都会在云端为每次会话启动一个新容器，这会带来冷启动、网络延迟和用户级的成本。而 WebContainer 完全颠覆了这种模式：它直接在你的浏览器里运行应用。

“最大优势就是延迟，感觉就像在本地开发一样。” 早期工程师 Dominic Elm 说，“而且在安全性上也更好。云端算力常常会被滥用，比如有人尝试跑比特币挖矿。但在 WebContainer 里，如果有人这么做，他们只是在消耗自己的 CPU。”

为什么把 Node.js 塞进浏览器标签页这么难 —— 以及 Bolt 是怎么做到的

打造这种 “超能力”，可没法靠被放射性蜘蛛咬一口就搞定。

“最开始我们甚至不确定能不能实现。浏览器既不提供 Node 需要的系统调用，还有限制严格的安全规则。” Albert 说，“我们花了好几年移植和自己造轮子，直到它真的能让人感觉像本地开发环境一样。”

下面每一个技术难点，都可以写成一个小故事。

1. 虚拟文件系统

Node 的 fs API 需要一个符合 POSIX 标准的并发磁盘（POSIX 是操作系统接口的通用标准）。没有它，连一个简单的 npm install 都跑不起来。

【第3590期】Node.js 搭建 MCP Server，实时获取最新 API 文档

🛑 为什么在浏览器里很难实现

浏览器不提供 Node 依赖的底层文件操作，比如：打开文件、加锁、写入原始字节等。你必须在浏览器提供的高层 API 上模拟一个 “真实磁盘” 和安全的并发访问。这既增加了延迟，也容易出并发错误。

团队前后尝试了三次，才搞出一个足够快的 “浏览器原生” 文件系统。

• 第一次尝试：他们想 fork 一个已有的浏览器文件系统库。但很快就失败了，因为大多数库只实现了最基础的磁盘操作，而 Node 需要几十种底层功能（文件描述符锁、原子写、权限控制等），缺少这些功能会导致一堆错误。

• 第二次尝试：他们用 JavaScript 写了一个自研文件系统。做法是把所有文件放在内存里，用一个专门的 Web Worker 处理所有读写，通过 postMessage（浏览器主线程和 Worker 通信的 API）来传消息。

结果在像 React 这样的项目里，几千个小文件堆积在队列里，Worker 顶不住，性能暴跌，甚至 UI 卡死。

💪 Bolt 是怎么解决的

Bolt 最终用 Rust 写了一个文件系统。Rust 的优势是性能接近 C，没有 GC 停顿，而且内存安全有保证，正好符合 “模拟操作系统内核” 的需求。结合 Atomics API，就能实现 Node 期望的原子写和文件锁，保证线程安全，效果和 Linux 一样。

当你打开一个 Bolt 标签页时，文件系统模块会被加载进一个 SharedArrayBuffer（共享内存块），所有 Web Worker 都能同时访问。每个 Worker 拿到这块内存的引用，把它当成 “硬盘”。因为是直接在共享内存里读写，不需要复制 JSON，也不依赖慢吞吞的异步存储（比如 IndexedDB 或 OPFS），速度比之前的 postMessage 方案快得多。

最后，这些 Rust 代码在构建时会编译成 WebAssembly (WASM)，所以任何现代浏览器都能以接近原生的速度运行。最终得到的是一个高性能、抗崩溃的文件系统，完全满足 Node 的需求。

2. 真实的进程和线程模型

现代 Node 应用并不是单线程的。当你运行 npm run dev 时，Node 可能会：

• 在一个进程里运行 TypeScript 编译器

• 在另一个进程里启动 Vite 开发服务器

• 在后台保持 Jest 测试框架待命

• 为计算密集型任务起一堆 Worker 线程

🛑 为什么浏览器里难以实现

浏览器内部，只有一个 UI 主线程和有限的 Web Worker。Worker 不能像操作系统进程那样 fork 新进程、共享已打开的文件或 socket，也不能处理系统信号。而 Node 的工具链正是依赖这些操作系统能力，所以浏览器的并发模型根本不够用。

💪 Bolt 是怎么解决的

A、用 Web Worker 模拟进程

每一个 Node “进程” 就是一个 Worker。一个轻量的 Rust “内核” 维护任务列表，并提供函数接口，让 ps、kill 等命令照常工作。

B、共享内存空间

所有 Worker 使用同一个 SharedArrayBuffer，直接读写字节。Atomics 提供锁和写，确保文件系统并发安全，同时还能实现快速的进程间通信，让整个运行时更像一个操作系统。

C、信号 & 标准输入输出模拟

在 Unix 系统里，可以通过发送信号（如 SIGTERM）来终止进程，并通过 stdout/stderr 读取日志和错误。但浏览器没有这些能力。Bolt 的做法是：

• 内核用内存里的小标记请求任务停止，Worker 检测到后干净地退出。

• 每个 Worker 有自己的日志缓冲区写入输出，终端直接从中读取。

D、自定义 Shell

因为不可能在浏览器里嵌入完整的 Bash，Bolt 自研了一个叫 JSH 的 TypeScript Shell。它支持常见命令（cd、ls、npm run dev）、方向键历史等常用功能。

【第3414期】提升ServiceWorker性能的新特性

在底层，每条命令都会在一个 Web Worker 里执行，但 JSH 把所有输入输出都汇聚到一个终端面板里，让人感觉就像在用本地的 shell。

一个运行在浏览器里的 Node.js Bash 终端🤯

3. 没有 localhost 的网络

开发服务器通常会绑定到 127.0.0.1:PORT 来运行和测试应用。

🛑 为什么在浏览器里是个问题

运行在浏览器里的代码无法监听端口。沙盒只允许页面通过 fetch() 或 WebSocket 发起请求。没有原生的 TCP API，也没有 listen()，所以没有真正的 localhost。

💪 Bolt 的解决方案

A、虚拟 localhost（基于 Service Worker）

Service Worker 监听页面里的特殊 URL（比如 /__bolt/3000/...）。当检测到时，就把请求交给对应端口的 Web Worker，通过 MessagePort 快速传递。对于开发服务器来说，这就像正常的 socket；对于页面来说，它只是另一个 fetch 请求。

B、热更新的 WebSocket 桥

Service Worker 同样拦截指向内部 URL 的 WebSocket 连接，打开到开发服务器 Worker 的通道，并在它们之间转发消息。这样 Vite/Next.js 的热更新能在几十毫秒内完成。

C、原生 TCP 的替代隧道

如果有代码尝试打开原生 TCP（比如 Postgres 客户端），Bolt 会替换成 WebSocket。浏览器连接到 Bolt 的中继服务器，由它来打开真正的 TCP 连接并双向转发字节。这样应用还能继续运行，同时浏览器依然保持沙盒隔离。

4. 标准兼容的 ES 模块（ESM）

现代 Node 同时支持 ESM（import ...）和传统 CommonJS（require()、__dirname 等）。如果 Bolt 不能同时在浏览器里支持两种模式，npm 生态里的大部分库都跑不起来。

🛑 为什么在浏览器里是个问题

浏览器确实有原生的 ESM，但规则有所不同：

• 基于 URL 的解析：浏览器通过绝对或相对 URL 获取模块，但 Node 使用 node_modules、package.json exports、文件扩展名等规则。

• 缺少 CommonJS：require()、module.exports 以及动态 import 的技巧都不存在。

• Node 的 VM & loader API：像 vm.Module、createRequire 等功能由 C++ 写成，强依赖操作系统。

💪 Bolt 的解决方案

A、TypeScript 实现的 Node 风格解析器

一个自定义加载器完整复刻了 Node 的行为：逐级查找目录、读取 package.json、支持 exports/imports、补齐扩展名、回退到 index.js 等。

B、ESM ↔ CommonJS 桥

当模块调用 require('./utils') 时，Bolt 的加载器会检测到，并把 CJS 代码包裹在一个小函数里，再注入到依赖图中。这样 ESM 和 CJS 可以无缝互相导入。

C、虚拟 Node 内部 API

Rust/WASM 内核暴露了一个假的 process 对象（env、argv、cwd），以及一个精简版 vm API，提供 Babel、TypeScript 等工具所需的接口。

5. 启动和运行时性能

Bolt 必须给人一种 “就像本地打开文件夹” 的感觉，但实际上浏览器要加载一个 Node 级的运行时和成千上万个项目文件。

🛑 为什么在浏览器里很难

• 下载量大：Node 兼容运行时加各种工具可能有几十 MB。

• 成千上万个小文件：逐个解压会卡死 UI。

• 安装慢：npm install 网络消耗大，对文件系统要求高。

• CPU 和内存紧张：长时间编译或 GC 暂停会让标签页假死。

💪 Bolt 的解决方案

A、精简运行时包

在 Rust → WASM 的构建中，去掉无用代码、调试符号和庞大的 Unicode 表，把冷启动下载量压缩到 10 MB 以下。

B、快照式文件系统

把整个 node_modules 树和项目源码打包成一个压缩 blob。首次加载时直接流式写入共享内存。之后访问就从 HTTP 缓存复制，只需几百毫秒，而不是几秒钟。

C、即时安装

热门依赖在 Bolt 的 CDN 上以预压缩层存储。首次加载后会缓存在浏览器里，所以 npm install 往往能在 500 毫秒内完成，甚至直接跳过。

D、主线程外执行

编译和构建在 Web Worker 中运行，并定期让出执行权，确保 UI 主线程流畅，GC 停顿对用户不可见。

引爆一切的那条推文

好技术 + 活下去 = 盈利 💲

WebContainer 无疑是令人惊叹的技术，但真正重要的是团队从未放弃。

“七年里我们一直坚持，即使结果看起来很差，但我们足够自律，不至于烧光资金。” Albert 说。

“正因为这种坚持，当 LLM 终于足够强大到能生成完整应用时，我们正好手里有缺失的那块拼图。”

突然间，WebContainer 不再只是一个聪明的运行时，而成了 AI 的完美搭档。凭它，一行提示就能变成一个完整的全栈应用。

Bolt 把业务迅速转向这个机会，只靠一条推文，七年的默默耕耘瞬间点燃，迎来了爆炸式增长。

关于本文译者：@飘飘作者：@Lior Neu-ner原文：https://newsletter.posthog.com/p/from-0-to-40m-arr-inside-the-tech