如何缩减React项目体积？解决create-react-app初始化耗时长问题

问题结论 #

你遇到的情况完全不正常。正常使用npx create-react-app初始化的React项目，node_modules体积通常在300MB~800MB区间，正常环境下安装耗时不会超过10分钟。
导致你遇到异常的常见原因如下：

• 包管理器版本过旧，依赖扁平化逻辑存在缺陷，会重复安装多份相同版本的依赖
• 本地磁盘为机械硬盘（HDD），对node_modules内海量小文件的读写性能极差，拖慢安装和文件操作速度
• 包管理器本地缓存损坏，导致安装阶段反复校验文件

可行解决方案 #

1. 替换轻量项目初始化工具 #

停止使用已经停止官方维护的create-react-app，改用Vite作为React项目脚手架。Vite原生做了依赖精简，初始化的基础React项目node_modules体积仅200MB左右，安装耗时通常在1分钟以内，初始化命令：

# npm 初始化
npm create vite@latest my-app -- --template react
# 如需TypeScript支持，替换为 --template react-ts

2. 更换包管理器为pnpm #

pnpm采用全局内容寻址存储+硬链接的依赖管理机制，所有项目的依赖只会在全局磁盘存储一份，不同项目直接通过硬链接引用，不会重复占用空间。使用pnpm安装依赖时，已经下载过的依赖不会重复下载，直接本地链接，安装速度是npm的3~10倍，完全避免重复占用磁盘空间的问题。
安装pnpm后，初始化项目的命令为：

pnpm create vite my-app --template react

3. 自定义预置项目模板 #

你可以根据自身开发习惯提前搭建通用项目模板，配置好路由、状态管理、代码规范等常用配置，仅保留核心代码和package.json文件，删除node_modules后作为模板存档。后续需要开新项目时，直接复制模板文件夹，执行pnpm install，几秒内就能完成依赖安装，直接开始编码。

小提示：平时转移、复制项目时，不需要携带node_modules文件夹，直接删除后复制到目标位置再安装依赖，速度比复制完整的node_modules快几十倍。

内容的提问来源于stack exchange，提问作者Francisco Martínez Ramos