Un projet moderne compte facilement deux cents fichiers source, plus les dépendances installées. Servir chacun d'eux au navigateur signifierait autant de requêtes, et une page qui attend.
Un bundler résout ce problème en amont : il assemble tout ce qui sera nécessaire, une fois, avant la mise en ligne.
Définition
Un bundler, ou empaqueteur, est un outil qui part d'un fichier d'entrée, suit chaque import pour construire le graphe complet des dépendances, puis écrit quelques fichiers optimisés à la place de la centaine de modules d'origine.
// src/main.js, le point d'entrée
import './style.css';
import { formaterPrix } from './outils.js';
import { z } from 'zod';
document.querySelector('#prix').textContent = formaterPrix(29.9);
// Après empaquetage :
// dist/assets/main-8f3a1c.js un seul fichier, minifié
// dist/assets/main-2b90d4.css les styles extraitsLe suffixe ajouté au nom du fichier est calculé à partir du contenu. Il change à chaque modification, ce qui permet au navigateur de garder les anciens fichiers en cache très longtemps sans jamais servir une version périmée.
Ce qu'un bundler fait, au-delà de coller des fichiers
- Résoudre les chemins : traduire
import { z } from 'zod'en un fichier réel du dossiernode_modules. - Transformer les sources : passer le JSX, le TypeScript ou le CSS moderne dans les outils prévus, dont Babel.
- Élaguer : retirer le code exporté que personne n'importe, par Tree shaking (élagage).
- Alléger : réduire la taille du résultat par Minification.
- Découper : isoler dans des fichiers séparés ce qui n'est chargé qu'à la demande, grâce à l'import() (import dynamique).
- Tracer le retour : produire une Source map pour retrouver le code d'origine dans le navigateur.
Les outils changent, le principe non. Webpack a longtemps occupé la place, Vite l'a prise sur les projets neufs, et des empaqueteurs écrits dans des langages compilés gagnent du terrain sur la vitesse. Ce que vous apprenez du graphe de dépendances reste valable de l'un à l'autre.
Faut-il toujours empaqueter ?
Non. Une page qui charge trois modules ES et aucune dépendance n'a rien à y gagner : les navigateurs savent suivre les imports tout seuls. Ajouter un outil de build à ce stade coûte plus de configuration qu'il ne rapporte.
Le besoin apparaît avec les dépendances installées, souvent découpées en dizaines de fichiers, avec les langages qui demandent une traduction, et avec la volonté d'optimiser sérieusement le poids envoyé.
Questions fréquentes
Un bundler et un serveur de développement, est-ce la même chose ?
Les outils actuels font les deux, mais ce sont deux métiers. Le serveur de développement sert vos fichiers pendant que vous travaillez et rafraîchit l'écran à chaque sauvegarde ; l'empaqueteur fabrique la version optimisée destinée à la mise en ligne. Les stratégies employées y sont très différentes.
Un seul gros fichier, est-ce le bon objectif ?
Plus vraiment. Un fichier unique oblige à tout retélécharger à la moindre correction, et fait charger d'emblée du code inutile à la page affichée. Un découpage raisonnable, guidé par les pages et par les blocs lourds, donne de meilleurs résultats.
Pourquoi mon bundle pèse-t-il si lourd ?
Presque toujours à cause d'une dépendance, rarement à cause de votre code. Les empaqueteurs savent produire un rapport visuel du poids de chaque module : commencez par là, cherchez la bibliothèque importée en entier pour une seule fonction, et vérifiez que rien n'est inclus deux fois en deux versions différentes.