Merge pull request #74 from arrhes/local-emile-development

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

Author: 656d696c65

.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",
+    ),
 })