09 - 前端部署的本质：构建产物是一堆静态文件

进入前端部署。很多人觉得前端部署很玄乎，其实一旦看清它的本质，你会发现它简单得出奇。这一章我们就把这层窗户纸捅破。

你写的代码 ≠ 上线跑的东西

你在开发时写的是 .vue、.jsx、.ts，还用了各种依赖、语法糖。但浏览器看不懂这些，它只认最原始的三样东西：

• HTML：页面结构
• CSS：样式
• JavaScript：交互逻辑

所以上线前，要先经过一步构建（build），把你写的现代代码”翻译 + 打包”成浏览器能直接吃的 HTML/CSS/JS。

npm run build 到底做了什么

当你执行：

npm run build

工具（Vite/Webpack 等）会做这些事：

• 把 .vue/.jsx/.ts 编译成浏览器认识的 JS
• 把所有代码打包、压缩、混淆（变小、变快）
• 处理图片、字体等资源
• 最终产出一个 dist/（或 build/）目录

打开这个 dist/ 目录，你会看到大概这样：

dist/
├── index.html          ← 入口页面
├── assets/
│   ├── index-a1b2c3.js  ← 打包压缩后的 JS
│   ├── index-d4e5f6.css ← 打包压缩后的 CSS
│   └── logo-x7y8.png    ← 图片等资源
└── favicon.ico

这就是前端部署真正要发布的东西——一堆静态文件。

关键认知：这些文件不需要”运行”

这是前端和后端最大的区别：

• 后端：是一个要一直运行的程序，用户请求来了它现算现给（要 CPU、要内存、要保活）。
• 前端产物：是做好的成品文件，用户来了直接把文件下载下去，在用户自己的浏览器里运行。

所以前端”部署”，根本不需要一台”运行程序的服务器”，只需要一个能存文件、并把文件发给访问者的地方。

类比：后端像餐厅厨房（现点现做），前端产物像便利店货架上的预包装食品（早就做好了，顾客自取）。你只需要一个货架，不需要厨师。

那”货架”用什么？

既然前端只是一堆等着被下载的静态文件，我们要的就是一个”专门存文件、供人下载”的服务。这正是 OSS（对象存储） 的本职工作；再配上 CDN 让全国人都下载得快。

这也解释了为什么前端部署可以做得如此简单、如此便宜：

• 不用买服务器、不用装环境、不用守进程
• 传上去就行，更新就是覆盖文件
• 按存储和流量付费，量小时几乎不花钱

小结

• 你写的代码浏览器看不懂，要先 build 翻译打包成 HTML/CSS/JS。
• 构建产物是 dist/ 目录里的一堆静态文件。
• 关键本质：这些文件不需要”运行”，只需要被存起来、供用户下载，在用户浏览器里跑。
• 所以前端部署 = 找个”货架”把文件放上去 → 这个货架就是 OSS + CDN。

下一章我们就来认识这个货架的两位主角：OSS 和 CDN，以及它们为什么要配合使用。

下一章 → 10 - 什么是 OSS 和 CDN，为什么要配合用