À retenir
- Regroupe de nombreux fichiers de code en un minimum de paquets.
- Optimise la vitesse de chargement des sites web.
- Gère automatiquement les dépendances entre les différents scripts.
Un bundler (ou regroupeur) est un outil de développement qui prend une multitude de fichiers sources dispersés (fichiers JavaScript, feuilles de style CSS, images) et les assemble en un seul (ou quelques-uns) fichier optimisé pour être lu par un navigateur web. Imaginez un déménageur qui vide toutes les pièces d'une maison pour tout ranger proprement dans quelques cartons étiquetés afin de faciliter le transport.
Étymologie
Le terme vient de l'anglais bundle, qui signifie « paquet » ou « faisceau ». En informatique, il désignait à l'origine le fait de vendre plusieurs logiciels ensemble. Avec l'avènement du développement web moderne et des modules, il est devenu le nom standard des outils automatisant la fusion des scripts.
Exemples d'usage
- Webpack : Le bundler le plus utilisé et le plus configurable du marché.
- Vite : Un outil moderne très rapide qui utilise les technologies récentes des navigateurs.
- Parcel : Un bundler qui fonctionne sans aucune configuration manuelle (« zero config »).
Cas d'usage
On utilise un bundler principalement dans le développement web frontend. Il intervient juste avant la mise en ligne pour réduire le nombre de requêtes HTTP (en fusionnant les fichiers) et pour compresser le code afin que le site se charge plus vite pour l'utilisateur final.
Bonnes pratiques
Il est recommandé d'utiliser le tree shaking (une technique qui supprime le code mort ou non utilisé) pour alléger le résultat final. Attention également à ne pas créer un fichier unique trop volumineux : on préférera parfois le code splitting pour charger certaines parties du site uniquement quand elles sont nécessaires.
Synonymes
Antonymes
Conseil
Si vous débutez, ne passez pas des heures à essayer de configurer Webpack de zéro. Utilisez des outils comme Vite ou des générateurs de projets (comme Create React App) qui incluent déjà un bundler préconfiguré et prêt à l'emploi.
Questions fréquentes
Pourquoi ne pas simplement charger chaque fichier séparément ?
Parce que chaque fichier demande une connexion au serveur. En avoir des centaines ralentit considérablement l'affichage de la page.
Un bundler sert-il aussi à minifier le code ?
Oui, la plupart des bundlers intègrent des outils pour supprimer les espaces et commentaires inutiles afin de réduire la taille du code.