Le coût du JS

Le JavaScript est la ressource la plus coûteuse pour le navigateur. Contrairement à une image qui doit juste être décodée, le JS doit être téléchargé, parsé, compilé et exécuté.

Le coût des dépendances

Avant d'installer une librairie via npm, vérifier son coût réel.

• Outil : Bundlephobia
• Exemple : Avez-vous besoin de tout lodash (70kB) ou juste d'une petite fonction utilitaire ?

Réduire la taille du bundle

Tree shaking

C'est la capacité du bundler (Webpack, Vite, Rollup) à éliminer le code mort (les exports non utilisés).

• Condition : Utiliser les modules ES6 (import / export) et non CommonJS (require).

Code splitting

Au lieu d'envoyer un énorme fichier bundle.js contenant tout le site, on découpe le code en petits morceaux (chunks).

• Par page : L'utilisateur ne télécharge que le JS nécessaire à la page qu'il visite.
• Lazy Loading : On ne charge le code d'un composant lourd (ex: un graphique interactif) que s'il devient visible ou si l'utilisateur clique dessus.

// Exemple de Dynamic Import (Lazy Loading)
const HeavyChart = React.lazy(() => import('./HeavyChart'));

Limiter la taille du bundle

Définissez des limites strictes pour éviter la régression au fil du temps.

• Exemple : "Le bundle initial ne doit jamais dépasser 150kB gzippé".
• Configurez ces budgets dans votre configuration Webpack/Vite ou via Lighthouse CI.