优化规模日益庞大的create-react-app项目构建时长

一、替换打包工具 #

• 换成Vite：替代create-react-app默认的webpack，Vite基于ES模块的开发构建速度快很多，生产构建效率也远高于webpack，官方有成熟的迁移指引，迁移成本可控
• 尝试TurboPack：Next.js团队推出的打包工具，构建速度是webpack的10倍以上，适合大型React项目，适配成本较低

二、优化缓存策略（解决之前npm install缓存无效的问题） #

• 精确缓存npm依赖：在GitLab CI里配置缓存node_modules路径，同时绑定package-lock.json或yarn.lock的哈希值作为缓存key，只有依赖变更时才重新安装。示例配置：

cache:
  key: ${CI_COMMIT_REF_SLUG}-node-modules-${CI_COMMIT_SHA:0:8}
  paths:
    - node_modules/
  policy: pull-push

• 缓存构建中间产物：webpack可以缓存node_modules/.cache/webpack目录，Vite缓存node_modules/.vite目录，让后续构建复用已编译的结果
• 用pnpm替代npm/yarn：pnpm的依赖安装速度更快，磁盘占用仅为npm的1/3，自带的全局缓存机制能大幅减少重复安装时间

三、优化GitLab Runner配置 #

• 升级Runner实例规格：构建是CPU密集型任务，AWS上换成c5.large或更高配置的实例，增加CPU和内存配额，直接提升构建速度
• 预热Docker镜像：提前把包含Node.js、pnpm等工具的镜像推到AWS ECR，Runner直接使用预热镜像，避免每次构建都重新拉取环境
• 启用并发构建：把项目拆分成多个独立模块（比如公共组件、业务页面），配置GitLab CI并行执行多个构建子任务，利用多核资源

四、拆分与简化构建流程 #

• 拆分构建和部署任务：先在Runner完成构建，把产物上传到S3，再启动单独任务完成AWS部署（比如CloudFront缓存刷新），避免两个环节互相阻塞
• 跳过无代码变更的构建：通过GitLab CI规则判断，若提交仅修改文档、配置文件，直接跳过构建步骤，执行部署即可
• 清理冗余代码与依赖：用depcheck工具检测未使用的依赖包，手动清理项目中的死代码，减少构建需要处理的文件量

五、落地增量构建 #

• webpack环境：使用hard-source-webpack-plugin配置持久化缓存，让第二次及以后的构建复用之前的编译结果，增量构建速度能提升50%以上
• Vite环境：默认支持增量构建，只要正确配置缓存目录，就能自动复用缓存，无需额外插件

内容的提问来源于stack exchange，提问作者Farshad Kazemi