⚡ [Frontend] Build/bundling des 15 modules JS #8

New issue

Closed

opened 2026-08-03 10:20:26 -04:00 by NixCyRy · 1 comment

NixCyRy commented

2026-08-03 10:20:26 -04:00

(Migrated from github.com)

Problème

15 fichiers JS séparés chargés séquentiellement via un loadScript() maison qui réimplémente ce que les ES modules font nativement. Pas de minification. Sur mobile = 15 requêtes HTTP + parsing non-optimal.

Solution

Migrer vers ES modules — import/export natif, import() dynamique pour lazy loading
Bundler — esbuild ou Vite pour production (minification, tree-shaking, code splitting)
Source maps pour debug

Bénéfices

Réduction du nombre de requêtes HTTP (1-3 chunks au lieu de 15)
Minification = ~40-60% plus petit
Tree-shaking élimine le code mort
Cache plus efficace

Localisation

web/js/*.js (15 fichiers)
web/js/core.js — loadScript() à remplacer
web/index.html — 5 balises <script> en bas

## Problème 15 fichiers JS séparés chargés séquentiellement via un `loadScript()` maison qui réimplémente ce que les ES modules font nativement. Pas de minification. Sur mobile = 15 requêtes HTTP + parsing non-optimal. ## Solution 1. **Migrer vers ES modules** — `import/export` natif, `import()` dynamique pour lazy loading 2. **Bundler** — esbuild ou Vite pour production (minification, tree-shaking, code splitting) 3. **Source maps** pour debug ## Bénéfices - Réduction du nombre de requêtes HTTP (1-3 chunks au lieu de 15) - Minification = ~40-60% plus petit - Tree-shaking élimine le code mort - Cache plus efficace ## Localisation - `web/js/*.js` (15 fichiers) - `web/js/core.js` — `loadScript()` à remplacer - `web/index.html` — 5 balises `<script>` en bas

NixCyRy commented

2026-08-04 16:02:20 -04:00

(Migrated from github.com)

✅ Implemented in commit 94a2107

Multi-stage Docker build: node:22-alpine (build) → nginx:alpine (runtime)
esbuild bundles 6 core scripts → app.bundle.js (minified, 56KB vs 83KB unminified)
8 lazy-loaded scripts minified individually (same filenames, loadScript() unchanged)
Initial JS requests: 6 → 1
Lighthouse performance: 100/100

Verified in QA pass (2026-08-04).

✅ Implemented in commit 94a2107 - Multi-stage Docker build: node:22-alpine (build) → nginx:alpine (runtime) - esbuild bundles 6 core scripts → app.bundle.js (minified, 56KB vs 83KB unminified) - 8 lazy-loaded scripts minified individually (same filenames, loadScript() unchanged) - Initial JS requests: 6 → 1 - Lighthouse performance: 100/100 Verified in QA pass (2026-08-04).