𝗟𝗲 𝗯𝘂𝗻𝗱𝗹𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗲𝘅𝗽𝗹𝗶𝗾𝘂𝗲́
Vous écrivez des applications React ou Angular en utilisant de nombreux fichiers. Vous avez des composants, des services et des bibliothèques. Cette organisation vous aide.
Le navigateur ne se soucie pas de vos dossiers. Si vous chargez 200 fichiers, le navigateur effectue 200 requêtes réseau. Cela ralentit votre application.
Les bundlers résolvent ce problème. Un bundler prend votre code, vos imports et vos modules. Il les combine en un ou quelques fichiers de petite taille. Cela rend le chargement efficace.
Les bundlers modernes font plus que simplement combiner des fichiers :
• Minification : elle supprime les espaces superflus et les commentaires. Elle raccourcit les noms de variables pour réduire la taille des fichiers. • Tree shaking : il supprime le code que vous n'utilisez jamais. Il élimine les fonctions inutilisées des bibliothèques. • Code splitting : il divise le code en petits morceaux. Le navigateur ne charge que ce dont l'utilisateur a besoin immédiatement.
Des fichiers plus petits permettent d'obtenir des applications plus rapides.
Deux outils principaux existent : Webpack et Vite.
Webpack regroupe toute votre application avant de la servir. Cela fonctionne bien pour les grands projets legacy. Il est flexible mais peut sembler lent dans les gros projets.
Vite est le choix moderne. Pendant le développement, il sert les fichiers directement. Il ne met à jour que le fichier que vous modifiez. Cela rend les mises à jour instantanées. Pour la production, Vite utilise Rollup pour créer des bundles rapides.
Comparaison :
Webpack :
- Vitesse de dev : Plus lente
- Config : Complexe
- Idéal pour : Grands projets legacy
Vite :
- Vitesse de dev : Rapide
- Config : Simple
- Idéal pour : Nouveaux projets modernes
Utilisez Vite pour les nouveaux projets.
Chaque bundler suit trois étapes :
- Construire un graphe de dépendances : il cartographie la manière dont chaque fichier est connecté aux autres.
- Transformer le code : il convertit TypeScript ou JSX en JavaScript pur.
- Générer le bundle : il combine et minifie tout dans un dossier pour le déploiement.
Gardez votre bundle léger grâce à ces étapes :
• Lazy loading : chargez les composants uniquement lorsque les utilisateurs naviguent vers eux. • Imports partiels : n'importez pas une bibliothèque entière. Importez uniquement la fonction spécifique dont vous avez besoin. • Analyse : utilisez des outils pour voir ce qui occupe de l'espace dans votre bundle. • Builds de production : déployez toujours des builds de production. Les builds de développement sont trop volumineux.
Le bundling améliore les performances de votre application en fournissant au navigateur moins de fichiers et des fichiers plus petits.
Source : https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p