GitHub Action构建Angular8耗时长 依赖安装慢优化方案咨询

问题现状 #

当前Angular 8项目的GitHub Action构建部署工作流总耗时达20分钟，其中依赖安装环节耗时13分钟，判断为缓存机制失效导致耗时异常，执行步骤参考：GitHub Action 步骤截图（依赖安装耗时13分钟）

核心问题根因 #

• 现有缓存配置仅缓存了npm全局下载目录~/.npm，未适配Node.js 14自带npm 6版本的缓存逻辑，npm ci执行时仍会逐包向远程源发起校验请求，缓存利用率不足10%
• 依赖的Action版本过旧：actions/setup-node@v1、actions/checkout@v1/v2、制品上传下载相关Action均为3年以上的旧版本，本身执行效率低，且setup-node v1不支持官方维护的自动缓存能力，自定义缓存的key规则、恢复逻辑存在缺陷，命中率极低
• Angular构建未开启增量编译缓存，每次执行全量编译拉长构建时长
• GitHub Pages部署Action版本过旧，文件上传、同步逻辑效率差

具体调整方案 #

1. 升级所有Action到最新稳定版 #

替换所有存在性能问题的旧版本Action，官方新版本在缓存处理、文件IO速度上比旧版本快2-3倍：

• actions/checkout@v1/v2 替换为 actions/checkout@v4
• actions/setup-node@v1 替换为 actions/setup-node@v4，使用其内置的npm缓存能力，无需自行编写复杂的缓存匹配规则
• actions/upload-artifact@v1/actions/download-artifact@v1 替换为v4版本，同时给临时构建制品设置1天的保留期，减少不必要的文件存储传输耗时
• JamesIves/github-pages-deploy-action@v3 替换为v4版本，直接使用工作流自动生成的GITHUB_TOKEN即可完成部署，无需单独配置密钥。

2. 修正依赖缓存与安装逻辑 #

• 给actions/setup-node@v4添加cache: 'npm'参数，Action会自动根据package-lock.json的哈希值生成缓存key，同时缓存npm全局下载目录和必要的依赖元数据，缓存命中率可达95%以上
• 执行npm ci时添加--prefer-offline参数，跳过npm默认的远程包校验逻辑，优先使用本地缓存资源，避免无意义的网络请求
• 移除原有自定义的冗余缓存步骤和无意义的npm list检查步骤，减少不必要的执行耗时。

3. 开启Angular增量构建缓存 #

Angular 8.1及以上版本原生支持构建缓存，在项目angular.json根节点添加如下配置，开启CI环境下的增量编译：

{
  "cli": {
    "cache": {
      "enabled": true,
      "path": ".angular/cache",
      "environment": "ci"
    }
  }
}

额外添加一个缓存步骤缓存.angular/cache目录，二次构建时直接复用未改动文件的编译结果，构建耗时可缩短60%以上。

优化后完整工作流配置 #

可直接替换原有main.yml内容：

name: Angular GitHub CI
on:
  push:
    branches:
      - main

jobs:
  ci:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v4

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'

      - name: Cache Angular build cache
        uses: actions/cache@v4
        with:
          path: .angular/cache
          key: ${{ runner.os }}-angular-build-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-angular-build-

      - name: Install Dependencies
        run: npm ci --prefer-offline

      - name: Build & CI
        run: npm run build:ci

      - name: Archive build
        if: success()
        uses: actions/upload-artifact@v4
        with:
          name: deploy_dist
          path: dist
          retention-days: 1

  deploy:
    runs-on: ubuntu-latest
    needs: ci
    permissions:
      contents: write
    steps:
      - name: Download build artifact
        uses: actions/download-artifact@v4
        with:
          name: deploy_dist

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages
          FOLDER: deploy_dist/hello-world

优化后预期效果 #

• 依赖安装环节：缓存命中时耗时从13分钟降至30秒-1分钟，首次执行或lockfile变更时耗时也可控制在3分钟以内
• 整体工作流耗时：从20分钟压缩至3-5分钟区间，符合Angular 8项目CI/CD的正常耗时水平。

内容的提问来源于stack exchange，提问作者dante alighieri