如何加快Google Cloud Build中Angular应用的构建速度？

一、优化NPM依赖缓存策略 #

你当前仅缓存了.npm目录，建议直接缓存node_modules目录——因为npm ci会严格按照package-lock.json安装依赖，缓存node_modules能跳过大部分依赖下载和解压步骤，大幅缩短安装时间：

• 修改缓存步骤，将缓存路径改为node_modules，同时保持缓存key与依赖文件绑定：

  steps:
    # 恢复node_modules缓存
    - name: 'gcr.io/$PROJECT_ID/restore_cache'
      id: 'Restoring node_modules cache'
      args:
        - --bucket=gs://${PROJECT_ID}_cloudbuild
        - --key=node-modules-cache-$( checksum package.json )-$( checksum package-lock.json )
        - --key_fallback=node-modules-cache-
  
    - name: 'node:$_NODE_VERSION'
      entrypoint: npm
      id: 'Installing NPM dependencies'
      args:
        - ci
        - --prefer-offline
      # 缓存命中时，npm ci会自动跳过安装，无需额外判断
  
    # 保存node_modules缓存
    - name: 'gcr.io/$PROJECT_ID/save_cache'
      id: 'Saving node_modules cache'
      args:
        - --bucket=gs://${PROJECT_ID}_cloudbuild
        - --key=node-modules-cache-$( checksum package.json )-$( checksum package-lock.json )
        - --path=node_modules
        - --no-clobber
      waitFor: [ 'Installing NPM dependencies' ]
  

二、利用Docker层缓存优化依赖安装 #

Cloud Build支持Docker层缓存，你可以自定义包含已安装依赖的Docker镜像，避免每次构建重复执行依赖安装：

1. 编写Dockerfile，将依赖安装步骤提前，利用Docker分层缓存特性：

   FROM node:${_NODE_VERSION}
   
   # 设置工作目录
   WORKDIR /app
   
   # 先复制依赖文件，仅当package.json/package-lock.json变化时才会重新安装依赖
   COPY package*.json ./
   RUN npm ci --prefer-offline
   
   # 复制项目代码
   COPY . .
   
   # 执行Angular构建
   RUN npm run build
   

2. 修改Cloud Build配置，使用自定义Docker镜像构建并开启层缓存：

   steps:
     - name: 'gcr.io/cloud-builders/docker'
       id: 'Building Angular app with Docker cache'
       args: [
         'build',
         '--build-arg', '_NODE_VERSION=$_NODE_VERSION',
         '--cache-from', 'gcr.io/$PROJECT_ID/angular-build-cache:latest',
         '-t', 'gcr.io/$PROJECT_ID/angular-build-cache:latest',
         '.'
       ]
     # 推送缓存镜像，确保后续构建能复用分层缓存
     - name: 'gcr.io/cloud-builders/docker'
       args: ['push', 'gcr.io/$PROJECT_ID/angular-build-cache:latest']
     # 从Docker镜像中提取构建产物用于部署
     - name: 'gcr.io/cloud-builders/docker'
       args: ['cp', 'gcr.io/$PROJECT_ID/angular-build-cache:latest:/app/dist', '.']
     # 部署步骤
     - name: 'gcr.io/$PROJECT_ID/firebase'
       args: [ 'deploy', '--only=hosting' ]
   

三、其他优化建议 #

• 开启Angular构建优化：确保angular.json中启用aot和buildOptimizer，这能加快构建速度并减小产物体积：

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "aot": true,
        "buildOptimizer": true
      }
    }
  }
  

• 升级Node.js版本：使用最新LTS版本的Node.js，新版本在依赖安装、JS执行性能上有明显提升。
• 并行执行非依赖任务：如果项目有代码检查（如lint）等不依赖安装步骤的任务，可设置waitFor: ['-']让其与依赖安装并行执行，压缩总构建时长。

内容的提问来源于stack exchange，提问作者Paweł Ostromecki