React项目Docker环境下Yarn Build耗时超5分钟的优化求助

问题描述 #

本地构建小型React项目，执行yarn build仅需约20秒，但在Docker环境中执行同一操作耗时超过5分钟。当前使用的Dockerfile如下：

### STAGE 1: Build
FROM node:14.17.0-alpine as build
WORKDIR /app

COPY . .

RUN yarn install
RUN yarn build

### STAGE 2: Run
FROM nginx:1.23.3-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY --from=build /app/nginx.conf /etc/nginx/nginx.conf

#EXPOSE 80
EXPOSE 443

两种场景的构建耗时报告：

• 包含node_modules包的情况
  
• 忽略node_modules包的情况
  

其中优化生产构建步骤耗时最长：

解决方案 #

1. 用Docker构建缓存优化依赖安装 #

当前COPY . .会把所有文件复制到容器，只要项目文件有变动，就会触发重新执行yarn install。调整文件复制顺序，先处理依赖配置，再复制项目代码，最大化利用缓存：

### STAGE 1: Build
FROM node:14.17.0-alpine as build
WORKDIR /app

# 先复制依赖配置文件，触发缓存
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# 再复制项目代码，仅代码变动时重新构建
COPY . .

RUN yarn build

### STAGE 2: Run
FROM nginx:1.23.3-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY --from=build /app/nginx.conf /etc/nginx/nginx.conf

EXPOSE 443

这样只有package.json或yarn.lock变动时才会重新安装依赖，否则直接复用缓存的依赖层，减少重复操作的耗时。

2. 增加Docker容器的资源分配 #

Docker默认分配的CPU、内存资源有限，React构建的代码压缩、优化属于CPU密集型操作，资源不足会大幅拖慢速度。可以在构建时手动增加资源：

• 用docker build命令时直接指定参数：

docker build --cpus 2 --memory 2g .

• 用Docker Compose的话，在docker-compose.yml中配置：

services:
  your-service-name:
    build: .
    deploy:
      resources:
        limits:
          cpus: '2.0'
          memory: 2G
        reservations:
          cpus: '1.0'
          memory: 1G

3. 替换Alpine镜像为标准Node镜像（可选） #

Alpine镜像使用musl libc，部分Node原生模块在该环境下的兼容性或性能不如基于Debian/Ubuntu的标准Node镜像。可以尝试替换镜像版本：

FROM node:14.17.0 as build

4. 优化React构建配置 #

• 检查自定义Webpack/Craco配置，暂时禁用非必要的代码分析、冗余插件，看是否能缩短构建时间；
• 如果用Create React App，升级到最新稳定版，新版本通常会优化构建流程和性能。

内容的提问来源于stack exchange，提问作者Abhinav Das