Gitlab CI 环境下 Next.js 构建速度过慢，寻求可行优化方案

核心问题先确认：缓存.next目录的增量构建方案完全适用 #

针对你单页React Admin的场景，增量缓存方案适配性很高，不需要改动现有业务架构，调整构建配置即可生效。以下是可落地的优化方向：

1. 先解决Next.js 12 SWC未生效导致构建变慢的问题 #

你升级后构建耗时反而上升，大概率是两个配置错误导致：

• Dockerfile中NODE_OPTIONS配置放在了npm run build之后，构建阶段没有吃到4G内存限制，SWC编译时内存不足触发频繁GC，耗时反而高于Babel
• 项目如果存在babel.config.js/.babelrc自定义配置，Next.js 12会默认回退到Babel编译，相当于额外加载了SWC依赖却没有用到，额外增加开销

修复方案：

• 将Dockerfile中ARG NODE_OPTIONS和ENV NODE_OPTIONS两行移动到RUN npm run build之前
• 如无特殊Babel需求直接删除Babel配置文件，在next.config.js中开启SWC压缩：

  module.exports = {
    swcMinify: true,
  }
  

  如需保留Babel配置，可添加experimental: { forceSwcTransforms: true }强制启用SWC。

2. 适配Docker层缓存，实现增量构建复用 #

调整Dockerfile的层顺序和Next.js配置，最大化缓存命中率：

2.1 调整Dockerfile文件复制顺序 #

将不常变更的依赖、配置文件提前复制，避免代码变更导致依赖、Prisma生成步骤缓存失效：

FROM node:14-alpine

WORKDIR /app

RUN chown -R node:node /app

USER node

# 提前复制依赖和Prisma schema
COPY package.json yarn.lock prisma/schema.prisma ./prisma/

ENV NODE_ENV=production

RUN yarn install --frozen-lockfile --production
# Prisma生成提前到代码复制前，schema不变就可以复用缓存
RUN npm run generate

ARG NODE_OPTIONS=--max-old-space-size=4096
ENV NODE_OPTIONS $NODE_OPTIONS
ENV NEXT_TELEMETRY_DISABLED 1

# 最后复制业务代码
COPY . .

RUN npm run build

EXPOSE 3000

CMD ["yarn", "start"]

2.2 开启Next.js增量缓存配置 #

在next.config.js中添加配置，保留构建缓存：

module.exports = {
  // 关闭构建阶段的TS、ESLint检查，挪到CI前置任务执行，节省构建时间
  typescript: { ignoreBuildErrors: true },
  eslint: { ignoreDuringBuilds: true },
  // 生产环境关闭sourcemap，不需要可直接关闭
  productionBrowserSourceMaps: false,
  // 开启独立输出，减少构建产物体积
  output: 'standalone',
}

2.3 复用前序构建的.next缓存 #

CI构建阶段拉取旧缓存镜像后，将镜像内的/app/.next/cache目录提取到本地构建上下文，构建时复制到容器内，Next.js会自动识别增量缓存，仅编译变更的代码块，无需全量构建：

# 在docker build之前添加提取缓存的步骤
- docker pull $CACHE_IMAGE_NAME || true
- docker run --rm -v $(pwd)/.next-cache:/tmp $CACHE_IMAGE_NAME cp -r /app/.next/cache /tmp || true
- mkdir -p .next && mv .next-cache/cache .next/

3. CI缓存优化 #

如果不想每次从镜像提取缓存，可使用GitLab CI分布式缓存，仅缓存node_modules和.next/cache两个目录，缓存key按分支设置：

cache:
  key: $CI_PROJECT_ID-next-build-$CI_COMMIT_REF_SLUG
  paths:
    - node_modules/
    - .next/cache/
  policy: pull-push

仅缓存核心增量目录，体积远小于全量构建产物，不会产生大额拷贝开销。

内容的提问来源于stack exchange，提问作者Lukáš Stuchlík