Vite – Empaquetage des dépendances et chargement dynamique du code

Dans cet article, nous allons explorer les fonctionnalités de bases du serveur de développement Vite et les avantages qu’elles apportent lors du développement d’applications pour le Web. Nous passerons entre autres par la manière dont Vite optimise la construction d’une application et les requêtes des clients.

C’est quoi un bundler ?

Avant d’entrer dans le vif du sujet, je crois qu’il serait important de définir certains concepts. Premièrement, qu’est-ce qu’un bundler ? Dans le développement d’application web, c’est un outil primordial qui permet de combiner plusieurs fichiers JavaScript en un paquet qui sera prêt à être chargé dans un navigateur. Ce dernier est aussi important pour garder une liste de toutes les dépendances qui vont être nécessaires au bon fonctionnement de l’application ainsi que leur version respective. Aujourd’hui, l’utilisation des bundlers est très répandue dans les applications web basées sur JavaScript pour leur avantage à réduire la complexité de gestion des dépendances. Cependant, les applications basées sur un bundler traditionnel doivent passer à travers chacun des fichiers d’un projet puis compiler l’entièreté de l’application pour que celle-ci soit prête à être utilisée. Maintenant que nous avons défini c’est qu’est un bundler, retournons à Vite.

Optimisation des dépendances et du code

Vite n’est pas une exception, il utilise lui aussi un bundler pour la gestion des dépendances, mais il va tout de même faire les choses un peu différemment d’autres serveurs de développement. Tout d’abord, le démarrage d’une application Vite va être bonifié par la séparation de ses composantes dans les catégories des dépendances et du code source. Les dépendances sont en majorité du JavaScript. Pour une petite librairie, faire quelques requêtes au serveur pour obtenir tous les modules n’est peut-être pas un problème et cela n’affectera probablement pas la rapidité du chargement de la page. Cependant, certaines librairies peuvent contenir plusieurs modules ainsi que des sous-modules et cela demanderait une multitude de requêtes au serveur pour toutes les obtenir ce qui pourrait ralentir considérablement le chargement de la page. C’est pourquoi Vite va regrouper à l’avance tous les modules nécessaires à une dépendance dans un paquet qui pourra être envoyé avec une seule requête. Ce paquetage de dépendance est une gracieuseté de esbuild, un bundler basé sur le langage Go qui va empaqueter les dépendances bien plus rapidement qu’un bundler écrit en JavaScript. Pour ce qui est du code source, Vite va seulement donner le code qui est actuellement visible à l’écran au navigateur et ainsi le lui laisser faire le reste du travail. En plus, plutôt que de charger toutes les dépendances de l’application dans le navigateur, seulement celles qui sont nécessaires à la page qui est visible présentement seront chargées réduisant ainsi le nombre de requêtes simultanées.

En conclusion, Vite optimise de manière ingénieuse le chargement d’une application en utilisant un outil de paquetage ultrarapide et il envoie au client seulement ce qui est nécessaire à la vue actuelle. La semaine prochaine, nous verrons comment fonctionne le Hot Module Reload et quels sont ses avantages dans le développement d'applications Web.

Références

1. Vite. « Why Vite ». Consultée le 6 février 2025. https://vite.dev/guide/why.html
2. Diego SALINAS GARDÓN. Snipcart. « The Complete JavaScript Module Bundlers Guide ». Consultée le 6 février 2025. https://snipcart.com/blog/javascript-module-bundler