Improve build performance 2x (#18449)

## Summary

Front Before:
<img width="1199" height="670" alt="image"
src="https://github.com/user-attachments/assets/b978f67c-c0a6-49fc-bedd-a443f11c365d"
/>

Front After:
<img width="1199" height="670" alt="image"
src="https://github.com/user-attachments/assets/a4939dbb-a8b4-4c74-978c-daa7f27d00f3"
/>


Server Before:
<img width="1199" height="670" alt="image"
src="https://github.com/user-attachments/assets/da53e97f-ec65-4224-a656-ca41040aef6e"
/>


Server After:
<img width="1199" height="670" alt="image"
src="https://github.com/user-attachments/assets/8cdf3885-f515-4d6c-989f-a421a4e8206c"
/>


### CI Server Pipeline Restructuring
- Split monolithic `server-setup` job into three parallel jobs:
`server-build`, `server-lint-typecheck`, and `server-validation`
- `server-build` only handles build + Nx cache save (~1m vs old 3.5m),
unblocking downstream jobs faster
- `server-lint-typecheck` runs in parallel with no DB dependency
- `server-validation` handles DB setup, migration checks, and GraphQL
generation checks in parallel with tests
- Make `server-test` (unit tests) fully independent — no longer waits
for server-setup, builds its own artifacts
- Increase integration test shards from 8 to 10 for better parallelism
- Expected critical path reduction: ~10m → ~7m (~30% faster)

### CI Front Pipeline Improvements
- Use artifact upload/download for storybook build instead of rebuilding
in test shards
- Serve pre-built storybook via `http-server` in test jobs, with
`STORYBOOK_URL` env var
- Update `vitest.config.ts` to use `storybookUrl` when `STORYBOOK_URL`
is set
- Remove redundant `twenty-shared`, `twenty-ui`, `twenty-sdk` builds
from storybook test shards

### Vite Build Optimizations
- Conditionally enable `rollup-plugin-visualizer` behind `ANALYZE=true`
env var (not loaded by default)
- Broaden Istanbul coverage exclusions to skip test files, stories,
mocks, and decorators
- Remove `@tabler/icons-react` alias from twenty-front and storybook
configs
- Bundle `@tabler/icons-react` into twenty-ui instead of treating it as
an external dependency
- Add lazy loading with `React.lazy` + `Suspense` for all page-level
route components in `useCreateAppRouter`

.github/workflows/ci-front.yaml

@@ -62,6 +62,12 @@ jobs:
         run: npx nx reset:env twenty-front
       - name: Front / Build storybook
         run: npx nx storybook:build twenty-front
+      - name: Upload storybook build
+        uses: actions/upload-artifact@v4
+        with:
+          name: storybook-static
+          path: packages/twenty-front/storybook-static
+          retention-days: 1
       - name: Save storybook build cache
         uses: ./.github/actions/save-cache
         with:
@@ -78,6 +84,7 @@ jobs:
     env:
       SHARD_COUNTER: 4
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
+      STORYBOOK_URL: http://localhost:6006
     steps:
       - name: Fetch local actions
         uses: actions/checkout@v4
@@ -85,19 +92,33 @@ jobs:
           fetch-depth: 10
       - name: Install dependencies
         uses: ./.github/actions/yarn-install
+      - name: Restore storybook build cache
+        uses: ./.github/actions/restore-cache
+        with:
+          key: ${{ env.STORYBOOK_BUILD_CACHE_KEY_FOR_RESTORE_ACTION }}
+      - name: Clean stale storybook vitest cache
+        run: rm -rf packages/twenty-front/node_modules/.cache/storybook
       - name: Build dependencies
         run: |
           npx nx build twenty-shared
           npx nx build twenty-ui
           npx nx build twenty-sdk
+      - name: Download storybook build
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-static
+          path: packages/twenty-front/storybook-static
       - name: Install Playwright
         run: |
           cd packages/twenty-front
           npx playwright install
       - name: Front / Write .env
         run: npx nx reset:env twenty-front
-      - name: Run storybook tests
-        run: npx nx storybook:test twenty-front --configuration=${{ matrix.storybook_scope }} --shard=${{ matrix.shard }}/${{ env.SHARD_COUNTER }}
+      - name: Serve storybook & run tests
+        run: |
+          npx http-server packages/twenty-front/storybook-static --port 6006 --silent &
+          timeout 30 bash -c 'until curl -sf http://localhost:6006 > /dev/null 2>&1; do sleep 1; done'
+          npx nx storybook:test twenty-front --configuration=${{ matrix.storybook_scope }} --shard=${{ matrix.shard }}/${{ env.SHARD_COUNTER }}
       # - name: Rename coverage file
       #   run: |
       #     if [ -f "packages/twenty-front/coverage/storybook/coverage-final.json" ]; then
@@ -214,6 +235,7 @@ jobs:
     runs-on: ubuntu-latest-8-cores
     env:
       NODE_OPTIONS: "--max-old-space-size=10240"
+      ANALYZE: "true"
     steps:
       - name: Cancel Previous Runs
         uses: styfle/cancel-workflow-action@0.11.0

.github/workflows/ci-server.yaml

@@ -13,7 +13,7 @@ concurrency:
   cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
 
 env:
-  SERVER_SETUP_CACHE_KEY: server-setup
+  SERVER_BUILD_CACHE_KEY: server-build
 
 jobs:
   changed-files-check:
@@ -27,11 +27,59 @@ jobs:
         packages/twenty-front/src/generated-metadata/**
         packages/twenty-emails/**
         packages/twenty-shared/**
-  server-setup:
+
+  server-build:
     needs: changed-files-check
     if: needs.changed-files-check.outputs.any_changed == 'true'
     timeout-minutes: 30
     runs-on: ubuntu-latest-8-cores
+    steps:
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 10
+      - name: Install dependencies
+        uses: ./.github/actions/yarn-install
+      - name: Restore server build cache
+        id: restore-server-build-cache
+        uses: ./.github/actions/restore-cache
+        with:
+          key: ${{ env.SERVER_BUILD_CACHE_KEY }}
+      - name: Build twenty-shared
+        run: npx nx build twenty-shared
+      - name: Server / Write .env
+        run: npx nx reset:env twenty-server
+      - name: Server / Build
+        run: npx nx build twenty-server
+      - name: Save server build cache
+        uses: ./.github/actions/save-cache
+        with:
+          key: ${{ steps.restore-server-build-cache.outputs.cache-primary-key }}
+
+  server-lint-typecheck:
+    needs: changed-files-check
+    if: needs.changed-files-check.outputs.any_changed == 'true'
+    timeout-minutes: 30
+    runs-on: ubuntu-latest-8-cores
+    steps:
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 10
+      - name: Install dependencies
+        uses: ./.github/actions/yarn-install
+      - name: Build twenty-shared
+        run: npx nx build twenty-shared
+      - name: Server / Run lint & typecheck
+        uses: ./.github/actions/nx-affected
+        with:
+          tag: scope:backend
+          tasks: lint,typecheck
+
+  server-validation:
+    needs: server-build
+    timeout-minutes: 30
+    runs-on: ubuntu-latest-8-cores
     services:
       postgres:
         image: twentycrm/twenty-postgres-spilo
@@ -58,18 +106,12 @@ jobs:
           fetch-depth: 10
       - name: Install dependencies
         uses: ./.github/actions/yarn-install
-      - name: Restore server setup
-        id: restore-server-setup-cache
+      - name: Restore server build cache
         uses: ./.github/actions/restore-cache
         with:
-          key: ${{ env.SERVER_SETUP_CACHE_KEY }}
+          key: ${{ env.SERVER_BUILD_CACHE_KEY }}
       - name: Build twenty-shared
         run: npx nx build twenty-shared
-      - name: Server / Run lint & typecheck
-        uses: ./.github/actions/nx-affected
-        with:
-          tag: scope:backend
-          tasks: lint,typecheck
       - name: Server / Write .env
         run: npx nx reset:env twenty-server
       - name: Server / Build
@@ -84,10 +126,8 @@ jobs:
         run: |
           timeout 30s npx nx run twenty-server:worker || exit_code=$?
           if [ $exit_code -eq 124 ]; then
-            # If timeout was reached (exit code 124), consider it a success
             exit 0
           elif [ $exit_code -ne 0 ]; then
-            # If worker failed for other reasons, fail the build
             exit $exit_code
           fi
       - name: Server / Start
@@ -120,11 +160,9 @@ jobs:
           fi
       - name: GraphQL / Check for Pending Generation
         run: |
-          # Run GraphQL generation commands
           npx nx run twenty-front:graphql:generate
           npx nx run twenty-front:graphql:generate --configuration=metadata
 
-          # Check if GraphQL generated files were modified
           if ! git diff --quiet -- packages/twenty-front/src/generated packages/twenty-front/src/generated-metadata; then
             echo "::error::GraphQL schema changes detected. Please run 'npx nx run twenty-front:graphql:generate' and 'npx nx run twenty-front:graphql:generate --configuration=metadata' and commit the changes."
             echo ""
@@ -137,14 +175,11 @@ jobs:
             echo ""
             exit 1
           fi
-      - name: Save server setup
-        uses: ./.github/actions/save-cache
-        with:
-          key: ${{ steps.restore-server-setup-cache.outputs.cache-primary-key }}
+
   server-test:
+    needs: server-build
     timeout-minutes: 30
     runs-on: ubuntu-latest-8-cores
-    needs: server-setup
     steps:
       - name: Fetch custom Github Actions and base branch history
         uses: actions/checkout@v4
@@ -152,10 +187,12 @@ jobs:
           fetch-depth: 10
       - name: Install dependencies
         uses: ./.github/actions/yarn-install
-      - name: Restore server setup
+      - name: Restore server build cache
         uses: ./.github/actions/restore-cache
         with:
-          key: ${{ env.SERVER_SETUP_CACHE_KEY }}
+          key: ${{ env.SERVER_BUILD_CACHE_KEY }}
+      - name: Build twenty-shared
+        run: npx nx build twenty-shared
       - name: Server / Run Tests
         uses: ./.github/actions/nx-affected
         with:
@@ -165,11 +202,11 @@ jobs:
   server-integration-test:
     timeout-minutes: 30
     runs-on: ubuntu-latest-8-cores
-    needs: server-setup
+    needs: server-build
     strategy:
       fail-fast: false
       matrix:
-        shard: [1, 2, 3, 4, 5, 6, 7, 8]
+        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
     services:
       postgres:
         image: twentycrm/twenty-postgres-spilo
@@ -207,7 +244,7 @@ jobs:
       ANALYTICS_ENABLED: true
       CLICKHOUSE_URL: "http://default:clickhousePassword@localhost:8123/twenty"
       CLICKHOUSE_PASSWORD: clickhousePassword
-      SHARD_COUNTER: 8
+      SHARD_COUNTER: 10
     steps:
       - name: Fetch custom Github Actions and base branch history
         uses: actions/checkout@v4
@@ -223,10 +260,10 @@ jobs:
           echo "BILLING_STRIPE_BASE_PLAN_PRODUCT_ID=test-base-plan-product-id" >> .env.test
           echo "BILLING_STRIPE_WEBHOOK_SECRET=test-webhook-secret" >> .env.test
           echo "BILLING_PLAN_REQUIRED_LINK=http://localhost:3001/stripe-redirection" >> .env.test
-      - name: Restore server setup
+      - name: Restore server build cache
         uses: ./.github/actions/restore-cache
         with:
-          key: ${{ env.SERVER_SETUP_CACHE_KEY }}
+          key: ${{ env.SERVER_BUILD_CACHE_KEY }}
       - name: Server / Build
         run: npx nx build twenty-server
       - name: Build dependencies
@@ -247,11 +284,20 @@ jobs:
           tasks: 'test:integration'
           configuration: 'with-db-reset'
           args: --shard=${{ matrix.shard }}/${{ env.SHARD_COUNTER }}
+
   ci-server-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
     runs-on: ubuntu-latest
-    needs: [changed-files-check, server-setup, server-test, server-integration-test]
+    needs:
+      [
+        changed-files-check,
+        server-build,
+        server-lint-typecheck,
+        server-validation,
+        server-test,
+        server-integration-test,
+      ]
     steps:
       - name: Fail job if any needs failed
         if: contains(needs.*.result, 'failure')