一句话先给结论
| 目录 | 一句话解释 |
|---|---|
node_modules/ | 开发时用的“零件仓库”（依赖源码） |
dist/ | 给浏览器用的“成品包”（最终可部署文件） |
node_modules 给“程序员和构建工具”用
dist 给“服务器和浏览器”用
一、node_modules/ 是干嘛的？
它是什么？
node_modules 是 npm / pnpm / yarn 安装下来的所有依赖包
node_modules/├── react/├── react-dom/├── axios/├── date-fns/├── vite/├── @radix-ui/└──...这些都是：
第三方库源码
构建工具源码
开发依赖
它在什么时候用？
开发 / 构建阶段
npm install npm run dev npm run build这时候：
Vite / Webpack 会从 node_modules 里
把你 import 的东西找出来
打包进 dist
关键点（非常重要）
❌ 浏览器不会直接读取 node_modules
❌ 生产服务器不会部署 node_modules
它只存在于：
开发机
CI/CD 构建机
为什么它这么大？
因为：
每个库又依赖别的库（依赖树）
JS 生态是“乐高套乐高”
大是正常的，删了也能重装
rm-rf node_modules npm install二、dist/ 是干嘛的？
它是什么？
dist 是 build 之后生成的最终产物
dist/├── index.html ├── assets/│ ├── index-8f3a9c.js │ ├── index-a12c.css │ └── logo-3fd2.svg这些文件是：
压缩过
hash 命名
不再是你写的源码
它在什么时候生成？
npm run build例如：
Vite
Webpack
CRA
它是给谁用的？
给服务器 + 浏览器用
浏览器 <–HTTP-- dist/
你部署时：
Nginx
CDN
S3
CloudFront
只需要 dist
三、它们之间的关系（关键理解）
你写的 src/↓import依赖 ↓ node_modules/↓ 构建工具 ↓ dist/↓ 浏览器运行node_modules 从不直接上线
dist 是唯一上线目录
四、为什么 .gitignore 里经常这样写？
node_modules/dist/原因不同 👇
忽略 node_modules
太大
可重装
平台相关
忽略 dist
每次 build 都不同
CI 可以重新生成
⚠️ 但注意：
某些前端仓库会提交 dist（如组件库）
应用项目通常不提交 dist
五、React + Vite 项目中的典型流程
# 开发 npm install # 生成 node_modules npm run dev # 用 node_modules # 构建 npm run build # 生成 dist # 部署 把 dist/上传到服务器六、和你熟悉的 Angular 对照一下
| Angular | React |
|---|---|
node_modules/ | node_modules/（完全一样） |
dist/app-name/ | dist/ |
ng build | npm run build |
ng serve | vite dev |
最后一句总结
node_modules 是原材料仓库，dist 是打包好的成品。
