如何配置Angular构建：仅静态资源变更时跳过全量TypeScript编译

Angular CLI原生的ng build确实没有提供直接的配置参数来实现「仅静态资源变更时跳过全量构建」的需求，但可以通过自定义脚本或CI/CD流水线配置来实现这个目标，下面是具体的实现方案：

一、自定义脚本实现（本地/CI通用） #

核心思路是：先检测变更文件的范围，判断是否仅涉及src/assets或src/public，如果是则直接同步文件到dist目录，否则执行全量构建。

1. Git仓库场景（推荐） #

如果项目用Git管理，可以用Shell脚本结合Git命令来检测变更：

#!/bin/bash

# 获取当前提交与上一次提交的变更文件列表
CHANGED_FILES=$(git diff --name-only HEAD^ HEAD)

# 检查是否存在非静态资源目录外的变更
if echo "$CHANGED_FILES" | grep -qvE "^src/(assets|public)/"; then
  echo "检测到非静态资源变更，执行全量构建..."
  ng build --configuration production
else
  echo "仅静态资源变更，直接同步文件到dist目录..."
  # 同步assets文件夹（--delete确保删除dist中已不存在的文件）
  rsync -av --delete src/assets/ dist/assets/
  # 同步public文件夹
  rsync -av --delete src/public/ dist/public/
fi

注意：

• 确保angular.json中assets配置的输出路径与dist中的目录一致（默认就是dist/assets）
• 如果是多项目Workspace，需要调整dist的路径（比如dist/your-project-name/assets）

2. 非Git场景 #

如果不用Git，可以通过对比文件修改时间来判断，比如用Node.js脚本：

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

const staticDirs = ['src/assets', 'src/public'];
const distDir = 'dist';

// 获取所有非静态目录的文件最后修改时间
function getNonStaticFilesMtime() {
  let maxMtime = 0;
  function traverse(dir) {
    const files = fs.readdirSync(dir);
    for (const file of files) {
      const fullPath = path.join(dir, file);
      const stats = fs.statSync(fullPath);
      if (stats.isDirectory()) {
        // 跳过静态目录
        if (staticDirs.includes(fullPath)) continue;
        traverse(fullPath);
      } else {
        if (stats.mtime.getTime() > maxMtime) {
          maxMtime = stats.mtime.getTime();
        }
      }
    }
  }
  traverse('src');
  return maxMtime;
}

// 获取dist目录的最后构建时间（用index.html作为标记）
const distBuildMarker = path.join(distDir, 'index.html');
const distMtime = fs.existsSync(distBuildMarker) ? fs.statSync(distBuildMarker).mtime.getTime() : 0;

const nonStaticMtime = getNonStaticFilesMtime();

if (nonStaticMtime > distMtime) {
  console.log('非静态资源有变更，执行全量构建');
  execSync('ng build --configuration production', { stdio: 'inherit' });
} else {
  console.log('仅静态资源变更，同步文件到dist');
  // 同步assets
  execSync(`rsync -av --delete src/assets/ ${path.join(distDir, 'assets')}/`, { stdio: 'inherit' });
  // 同步public
  execSync(`rsync -av --delete src/public/ ${path.join(distDir, 'public')}/`, { stdio: 'inherit' });
}

二、CI/CD流水线配置 #

在CI/CD（比如GitHub Actions、GitLab CI）中，可以直接把上述逻辑集成到流水线步骤中，避免每次全量构建。

GitHub Actions示例 #

name: Build and Deploy
on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 2 # 获取上一次提交用于对比变更

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Detect changes
        id: change-detection
        run: |
          CHANGED_FILES=$(git diff --name-only HEAD^ HEAD)
          if echo "$CHANGED_FILES" | grep -qvE "^src/(assets|public)/"; then
            echo "has_non_static_changes=true" >> $GITHUB_OUTPUT
          else
            echo "has_non_static_changes=false" >> $GITHUB_OUTPUT
          fi

      - name: Install dependencies
        if: steps.change-detection.outputs.has_non_static_changes == 'true'
        run: npm ci

      - name: Full production build
        if: steps.change-detection.outputs.has_non_static_changes == 'true'
        run: ng build --configuration production

      - name: Sync static assets
        if: steps.change-detection.outputs.has_non_static_changes == 'false'
        run: |
          rsync -av --delete src/assets/ dist/assets/
          rsync -av --delete src/public/ dist/public/

      - name: Deploy to server
        # 不管是全量构建还是同步静态资源，都执行部署
        run: |
          # 你的部署命令，比如scp dist/* user@server:/path/to/deploy

三、补充说明 #

• 本地开发场景：如果是本地开发时的构建，其实ng serve已经会自动增量更新静态资源，无需额外配置；只有在生产构建或需要生成dist目录时，才需要上述脚本。
• 依赖缓存：在CI场景中，即使执行全量构建，也可以通过缓存node_modules和Angular的构建缓存（.angular/cache）来加快构建速度。
• 路径匹配：如果你的静态资源目录路径不同，需要调整脚本中的正则表达式和路径参数。

内容的提问来源于stack exchange，提问作者Alex Pappas