⚡️ perf(website): implement lazy loading and caching optimizations

.dockerignore

@@ -19,7 +19,7 @@ dist
 **/dist
 styled-system
 **/styled-system
-*.tsbuildinfo
+**/*.tsbuildinfo
 
 # Test artifacts (but keep tests/ directory for CI)
 test-results

.workflows/.build/packages/website/nginx/default.conf

@@ -19,13 +19,21 @@ http {
     gzip_min_length   256;
     gzip_vary         on;
     gzip_proxied      any;
-    gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript font/woff2;
     gzip_comp_level   9;
 
     root /usr/share/nginx/html;
     index index.html;
 
+    # Immutable hashed assets (JS, CSS, fonts, images) - cache for 1 year
+    location ~* \.(?:js|css|woff2?|ttf|eot|svg|png|jpg|jpeg|gif|webp|ico|webmanifest)$ {
+      add_header Cache-Control "public, max-age=31536000, immutable";
+      try_files $uri =404;
+    }
+
+    # HTML and other mutable files - always revalidate
     location / {
+      add_header Cache-Control "no-cache";
       try_files $uri $uri/ /index.html =404;
     }
   }

VERSION

@@ -1 +1 @@
-v1.0.3
+v1.0.4

packages/tools/package.json

@@ -3,14 +3,15 @@
     "type": "module",
     "private": true,
     "scripts": {
+        "build:metadata": "pnpm --filter @arrhes/application-metadata build",
         "generate": "pnpm drizzle-kit generate --config=./src/drizzle.config.ts",
-        "push": "tsx --env-file=.env ./src/push.ts",
+        "push": "pnpm run build:metadata && tsx --env-file=.env ./src/push.ts",
         "pull": "pnpm drizzle-kit introspect --config=./src/drizzle.config.ts",
         "migrate": "pnpm drizzle-kit migrate --config=./src/drizzle.config.ts",
-        "seed": "tsx --env-file=.env ./src/seed/seed.ts",
-        "migration": "tsx --env-file=.env ./src/seed/migration.ts",
-        "clear": "tsx --env-file=.env ./src/clearDB.ts",
-        "reset": "tsx --env-file=.env ./src/clearDB.ts && pnpm run push && tsx --env-file=.env ./src/seed/seed.ts",
+        "seed": "pnpm run build:metadata && tsx --env-file=.env ./src/seed/seed.ts",
+        "migration": "pnpm run build:metadata && tsx --env-file=.env ./src/seed/migration.ts",
+        "clear": "pnpm run build:metadata && tsx --env-file=.env ./src/clearDB.ts",
+        "reset": "pnpm run build:metadata && tsx --env-file=.env ./src/clearDB.ts && pnpm run push && tsx --env-file=.env ./src/seed/seed.ts",
         "drop": "pnpm drizzle-kit drop --config=./src/drizzle.config.ts"
     },
     "devDependencies": {

packages/tools/src/push.ts

@@ -8,13 +8,13 @@
 // It runs with tsx, which properly handles .js → .ts extension resolution.
 // =============================================================================
 
-import { modelSchemas } from "@arrhes/application-metadata/models"
+import { modelSchemas } from "@arrhes/application-metadata"
 import { pushSchema } from "drizzle-kit/api"
 import { sql } from "drizzle-orm"
 import type { PgDatabase } from "drizzle-orm/pg-core"
 import { drizzle } from "drizzle-orm/postgres-js"
 import postgres from "postgres"
-import { env } from "./env"
+import { env } from "./env.js"
 
 const connection = postgres(env()?.SQL_DATABASE_URL ?? "", { max: 1 })
 const db = drizzle(connection)

packages/tools/tsconfig.json

@@ -20,5 +20,6 @@
         "outDir": "./build"
     },
     "exclude": ["./node_modules", "./build"],
-    "include": ["./src"]
+    "include": ["./src"],
+    "references": [{ "path": "../metadata" }]
 }

packages/ui/src/fonts/fonts.css

@@ -16,6 +16,7 @@
     font-stretch: 75% 125%;
     font-style: normal;
     font-optical-sizing: auto;
+    font-display: swap;
 }
 
 @font-face {
@@ -27,4 +28,5 @@
     font-stretch: 75% 125%;
     font-style: italic;
     font-optical-sizing: auto;
+    font-display: swap;
 }

packages/website/src/root.tsx

@@ -1,4 +1,4 @@
-import { Profiler, StrictMode } from "react"
+import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import "./assets/css/root.css"
 import { RootProvider } from "./contexts/rootProvider.js"
@@ -9,9 +9,7 @@ if (!rootElement.innerHTML) {
     const root = createRoot(rootElement)
     root.render(
         <StrictMode>
-            <Profiler id="website" onRender={() => {}}>
-                <RootProvider />
-            </Profiler>
+            <RootProvider />
         </StrictMode>,
     )
 }

packages/website/src/routes/root/dashboard/dashboardLayoutRoute.tsx

@@ -1,6 +1,5 @@
 import { CircularLoader } from "@arrhes/ui"
-import { createRoute, redirect } from "@tanstack/react-router"
-import { DashboardLayout } from "../../../features/dashboard/dashboardLayout.js"
+import { createRoute, lazyRouteComponent, redirect } from "@tanstack/react-router"
 import { rootLayoutRoute } from "../../rootLayoutRoute.js"
 
 export const dashboardLayoutRoute = createRoute({
@@ -14,5 +13,5 @@ export const dashboardLayoutRoute = createRoute({
             })
         }
     },
-    component: () => <DashboardLayout />,
+    component: lazyRouteComponent(() => import("../../../features/dashboard/dashboardLayout.js"), "DashboardLayout"),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationApi/organizationApiKeysRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationApiKeysPage } from "../../../../../../features/dashboard/$idOrganization/organizationApi/keys/organizationApiKeysPage.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationApiLayoutRoute } from "./organizationApiLayoutRoute.js"
 
 export const organizationApiKeysRoute = createRoute({
@@ -8,5 +7,11 @@ export const organizationApiKeysRoute = createRoute({
     beforeLoad: () => ({
         title: "Clés",
     }),
-    component: () => <OrganizationApiKeysPage />,
+    component: lazyRouteComponent(
+        () =>
+            import(
+                "../../../../../../features/dashboard/$idOrganization/organizationApi/keys/organizationApiKeysPage.js"
+            ),
+        "OrganizationApiKeysPage",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationApi/organizationApiLayoutRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationApiLayout } from "../../../../../../features/dashboard/$idOrganization/organizationApi/organizationApiLayout.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationLayoutRoute } from "../organizationLayoutRoute.tsx"
 
 export const organizationApiLayoutRoute = createRoute({
@@ -8,5 +7,8 @@ export const organizationApiLayoutRoute = createRoute({
     beforeLoad: () => ({
         title: "API",
     }),
-    component: () => <OrganizationApiLayout />,
+    component: lazyRouteComponent(
+        () => import("../../../../../../features/dashboard/$idOrganization/organizationApi/organizationApiLayout.js"),
+        "OrganizationApiLayout",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationApi/organizationApiRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationApiGeneralPage } from "../../../../../../features/dashboard/$idOrganization/organizationApi/organizationApiGeneralPage.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationApiLayoutRoute } from "./organizationApiLayoutRoute.js"
 
 export const organizationApiRoute = createRoute({
@@ -8,5 +7,11 @@ export const organizationApiRoute = createRoute({
     beforeLoad: () => ({
         title: undefined,
     }),
-    component: () => <OrganizationApiGeneralPage />,
+    component: lazyRouteComponent(
+        () =>
+            import(
+                "../../../../../../features/dashboard/$idOrganization/organizationApi/organizationApiGeneralPage.js"
+            ),
+        "OrganizationApiGeneralPage",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationLayoutRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationLayout } from "../../../../../features/dashboard/$idOrganization/organizationLayout.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationPathRoute } from "./organizationPathRoute.js"
 
 export const organizationLayoutRoute = createRoute({
@@ -8,5 +7,8 @@ export const organizationLayoutRoute = createRoute({
     beforeLoad: () => ({
         title: undefined,
     }),
-    component: () => <OrganizationLayout />,
+    component: lazyRouteComponent(
+        () => import("../../../../../features/dashboard/$idOrganization/organizationLayout.js"),
+        "OrganizationLayout",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationSettings/organizationSecurityRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationSecurityPage } from "../../../../../../features/dashboard/$idOrganization/organizationSettings/organizationSecurityPage.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationSettingsLayoutRoute } from "./organizationSettingsLayoutRoute.js"
 
 export const organizationSecurityRoute = createRoute({
@@ -8,5 +7,11 @@ export const organizationSecurityRoute = createRoute({
     beforeLoad: () => ({
         title: "Sécurité",
     }),
-    component: () => <OrganizationSecurityPage />,
+    component: lazyRouteComponent(
+        () =>
+            import(
+                "../../../../../../features/dashboard/$idOrganization/organizationSettings/organizationSecurityPage.js"
+            ),
+        "OrganizationSecurityPage",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationSettings/organizationSettingsLayoutRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationSettingsLayout } from "../../../../../../features/dashboard/$idOrganization/organizationSettings/organizationSettingsLayout.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationLayoutRoute } from "../organizationLayoutRoute.js"
 
 export const organizationSettingsLayoutRoute = createRoute({
@@ -8,5 +7,11 @@ export const organizationSettingsLayoutRoute = createRoute({
     beforeLoad: () => ({
         title: "Paramètres",
     }),
-    component: () => <OrganizationSettingsLayout />,
+    component: lazyRouteComponent(
+        () =>
+            import(
+                "../../../../../../features/dashboard/$idOrganization/organizationSettings/organizationSettingsLayout.js"
+            ),
+        "OrganizationSettingsLayout",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationSettings/organizationSettingsRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationSettingsPage } from "../../../../../../features/dashboard/$idOrganization/organizationSettings/organizationSettingsPage.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationSettingsLayoutRoute } from "./organizationSettingsLayoutRoute.js"
 
 export const organizationSettingsRoute = createRoute({
@@ -8,5 +7,11 @@ export const organizationSettingsRoute = createRoute({
     beforeLoad: () => ({
         title: undefined,
     }),
-    component: () => <OrganizationSettingsPage />,
+    component: lazyRouteComponent(
+        () =>
+            import(
+                "../../../../../../features/dashboard/$idOrganization/organizationSettings/organizationSettingsPage.js"
+            ),
+        "OrganizationSettingsPage",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationSettings/organizationStorageRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationStoragePage } from "../../../../../../features/dashboard/$idOrganization/organizationSettings/organizationStoragePage.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationSettingsLayoutRoute } from "./organizationSettingsLayoutRoute.js"
 
 export const organizationStorageRoute = createRoute({
@@ -8,5 +7,11 @@ export const organizationStorageRoute = createRoute({
     beforeLoad: () => ({
         title: "Stockage",
     }),
-    component: () => <OrganizationStoragePage />,
+    component: lazyRouteComponent(
+        () =>
+            import(
+                "../../../../../../features/dashboard/$idOrganization/organizationSettings/organizationStoragePage.js"
+            ),
+        "OrganizationStoragePage",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationSubscription/organizationSubscriptionHistoryRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationSubscriptionHistoryPage } from "../../../../../../features/dashboard/$idOrganization/organizationSubscription/organizationSubscriptionHistoryPage.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationSubscriptionLayoutRoute } from "./organizationSubscriptionLayoutRoute.js"
 
 export const organizationSubscriptionHistoryRoute = createRoute({
@@ -8,5 +7,11 @@ export const organizationSubscriptionHistoryRoute = createRoute({
     beforeLoad: () => ({
         title: undefined,
     }),
-    component: () => <OrganizationSubscriptionHistoryPage />,
+    component: lazyRouteComponent(
+        () =>
+            import(
+                "../../../../../../features/dashboard/$idOrganization/organizationSubscription/organizationSubscriptionHistoryPage.js"
+            ),
+        "OrganizationSubscriptionHistoryPage",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationSubscription/organizationSubscriptionLayoutRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationSubscriptionLayout } from "../../../../../../features/dashboard/$idOrganization/organizationSubscription/organizationSubscriptionLayout.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationLayoutRoute } from "../organizationLayoutRoute.js"
 
 export const organizationSubscriptionLayoutRoute = createRoute({
@@ -8,5 +7,11 @@ export const organizationSubscriptionLayoutRoute = createRoute({
     beforeLoad: () => ({
         title: "Abonnement",
     }),
-    component: () => <OrganizationSubscriptionLayout />,
+    component: lazyRouteComponent(
+        () =>
+            import(
+                "../../../../../../features/dashboard/$idOrganization/organizationSubscription/organizationSubscriptionLayout.js"
+            ),
+        "OrganizationSubscriptionLayout",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationSubscription/organizationSubscriptionRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationSubscriptionPage } from "../../../../../../features/dashboard/$idOrganization/organizationSubscription/organizationSubscriptionPage.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationSubscriptionLayoutRoute } from "./organizationSubscriptionLayoutRoute.js"
 
 export const organizationSubscriptionRoute = createRoute({
@@ -8,5 +7,11 @@ export const organizationSubscriptionRoute = createRoute({
     beforeLoad: () => ({
         title: undefined,
     }),
-    component: () => <OrganizationSubscriptionPage />,
+    component: lazyRouteComponent(
+        () =>
+            import(
+                "../../../../../../features/dashboard/$idOrganization/organizationSubscription/organizationSubscriptionPage.js"
+            ),
+        "OrganizationSubscriptionPage",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/organizationUsers/organizationUsersRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { OrganizationUsersPage } from "../../../../../../features/dashboard/$idOrganization/organizationUsers/organizationUsersPage.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { organizationUsersLayoutRoute } from "./organizationUsersLayoutRoute.js"
 
 export const organizationUsersRoute = createRoute({
@@ -8,5 +7,8 @@ export const organizationUsersRoute = createRoute({
     beforeLoad: () => ({
         title: undefined,
     }),
-    component: () => <OrganizationUsersPage />,
+    component: lazyRouteComponent(
+        () => import("../../../../../../features/dashboard/$idOrganization/organizationUsers/organizationUsersPage.js"),
+        "OrganizationUsersPage",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/years/$idYear/files/$idFile/fileRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { FilePage } from "../../../../../../../../../features/dashboard/$idYear/files/$idFile/filePage.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { fileLayoutRoute } from "./fileLayoutRoute.js"
 
 export const fileRoute = createRoute({
@@ -8,5 +7,8 @@ export const fileRoute = createRoute({
     beforeLoad: () => ({
         title: undefined,
     }),
-    component: () => <FilePage />,
+    component: lazyRouteComponent(
+        () => import("../../../../../../../../../features/dashboard/$idYear/files/$idFile/filePage.js"),
+        "FilePage",
+    ),
 })

packages/website/src/routes/root/dashboard/organizations/$idOrganization/years/$idYear/files/filesRoute.tsx

@@ -1,5 +1,4 @@
-import { createRoute } from "@tanstack/react-router"
-import { FilesPage } from "../../../../../../../../features/dashboard/$idYear/files/filesPage.js"
+import { createRoute, lazyRouteComponent } from "@tanstack/react-router"
 import { filesLayoutRoute } from "./filesLayoutRoute.js"
 
 export const filesRoute = createRoute({
@@ -11,5 +10,8 @@ export const filesRoute = createRoute({
     beforeLoad: () => ({
         title: undefined,
     }),
-    component: () => <FilesPage />,
+    component: lazyRouteComponent(
+        () => import("../../../../../../../../features/dashboard/$idYear/files/filesPage.js"),
+        "FilesPage",
+    ),
 })