Angular gh-pages项目优化：解决重复构建部署耗时问题

一、提升本地构建速度 #

1. 启用增量构建
   Angular 10+支持增量构建，可复用之前的构建缓存，大幅缩短后续构建时间。修改构建命令：

ng build --configuration=production --base-href https://roirtur.github.io/NDI2023/ --incremental

也可以在angular.json的production配置中添加"incremental": true，避免每次手动加参数：

"configurations": {
  "production": {
    // 已有配置
    "incremental": true,
    "tsConfig": "tsconfig.prod.json"
  }
}

2. 优化构建配置

• 确保angular.json的生产配置中开启aot和buildOptimizer（默认已开启），这两个选项会大幅优化构建产物和速度。
• 关闭不必要的SourceMap：生产环境默认关闭，若手动开启过，改回"sourceMap": false减少构建时间。
• 用ng build --stats-json生成构建统计文件，分析耗时模块，针对性优化（比如拆分大模块、替换体积大的依赖）。

3. 换用更快的包管理器
   用pnpm替代npm，依赖安装速度更快且缓存效率更高：

# 安装pnpm
npm install -g pnpm
# 安装依赖
pnpm install --frozen-lockfile
# 构建
pnpm exec ng build --configuration=production --base-href https://roirtur.github.io/NDI2023/

二、自动化构建与部署（无需手动执行命令） #

使用GitHub Actions实现代码推送后自动构建部署，无需本地跑命令，还能利用GitHub的缓存加速依赖安装：

在项目根目录创建.github/workflows/deploy.yml，内容如下：

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]
    # 仅当核心文件变更时触发，避免无用构建
    paths:
      - 'src/**'
      - 'angular.json'
      - 'package.json'
      - 'tsconfig*.json'

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20 # 替换为你项目兼容的Node版本
          cache: 'pnpm' # 缓存pnpm依赖，若用npm则改为'npm'

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build project
        run: pnpm exec ng build --configuration=production --base-href https://roirtur.github.io/NDI2023/

      - name: Deploy to gh-pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist/browser

配置完成后，每次向main分支推送代码，GitHub会自动完成构建和部署，无需手动操作。

三、避免不必要的构建 #

1. 路径过滤：上述GitHub Actions配置中已添加paths规则，仅当代码、配置等核心文件变更时才触发构建，修改README等非核心文件不会触发。
2. 本地预览确认：开发时用ng serve实时预览，确认内容无误后再推送代码，减少重复构建次数。
3. 静态内容动态加载（可选）：若频繁修改的是文本、图片等静态内容，可将这部分内容托管到外部存储（如GitHub Gist、后端接口），通过Angular动态拉取，无需每次构建整个项目。但此方法需要调整项目架构，适合静态内容变更极频繁的场景。
4. 跳过不必要的检查：若项目配置了lint、单元测试等GitHub检查流程，可将这些步骤与构建部署并行执行，或仅在必要分支运行，减少整体耗时。

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