代码运行的三种状态与构建原理
4.2 三种运行模式
Tip
理解Dev、Build、Start三种运行模式的区别,学会在上线前正确构建和测试项目。
1. 为什么要学这个?
你在本地开发时,修改一个文字,页面只要0.1秒就更新了(热更新)。你觉得这很快。
但是,当你把项目部署到服务器,通过公网访问时,发现首屏加载可能要3秒。
或者反过来,你在本地觉得卡顿的动画,部署后却丝般顺滑。
为什么同一个网页,在"写代码"时和"给用户看"时表现完全不同?因为你处于不同的运行模式。
2. 核心概念
2.1 三大形态
如果把写代码比作写书:
-
Dev(开发模式):打草稿。满纸涂改液、修正带,旁边还有编辑的批注(报错信息)。优点是改得快,缺点是乱,没法给读者看。
-
Build(构建):排版印刷。把草稿里的废话删掉,压缩文字,优化图片,装订成册。这个过程是一次性的,产出的是一本"书"(静态文件)。
-
Start(生产模式):书店上架。读者直接买书看。没有涂改痕迹,打开速度最快,体验最好。
2.2 三种模式对比
| 模式 | 命令 | 作用 | 特征 |
|---|---|---|---|
| Dev | pnpm dev |
边写边看 | 支持热更新(HMR),包含详细错误堆栈,性能较差 |
| Build | pnpm build |
编译打包 | 将TS/React编译为JS/HTML,进行Tree-shaking,产出.next目录 |
| Start | pnpm start |
正式运行 | 运行构建后的产物,极致性能,无调试信息 |
3. 代码的三生三世
graph TD
subgraph Development["开发阶段(Dev)"]
A[源代码] -->|pnpm dev| B(开发服务器)
B -->|实时编译| C[浏览器]
end
subgraph Production["生产阶段(Prod)"]
A2[源代码] -->|pnpm build| D[构建产物]
D -->|.next文件夹| E(运行服务器)
E <-->|pnpm start| F[最终用户]
end
style B fill:#e1f5fe
style D fill:#fff9c4
style E fill:#e8f5e9
4. 操作实战
体验从"草稿"到"成品"的全过程:
# 1. 开发
pnpm dev
# 修改代码,浏览器自动更新。玩腻了按Ctrl+C停止。
# 2. 构建(至关重要,会告诉你代码有没有语法错误)
pnpm build
# 此时你会看到终端疯狂刷屏,生成页面列表。
# 如果报错(如TypeError),说明你虽然在dev模式能跑,但代码有隐患,不能上线。
# 3. 预览正式版
pnpm start
# 此时启动的服务器,才是真实用户体验到的速度。
5. 适用场景
| 🎯 场景 | 推荐模式 |
|---|---|
| 日常写代码 | Dev(pnpm dev):所见即所得的修改速度 |
| 准备上线前 | Build(pnpm build):检查代码是否有类型错误或编译错误 |
| 本地模拟上线 | Start(pnpm start):在本地真实模拟用户看到的性能和行为 |
6. 避坑指南
| ✅ 推荐做法 | ❌ 禁忌 |
|---|---|
| 上线前必跑build | 觉得dev能跑就直接把源码丢到服务器上运行 |
| 区分环境变量 | 在生产环境使用.env.local里的测试数据库地址 |
| 处理Build报错 | 看到Build报错直接用// @ts-ignore忽略它(掩耳盗铃) |
7. 真实案例
Story
2012年,Knight Capital的4.4亿美元噩梦
2012年8月1日,Knight Capital准备部署一套新代码来应对纽交所的规则变更。工程师们手动把新代码(Build产物)复制到了8台服务器上,但因操作失误,漏掉了第8台服务器。新代码复用了一个旧的配置开关Power Peg:在7台新服务器上,这个开关开启了新功能;在第8台旧服务器上,这个开关对应的还是8年前的旧代码逻辑(一个用于测试的自动买入脚本)。当股市开盘(Start),这台运行着"旧模式"的服务器发疯般地以错误价格购买股票。仅仅45分钟后,Knight Capital亏损4.4亿美元,直接破产被收购。
Vibe心法:Dev模式的成功只是虚假的安全感——永远不要跳过pnpm build直接部署。
8. 本章小结
- 📝 Dev(草稿):用于日常开发,写完即看,但性能差
- 🏗️ Build(出版):上线前必须执行的质检,检查所有类型和逻辑错误
- 🚀 Start(发行):真实用户看到的极速版本,必须运行在服务器上
- ⚠️ 上线前必跑build:环境一致性比逻辑正确更能保命