Vite CI/CD 构建优化：缓存策略、并行构建、产物交付与自动化部署

# .github/workflows/ci.yml
name: CI
on:
  push:
    branches: [main]
  pull_request:

jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
        with:
          version: 9

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'          # 依赖缓存（自动）

      - name: 安装依赖
        run: pnpm install --frozen-lockfile

      - name: 类型检查
        run: pnpm typecheck

      - name: 单元测试
        run: pnpm test

      - name: 构建
        run: pnpm build

      - name: 上传产物
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/

- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'pnpm'          # actions 自动用 lockfile 做 key

- name: 缓存 pnpm store
  uses: actions/cache@v4
  with:
    path: ~/.pnpm-store
    key: pnpm-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
    restore-keys: |
      pnpm-${{ runner.os }}-

Vite 构建是「源码转换 + Rollup 打包」，每次都重新执行。
但依赖的 esbuild 预构建产物（.vite/deps）可以缓存。

- name: 缓存 Vite deps
  uses: actions/cache@v4
  with:
    path: |
      node_modules/.vite
    key: vite-deps-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}

jobs:
  lint:
    runs-on: ubuntu-latest
    steps: [checkout, setup, install, run lint]
  test:
    runs-on: ubuntu-latest
    needs: []             # 不依赖 lint，并行
    steps: [...]
  build:
    runs-on: ubuntu-latest
    needs: [test]         # 测试过才构建
    steps: [...]

strategy:
  matrix:
    shard: [1, 2, 3]
steps:
  - run: pnpm test --shard=${{ matrix.shard }}/3

- name: 上传 dist
  uses: actions/upload-artifact@v4
  with:
    name: dist-${{ github.sha }}
    path: dist/
    retention-days: 7

- name: 下载产物
  uses: actions/download-artifact@v4
  with:
    name: dist-${{ github.sha }}
    path: dist/

test -f dist/index.html && echo "✅ index.html 存在" || echo "❌ 构建不完整"
test -d dist/assets && echo "✅ assets 目录存在"
grep -q "/assets/" dist/index.html && echo "✅ 资源引用正确"

# vercel.json 可选（框架自动识别）
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite"
}

- name: 部署到 Vercel
  uses: amondnet/vercel-action@v20
  with:
    vercel-token: ${{ secrets.VERCEL_TOKEN }}
    vercel-org-id: ${{ secrets.ORG_ID }}
    vercel-project-id: ${{ secrets.PROJECT_ID }}
    vercel-args: '--prod'

- name: 部署到 Netlify
  uses: nwtgck/actions-netlify@v3
  with:
    publish-dir: './dist'
    production-branch: main
    deploy-message: "Deploy from CI"
  env:
    NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
    NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

- name: 部署 Pages
  uses: peaceiris/actions-gh-pages@v4
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./dist
# 注意：Pages 部署在 /<repo>/ 子路径 → vite.config 需 base: '/<repo>/'

aws s3 sync dist/ s3://bucket/app --delete --cache-control "public,max-age=31536000,immutable"
aws cloudfront create-invalidation --distribution-id XXX --paths "/index.html"

- name: Preview 部署
  if: github.event_name == 'pull_request'
  uses: amondnet/vercel-action@v20
  with:
    vercel-args: '--preview'      # 非生产

env:
  VITE_API_BASE: ${{ vars.VITE_API_BASE }}   # 环境级变量

# 构建时注入不同 API base
vite build --mode staging
vite build --mode production

# 本地复现 CI 步骤
CI=1 npm run build     # 模拟 CI 环境变量
npm run typecheck      # 单独跑类型