{"id":73458,"date":"2023-10-03T10:46:02","date_gmt":"2023-10-03T09:46:02","guid":{"rendered":"https:\/\/kinqsta.com\/fr\/?p=73458&preview=true&preview_id=73458"},"modified":"2023-10-09T07:26:22","modified_gmt":"2023-10-09T06:26:22","slug":"rollup-vs-webpack-vs-parcel","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/rollup-vs-webpack-vs-parcel\/","title":{"rendered":"Comparaison des Bundlers JavaScript : Rollup vs Webpack vs Parcel"},"content":{"rendered":"

Dans le monde du d\u00e9veloppement web, JavaScript<\/a> est le moteur des applications web dynamiques, interactives et \u00e0 page unique<\/a>. Cependant, \u00e0 mesure que la complexit\u00e9 des applications web modernes augmente, le nombre de biblioth\u00e8ques JavaScript<\/a>, de frameworks et de d\u00e9pendances augmente \u00e9galement. Cela conduit \u00e0 une base de code gonfl\u00e9e et inefficace, compromettant les performances et l’exp\u00e9rience utilisateur.<\/p>\n

Pour relever ce d\u00e9fi, les bundlers JavaScript<\/a> ont \u00e9t\u00e9 introduits ! Ces assistants d’optimisation sont sp\u00e9cialis\u00e9s dans l’affinage du code et l’am\u00e9lioration des performances. Saluez les trois poids lourds des bundlers JavaScript : Rollup, Webpack et Parcel – les stars du monde des d\u00e9veloppeurs.<\/p>\n

Cet article est un guide complet de ces bundlers, qui vous permettra de d\u00e9couvrir leurs forces, leurs caract\u00e9ristiques uniques et leurs particularit\u00e9s, tout en mettant en lumi\u00e8re leurs avantages et leurs limites.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Qu’est-ce qu’un bundler JavaScript ?<\/h2>\n

Lors de la cr\u00e9ation d’applications web, les choses peuvent devenir assez complexes. Pour que tout soit organis\u00e9 et facile \u00e0 maintenir, les applications sont divis\u00e9es en plusieurs fichiers.<\/p>\n

Mais il y a un hic : le chargement de plusieurs fichiers distincts peut ralentir votre application. Non seulement parce que le navigateur doit effectuer plusieurs requ\u00eates pour r\u00e9cup\u00e9rer ces fichiers pour votre page web, mais aussi parce qu’il risque de charger et de traiter du code inutile \u00e0 partir de ces fichiers.<\/p>\n

Les bundlers aident \u00e0 r\u00e9soudre ce probl\u00e8me en analysant les d\u00e9pendances de votre application et en g\u00e9n\u00e9rant un fichier unique contenant tout le code n\u00e9cessaire. En termes simples, un bundler JavaScript est un outil qui fusionne plusieurs fichiers JavaScript avec leurs d\u00e9pendances en un seul fichier, commun\u00e9ment appel\u00e9 bundle.<\/p>\n

Gr\u00e2ce aux bundlers JavaScript, nous transformons cela :<\/p>\n

<head>\n  <script type=\"text\/javascript\" src=\"\/navbar.js\"><\/script>\n  <script type=\"text\/javascript\" src=\"\/sidebar.js\"><\/script>\n  <script type=\"text\/javascript\" src=\"\/some-modal.js\"><\/script>\n  <script type=\"text\/javascript\" src=\"\/footer.js\"><\/script>\n<\/head><\/code><\/pre>\n
En ceci :<\/p>\n
<head>\n  <script type=\"text\/javascript\" src=\"\/compressed-bundle.js\"><\/script>\n<\/head><\/code><\/pre>\n
Les bundlers JavaScript ne se limitent pas au code JavaScript. Ils peuvent \u00e9galement regrouper d’autres ressources, telles que des fichiers CSS et des images. Ils peuvent \u00e9galement effectuer des optimisations telles que la minification<\/a>, l’arborescence et le fractionnement du code.<\/p>\n
Cela \u00e9tant dit, vous vous demandez peut-\u00eatre si vous devriez utiliser des bundlers JavaScript pour tous vos projets. Pour r\u00e9pondre \u00e0 cette question, commen\u00e7ons par comprendre pourquoi les bundlers sont importants.<\/p>\n
Importance des bundlers de modules JavaScript dans le d\u00e9veloppement web moderne<\/h2>\n
Les bundlers de modules JavaScript sont devenus des alli\u00e9s cruciaux dans le monde en constante \u00e9volution du d\u00e9veloppement web. Ils prennent en charge la t\u00e2che d\u00e9licate de la gestion des d\u00e9pendances et de l’assemblage des fichiers JavaScript – un peu comme la r\u00e9solution d’un puzzle.<\/p>\n
Dans le pass\u00e9, les d\u00e9veloppeurs avaient l’habitude d’int\u00e9grer les balises <script \/><\/code> directement dans le code HTML ou de lier plusieurs fichiers dans les pages HTML<\/a>. Mais les choses se sont compliqu\u00e9es au fur et \u00e0 mesure que le web se d\u00e9veloppait. L’ancienne technique ralentissait le chargement des pages web en raison du trop grand nombre de requ\u00eates du serveur<\/a> et entra\u00eenait un code r\u00e9p\u00e9titif, ce qui obligeait les d\u00e9veloppeurs \u00e0 faire en sorte que les choses fonctionnent pour diff\u00e9rents navigateurs web.<\/p>\n
C’est l\u00e0 que les bundlers de modules JavaScript entrent en jeu. Ils ont r\u00e9volutionn\u00e9 notre fa\u00e7on de travailler avec JavaScript. Alors que les navigateurs web prennent d\u00e9sormais en charge les modules ES et que des technologies telles que HTTP\/2<\/a> ont r\u00e9solu les probl\u00e8mes de surcharge des requ\u00eates, les bundlers JavaScript restent essentiels.<\/p>\n
Les bundlers JavaScript sont plus que de simples utilitaires \u00e0 la mode ; ils sont les architectes de l’efficacit\u00e9 dans le d\u00e9veloppement web. Ces outils ne se contentent pas de minimiser la surcharge des requ\u00eates, ils am\u00e9liorent \u00e9galement la structure du code et les performances, et rationalisent les flux de d\u00e9veloppement.<\/p>\n
En substance, ils fonctionnent comme des conducteurs, organisant le code de mani\u00e8re harmonieuse, acc\u00e9l\u00e9rant le d\u00e9veloppement et veillant \u00e0 ce que tout se d\u00e9roule sans heurts dans diff\u00e9rents sc\u00e9narios.<\/p>\n
\u00c0 mesure que la technologie web \u00e9volue, les bundlers s’adaptent constamment et affirment leur caract\u00e8re indispensable \u00e0 la cr\u00e9ation d’exp\u00e9riences web extraordinaires. Mais n’oubliez pas qu’il ne s’agit pas d’utiliser de nouveaux outils parce qu’ils sont nouveaux. Les bundlers jouent un r\u00f4le important dans le d\u00e9veloppement web moderne et constituent la base de bonnes pratiques de codage.<\/p>\n
Avant de commencer \u00e0 explorer l’aspect technique, nous allons parcourir l’histoire des bundlers JavaScript.<\/p>\n
Histoire des bundlers JavaScript<\/h2>\n
Dans les premiers temps du d\u00e9veloppement web, la gestion des balises de script dans les fichiers HTML \u00e9tait un processus \u00e9puisant et sujet aux erreurs. Cela a conduit au d\u00e9veloppement des premiers bundlers JavaScript, qui automatisaient le processus de chargement et d’ex\u00e9cution des fichiers JavaScript.<\/p>\n
Les bundlers de premi\u00e8re g\u00e9n\u00e9ration, tels que RequireJS<\/a>, ont \u00e9t\u00e9 introduits vers 2010. Ces bundlers ont introduit le concept de chargement asynchrone de modules, qui permet aux d\u00e9veloppeurs de charger les fichiers JavaScript dans l’ordre o\u00f9 ils sont n\u00e9cessaires, plut\u00f4t que de devoir les charger tous en m\u00eame temps. Cela a permis d’am\u00e9liorer les performances en r\u00e9duisant le nombre de requ\u00eates HTTP \u00e0 effectuer lors du chargement initial de la page.<\/p>\n
Les bundlers de deuxi\u00e8me g\u00e9n\u00e9ration, tels que Browserify<\/a> et Webpack<\/a>, ont \u00e9t\u00e9 introduits vers 2011-2012. Ces bundlers \u00e9taient plus puissants que ceux de la premi\u00e8re g\u00e9n\u00e9ration, et ils pouvaient \u00eatre utilis\u00e9s pour regrouper non seulement des fichiers JavaScript, mais aussi d’autres actifs tels que des CSS<\/a> et des images. Cela a permis de cr\u00e9er des applications web plus efficaces et plus performantes.<\/p>\n
Au fil du temps, avec l’\u00e9volution des fonctionnalit\u00e9s de JavaScript<\/a> et la popularit\u00e9 de la programmation modulaire, des bundlers de troisi\u00e8me g\u00e9n\u00e9ration ont vu le jour. Rollup<\/a> (2014) s’est concentr\u00e9 sur l’optimisation du regroupement des biblioth\u00e8ques et des paquets, tandis que Parcel<\/a> (2017) a mis l’accent sur les configurations z\u00e9ro et les flux de d\u00e9veloppement rapides comme l’\u00e9clair.<\/p>\n
Ces derni\u00e8res ann\u00e9es, l’essor des biblioth\u00e8ques d’interface utilisateur bas\u00e9es sur des composants et des frameworks<\/a> tels que React<\/a>, Vue.js<\/a>, Svelte.js<\/a> et Angular<\/a> a \u00e9galement influenc\u00e9 l’\u00e9volution des bundlers. Des outils tels que Create React App<\/a> et Create Vue<\/a> ont permis d’abstraire les configurations complexes, facilitant ainsi la mise en place de projets avec des strat\u00e9gies de regroupement optimales.<\/p>\n
Aujourd’hui, les bundlers JavaScript sont un \u00e9l\u00e9ment essentiel de la bo\u00eete \u00e0 outils du d\u00e9veloppement web. Ils sont utilis\u00e9s par les d\u00e9veloppeurs pour optimiser les performances, la maintenabilit\u00e9 et la portabilit\u00e9 de leurs applications web<\/a>. Au fur et \u00e0 mesure que JavaScript \u00e9volue, les bundlers continueront \u00e0 jouer un r\u00f4le important en aidant les d\u00e9veloppeurs \u00e0 cr\u00e9er des applications web efficaces et performantes.<\/p>\n
Comment fonctionnent les bundlers JavaScript ?<\/h2>\n
\"Bundlers
Bundlers JavaScript<\/figcaption><\/figure>\n
Il existe plusieurs bundlers JavaScript, et bien qu’ils offrent des fonctionnalit\u00e9s diff\u00e9rentes, ils suivent g\u00e9n\u00e9ralement un flux de travail similaire. Pour mieux comprendre le fonctionnement interne de ces bundlers, nous allons d\u00e9composer le processus en petites \u00e9tapes s\u00e9quentielles :<\/p>\n
1. Collecte des donn\u00e9es<\/h3>\n
Pour lancer le processus de regroupement de JavaScript, la premi\u00e8re t\u00e2che du bundler consiste \u00e0 d\u00e9terminer les fichiers qui doivent \u00eatre regroup\u00e9s. En tant que d\u00e9veloppeur<\/a>, vous clarifiez cela en indiquant un ou plusieurs fichiers principaux dans votre projet. Ces fichiers principaux contiennent g\u00e9n\u00e9ralement le code JavaScript fondamental qui s’appuie sur des parties plus petites connues sous le nom de modules ou de d\u00e9pendances.<\/p>\n
\/\/ main.js\nImport { scream } from '.\/Module1'; \/\/ returns string \u2018scream\u2019\nimport { shout } from '.\/Module2'; \/\/ returns string \u2018shout\u2019\nimport { letItAllOut } from '.\/Module3'; \/\/ returns string \u2018let it all out\u2019\n\n\/\/ Log 'Black Eyed Peas - Scream & Shout' lyrics\nconsole.log(`I wanna ${scream} and ${shout} and ${letItAllOut}`);\nconsole.log(\"We sayin' oh we oh, we oh, we oh\");<\/code><\/pre>\n
Dans cet extrait de code, notre module principal (main.js<\/strong>) importe trois autres modules, appel\u00e9s d\u00e9pendances. Il est important de noter que chacun de ces modules peut \u00e9galement avoir ses propres d\u00e9pendances. La r\u00e9solution de ces d\u00e9pendances imbriqu\u00e9es conduit \u00e0 l’\u00e9tape suivante.<\/p>\n
2. R\u00e9solution des d\u00e9pendances<\/h3>\n
L’\u00e9tape de r\u00e9solution des d\u00e9pendances suit l’\u00e9tape initiale de collecte des donn\u00e9es, et c’est l\u00e0 que la v\u00e9ritable magie op\u00e8re. Alors que la collecte des donn\u00e9es se concentre sur l’identification des principaux points d’entr\u00e9e de votre projet, la r\u00e9solution des d\u00e9pendances analyse minutieusement le code de ces fichiers d’entr\u00e9e afin de d\u00e9couvrir les modules JavaScript import\u00e9s ou requis. Ce travail de d\u00e9tective implique de tracer les chemins import()<\/code> et require()<\/code>.<\/p>\n
Voyez cela comme l’assemblage d’un puzzle – chaque pi\u00e8ce s’embo\u00eete, et au cours de cette \u00e9tape, le bundler JavaScript recueille des informations pour comprendre comment toutes ces pi\u00e8ces sont interconnect\u00e9es.<\/p>\n
\"R\u00e9solution
R\u00e9solution des d\u00e9pendances – Comprendre la relation entre les modules et les d\u00e9pendances<\/figcaption><\/figure>\n
Les bundlers JavaScript modernes exploitent des techniques avanc\u00e9es telles que l’analyse statique et le \u00ab tree shaking \u00bb lors de la r\u00e9solution des d\u00e9pendances. L’analyse statique analyse le code sans l’ex\u00e9cuter, ce qui acc\u00e9l\u00e8re la d\u00e9tection des d\u00e9pendances et r\u00e9duit le temps de regroupement. Le tree shaking \u00e9limine le code inutilis\u00e9, ce qui permet au bundle final de rester l\u00e9ger.<\/p>\n
En outre, le bundler cr\u00e9e un graphique visuel repr\u00e9sentant l’arbre des d\u00e9pendances. Cela permet non seulement de mettre en \u00e9vidence les relations entre les modules, mais aussi de proc\u00e9der \u00e0 des optimisations. Les bundlers peuvent r\u00e9organiser les modules pour un chargement plus rapide et aider \u00e0 r\u00e9soudre les d\u00e9pendances circulaires, garantissant ainsi un code performant et sans bogues.<\/p>\n
3. Transformation du code<\/h3>\n
Le bundler peut effectuer plusieurs transformations sur le code JavaScript avant de l’assembler dans un bundle. Ces transformations peuvent inclure<\/p>\n