Adding bundle analyser for frontend #3
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 # Adjust this based on your workflow | |
| workflow_dispatch: # Allows manual triggering of the workflow | |
| jobs: | |
| analyze: | |
| runs-on: ubuntu-latest | |
| steps: | |
| # 📌 Step 1: Checkout repository | |
| - name: Checkout repository | |
| uses: actions/checkout@v4 | |
| # 📌 Step 2: Setup Node.js | |
| - name: Setup Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: 22 | |
| cache: 'pnpm' | |
| # 📌 Step 3: Install pnpm (Fix for missing pnpm issue) | |
| - name: Install pnpm | |
| run: corepack enable && corepack prepare pnpm@latest --activate | |
| # 📌 Step 4: Verify pnpm installation | |
| - name: Verify pnpm installation | |
| run: pnpm --version | |
| # 📌 Step 5: Install dependencies | |
| - name: Install dependencies | |
| run: | | |
| cd frontend | |
| pnpm install | |
| # 📌 Step 6: Checkout and build `main` branch for comparison | |
| - name: Checkout main branch | |
| run: git fetch origin main && git checkout main | |
| - name: Build main branch | |
| run: | | |
| cd frontend | |
| pnpm build | |
| - name: Save main branch bundle size | |
| run: | | |
| cd frontend | |
| du -sh dist > main-bundle-size.txt || echo "0 KB" > main-bundle-size.txt | |
| # 📌 Step 7: Switch back to PR branch and build | |
| - name: Checkout PR branch | |
| run: git checkout "${{ github.event.pull_request.head.ref }}" | |
| - name: Build PR branch | |
| run: | | |
| cd frontend | |
| pnpm build | |
| - name: Save PR branch bundle size | |
| run: | | |
| cd frontend | |
| du -sh dist > pr-bundle-size.txt | |
| # 📌 Step 8: Compare both bundle sizes | |
| - name: Compare bundle sizes | |
| run: | | |
| cd frontend | |
| 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 9: Generate Visualizer Report | |
| - name: Generate Visualizer Report | |
| run: | | |
| cd frontend | |
| pnpm build | |
| # 📌 Step 10: Upload bundle analysis report | |
| - name: Upload bundle analysis report | |
| uses: actions/upload-artifact@v4 | |
| with: | |
| name: bundle-analysis | |
| path: frontend/dist/stats.html | |
| # 📌 Step 11: 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 }}) |