Optimisation JavaScript : Performance, Taille de Bundle et Chargement

Pourquoi la performance JavaScript importe

JavaScript est la ressource la plus consommatrice de CPU dans le navigateur. Les gros fichiers JS augmentent le temps de parse et compile et affectent négativement la métrique INP.

Typiquement JavaScript représente 40 à 60% du poids de la page. Le JavaScript inutilisé cause une consommation inutile de CPU et de mémoire.

L'optimisation JavaScript améliore les métriques Core Web Vitals (surtout INP et LCP). Le JS optimisé offre une expérience utilisateur plus rapide et plus réactive.

Optimisation de la Taille de Bundle

Tree shaking : Supprimez les exports inutilisés. Utilisez les ES modules (import/export). CommonJS (require) ne supporte pas le tree shaking.

Analyse de bundle : Visualisez le contenu du bundle avec webpack-bundle-analyzer ou rollup-plugin-visualizer. Identifiez quelles bibliothèques prennent le plus de place.

Bibliothèques alternatives : day.js au lieu de moment.js (2KB vs 300KB), lodash-es ou méthodes natives au lieu de lodash. Remplacez les grosses bibliothèques par des alternatives plus légères.

Audit des dépendances : Détectez les dépendances inutilisées avec npm ls ou depcheck. Supprimez les dépendances inutiles de package.json.

Code Splitting

Splitting basé sur les routes : Créez un bundle séparé pour chaque page. Lazy load les composants de page avec React.lazy() et Suspense.

Splitting basé sur les composants : Divisez les composants lourds (modal, chart, editor) en chunks séparés. Chargez à la demande avec dynamic import().

Vendor splitting : Divisez les dépendances node_modules en vendor chunk séparé. Le vendor chunk ne change pas et reste dans le cache du navigateur.

Webpack : Code splitting automatique avec optimization.splitChunks. Vite : Code splitting automatique de Rollup. Next.js : Splitting automatique basé sur les routes.

Lazy Loading

Dynamic import() : Le module est chargé à la demande avec const module = await import('./heavy-module.js');.

Intersection Observer : Chargez le composant quand il est visible. Lazy load les composants below-the-fold avec React.lazy + Intersection Observer.

Prefetch et preload : Prefetch les modules non critiques en arrière-plan. Le navigateur charge quand inactif avec <link rel="prefetch" href="chunk.js">.

React Suspense : Affichez l'état de chargement pour les composants lazy loaded avec <Suspense fallback={<Loading />}><LazyComponent /></Suspense>.

Techniques de Performance

Debounce et throttle : Utilisez debounce/throttle sur les événements scroll, resize et input. Implémentez avec Lodash debounce ou setTimeout natif.

Web Workers : Séparez les calculs lourds du thread principal. Exécutez le travail intensif en CPU en arrière-plan avec new Worker('worker.js').

requestAnimationFrame : Synchronisez les animations et mises à jour DOM avec requestAnimationFrame. Visez 60fps.

Virtual scrolling : Rendez uniquement les éléments visibles dans les grandes listes (1000+ éléments). Utilisez react-window ou vue-virtual-scroller.

Memoization : Évitez les calculs et re-renders inutiles avec useMemo, useCallback et React.memo.

Mesure et Surveillance

Lighthouse Performance audit : Vérifiez les métriques de temps d'exécution JavaScript, JavaScript inutilisé et taille de bundle.

Chrome DevTools Performance tab : Analysez les temps d'exécution JavaScript, scripting et rendering. Détectez les long tasks et le blocage du thread principal.

Web Vitals : Surveillez les métriques INP, LCP et CLS. Collectez les données réelles des utilisateurs avec la bibliothèque web-vitals.

Real User Monitoring (RUM) : Surveillez les données de performance des utilisateurs réels avec Sentry, Datadog ou New Relic.