React/Next.js项目依赖包应放在dependencies还是devDependencies？

两类依赖的核心定义 #

• dependencies：项目线上运行阶段必须用到的依赖，包含所有业务代码运行、生产环境功能实现需要的代码包。
• devDependencies：仅在本地开发、代码编译、构建打包阶段用到的依赖，生产环境运行时完全不需要这些包的代码参与。

依赖类型选择的实际影响 #

这个影响要分项目类型判断：

1. 私有应用项目（也就是你示例中"private": true的项目）
   放错依赖类型不会导致线上功能故障，Next.js在执行next build时会自动做Tree Shaking，仅会将实际用到的代码打包进生产产物，不会因为你把dev依赖放到dependencies里就多打包冗余代码。
   仅有的影响是：
   • 执行npm install --production这类仅安装生产依赖的命令时，会遗漏必要依赖
   • 全量安装依赖时速度变慢、node_modules文件夹体积变大
     这也是很多开发者觉得两类依赖可以随便放的核心原因，仅做私有项目开发时，依赖类型放错不会直接导致线上故障。
2. 要发布到npm的公共包项目
   依赖类型放错会直接导致包不可用：用户安装你的公共包时，npm只会自动安装dependencies下的依赖，如果你把运行时必须的包放到devDependencies里，用户运行时会直接报模块缺失错误。

你给出的package.json优化建议 #

你当前的配置里把大量应该归到devDependencies的包放到了dependencies里，可按以下规则调整：

应当移到devDependencies的包 #

• 所有@types/开头的TypeScript类型定义包：类型仅在开发、编译阶段做类型校验用，生产运行完全不需要
• @next/bundle-analyzer：打包体积分析工具，仅开发阶段排查问题时使用
• prettier：代码格式化工具，仅开发阶段使用
• cross-env：跨平台环境变量设置工具，仅在执行本地脚本、构建命令时调用，生产运行不需要

保留在dependencies的包判定标准 #

只要你在业务代码里通过import引入，且实现线上功能必须用到的包都可以保留，比如react、next、UI组件库、axios、状态管理相关的包、sass、sharp这类Next.js运行时依赖等。

内容的提问来源于stack exchange，提问作者János