在前端开发中，dependencies 和 devDependencies 的核心区别在于：这个包是给“用户”用的，还是给“开发者”用的。
虽然它们都在 package.json 文件里，但用途和处理方式完全不同。
1. dependencies (生产依赖)
这是你的代码运行所必需的库。如果缺少这些包，你的程序在浏览器或服务器上就跑不起来。
- 用途：包含业务逻辑、UI 组件、工具函数等。
- 安装命令：
bun add <package>或npm install <package> - 典型例子：
- 框架：
vue,react - UI库：
element-plus,antd - 工具：
axios,lodash,dayjs
- 框架：
- 打包行为：当你运行
vite build时，打包工具会将这些库的代码混淆、压缩，最后包含在发给用户的.js文件中。
2. devDependencies (开发依赖)
这是只有在编写代码、测试或打包时才需要的工具。一旦项目上线，这些包就完成了使命，不再需要。
- 用途：编译工具、格式化插件、测试框架、类型定义。
- 安装命令：
bun add -d <package>或npm install -D <package> - 典型例子：
- 构建工具：
vite,webpack - 转译/语法：
typescript,@vitejs/plugin-vue - 代码规范：
eslint,prettier - 类型定义：
@types/node,@types/react
- 构建工具：
- 打包行为：它们不会被打包进最终发给用户的代码里。例如，用户的浏览器不需要
eslint来检查代码，也不需要vite来运行代码。
3. 直观对比表
| 特性 | dependencies | devDependencies |
|---|---|---|
| 谁需要它？ | 最终用户 (浏览器/服务器运行环境) | 开发者 (你的电脑/打包服务器) |
| 是否进产物？ | 是 (代码会被打包进去) | 否 (只在开发打包阶段起作用) |
| 安装标志 | bun add | bun add -d (或 --dev) |
| 逻辑比喻 | 盖房子需要的砖头、水泥 | 盖房子需要的脚手架、起重机 |
4. 为什么要分这么细？
- 减小线上包体积：如果把
vite这种大型工具也塞进dependencies，你的前端代码体积会瞬间爆炸，用户打开网页会非常慢。 - 清晰的项目结构：让团队成员一眼看出哪些是核心业务代码，哪些是开发辅助工具。
- 节省部署资源：在一些自动化部署（CI/CD）环境中，通过
bun install --production可以只安装生产环境需要的包，极大地加快部署速度并节省磁盘空间。
5. 如果装错了会怎样？
- 把
dependencies装到了devDependencies： 你在本地开发时没问题，但当你执行build之后部署到线上，程序可能会报错（例如：ReferenceError: Vue is not defined），因为生产环境里没把这个库打进去。 - 把
devDependencies装到了dependencies： 程序能跑，但你的项目产物会包含很多废代码，导致加载变慢。
一个简单的小窍门： 问自己：“如果我把这个包删了，用户在浏览器里点按钮还会生效吗？”
- 如果不生效了
放 dependencies。 - 如果只是我没法打包/没法写 TS 了，但已经生成的网页还能跑
放 devDependencies。
你想看看你当前项目里的 package.json，让我帮你分析一下有没有放错位置的包吗？