Adding bundle analyser for frontend #6
Workflow file for this run
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Bundle Analysis & Comparison | |
| on: | |
| pull_request: | |
| branches: | |
| - main | |
| workflow_dispatch: | |
| jobs: | |
| analyze: | |
| name: Bundle Analysis | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout repository | |
| uses: actions/checkout@v4 | |
| - name: Install pnpm | |
| uses: pnpm/action-setup@v4 | |
| with: | |
| version: 10 | |
| run_install: false | |
| - name: Set up Node | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: 22 | |
| cache: 'pnpm' | |
| cache-dependency-path: frontend/pnpm-lock.yaml | |
| - name: Install frontend dependencies | |
| working-directory: frontend | |
| run: pnpm install --frozen-lockfile | |
| - name: Set up environment variables | |
| working-directory: frontend | |
| run: | | |
| echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" >> .env.production | |
| echo "VITE_ENVIRONMENT=${{ secrets.VITE_ENVIRONMENT }}" >> .env.production | |
| echo "VITE_GRAPHQL_URL=${{ secrets.VITE_GRAPHQL_URL }}" >> .env.production | |
| echo "VITE_IDX_URL=${{ secrets.VITE_IDX_URL }}" >> .env.production | |
| echo "VITE_SENTRY_DSN=${{ secrets.VITE_SENTRY_DSN }}" >> .env.production | |
| # 📌 Step 1: Checkout and build `main` branch for comparison | |
| - name: Fetch main branch and checkout | |
| run: git fetch origin main && git checkout main | |
| - name: Build main branch | |
| working-directory: frontend | |
| run: pnpm build | |
| - name: Save main branch bundle size | |
| working-directory: frontend | |
| run: du -sh dist > main-bundle-size.txt || echo "0 KB" > main-bundle-size.txt | |
| # 📌 Step 2: Switch back to PR branch and build | |
| - name: Checkout PR branch | |
| run: git checkout "${{ github.event.pull_request.head.ref }}" | |
| - name: Build PR branch | |
| working-directory: frontend | |
| run: pnpm build | |
| - name: Save PR branch bundle size | |
| working-directory: frontend | |
| run: du -sh dist > pr-bundle-size.txt | |
| # 📌 Step 3: Compare both bundle sizes | |
| - name: Compare bundle sizes | |
| working-directory: frontend | |
| run: | | |
| echo "Main Branch Size:" > bundle-comparison.txt | |
| cat main-bundle-size.txt >> bundle-comparison.txt | |
| echo "\nPR Branch Size:" >> bundle-comparison.txt | |
| cat pr-bundle-size.txt >> bundle-comparison.txt | |
| echo "\n**Size Difference:**" >> bundle-comparison.txt | |
| diff main-bundle-size.txt pr-bundle-size.txt >> bundle-comparison.txt || true | |
| # 📌 Step 4: Generate Visualizer Report | |
| - name: Generate Visualizer Report | |
| working-directory: frontend | |
| run: pnpm build | |
| # 📌 Step 5: Upload bundle analysis report | |
| - name: Upload bundle analysis report | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: bundle-analysis | |
| path: frontend/dist/stats.html | |
| # 📌 Step 6: Comment PR with bundle size change summary | |
| - name: Comment bundle size changes | |
| uses: marocchino/sticky-pull-request-comment@v2 | |
| with: | |
| message: | | |
| 🔍 **Bundle Analysis Report** | |
| 📊 **Bundle Size Comparison:** | |
| ``` | |
| $(cat frontend/bundle-comparison.txt) | |
| ``` | |
| 📁 [Download the bundle analysis report](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) |