[143] Frontend: Add performance budget and bundle analysis in CI

.github/workflows/ci.yml

@@ -147,3 +147,43 @@ jobs:
           name: build-output
           path: frontend/dist
           retention-days: 7
+
+  bundle-budget:
+    name: Bundle analysis & size budget
+    needs: [lint, test]
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: frontend
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build with rollup visualizer
+        run: pnpm run build:analyze
+
+      - name: Enforce size budget (size-limit)
+        run: pnpm run size
+
+      - name: Upload bundle analysis (treemap)
+        uses: actions/upload-artifact@v4
+        with:
+          name: bundle-stats
+          path: frontend/dist/stats.html
+          retention-days: 14

frontend/.size-limit.json

@@ -0,0 +1,8 @@
+[
+  {
+    "name": "All production JS/CSS (gzip)",
+    "path": ["dist/assets/*.js", "dist/assets/*.css"],
+    "limit": "2400 kB",
+    "gzip": true
+  }
+]

frontend/README.md

@@ -7,6 +7,11 @@ Currently, two official plugins are available:
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
+## Bundle size & analysis
+
+- **Budget (CI):** [`size-limit`](https://github.com/ai/size-limit) reads `dist/assets/*.{js,css}` after a production build; limits live in [`.size-limit.json`](./.size-limit.json).
+- **Treemap:** `pnpm run build:analyze` sets `ANALYZE=true`, runs `rollup-plugin-visualizer`, and writes `dist/stats.html`. The GitHub Actions **Bundle analysis & size budget** job uploads that file as the `bundle-stats` artifact.
+
 ## React Compiler
 
 The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

frontend/package.json

@@ -6,6 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "build:analyze": "cross-env ANALYZE=true tsc -b && cross-env ANALYZE=true vite build",
+    "size": "size-limit",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest run",
@@ -23,6 +25,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@size-limit/file": "^12.0.1",
     "@tailwindcss/postcss": "^4.2.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -34,12 +37,15 @@
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^5.1.1",
     "autoprefixer": "^10.4.24",
+    "cross-env": "^10.1.0",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "jsdom": "^28.1.0",
     "postcss": "^8.5.6",
+    "rollup-plugin-visualizer": "^7.0.1",
+    "size-limit": "^12.0.1",
     "tailwindcss": "^4.2.1",
     "typescript": "^5.6.0",
     "vite": "^7.3.1",