Vite.js, l'outil de bundling qui enterre Webpack

Si vous avez déjà passé des heures à attendre que votre projet se "bundle" avec Webpack, vous savez à quel point cela peut freiner votre productivité. Bonne nouvelle : Vite.js est arrivé pour changer la donne ! Conçu pour optimiser les temps de développement et moderniser l'approche du bundling, Vite révolutionne la façon dont nous travaillons avec des des outils comme ReactReact est un framework de développement JavaScript populaire., Vue ou encore AngularAngular est un framework de développement JavaScript populaire basé sur TypeScript.. Plus rapide, plus flexible et conçu pour tirer parti des modules ES natifs, Vite promet de mettre Webpack à la retraite.

Qu'est-ce qu'un bundler ?

Cet article évoque des concepts liés aux bundlers. Pour comprendre ce qu'est un bundler, vous pouvez consulter notre article sur Webpack qui parle en détail des mécaniques de bundling.

Vite.js, qu'est-ce que c'est ?

Vite est un bundler qui se distingue comme un outil révolutionnaire dans le domaine du développement JavaScriptLangage de scripting orienté objet, offrant une alternative moderne aux outils de bundling traditionnels comme Webpack. Officiellement sorti en 2020, il est devenu l'outil de bundling par défaut des projets React et Vue et il s'attaque depuis 2023 à Angular.

Grâce à sa rapidité inégalée, son système de pré-bundling intelligent et son utilisation des modules ES natifs, Vite permet d'accélérer les temps de développement tout en maintenant des performances élevées pour la production. Il transforme l'expérience des développeurs en minimisant les temps d'attente lors des mises à jour de fichiers, ce qui permet une plus grande réactivité et productivité. L'adoption de Vite est donc particulièrement bénéfique pour les projets utilisant des frameworks modernes comme Svelte ou SvelteKit dont l'architecture est pensée pour charger le minimum de ressources nécéssaires et créer une architecture à la granularité la plus fine possible. Pour en savoir plus, n'hésitez pas à jeter un oeil à notre article sur SvelteKit !

Un problème de taille : le temps !

Ce dernier point nous amène vers une problématique à laquelle la plupart des frameworks modernes font face. Les outils de bundling sont nécessaires afin d'assurer la compatibilité et d'optimiser l'intégration des bibliothèques et du code source des applications. Malgré un certain nombre d'optimisations, la compilation des bundles par Webpack peut nécessiter plusieurs minutes sur les plus grosses applications et plusieurs secondes à chaque modification lors des phases de développement.

Vite un nouveau système de bundling !

Webpack n'étant pas optimisé pour tirer parti du nouveau paradigme installé par les frameworks modernes, Vite a été créé pour remplacer les outils de bundling comme Webpack, jugés trop lents, en exploitant notamment esbuild, un outil de bundling écrit en Golang plus performant. Il exploite également les modules EcmaScript natifs (ESM) plutôt que CommonJs (CJS). Cela demande une compilation un peu plus longue ; toutefois, le chargement plus rapide des modules et une taille de bundle réduite favorise l'adoption d'ESM.

// CommonJS Module System (CJS) -> Legacy

const elem = require('module');  

// EcmaScript Module System (ESM) -> Modern

import { elem } from './module.js'

Vite.js divise les différentes dépendances et code source en modules, pré-bundle rapidement et sert le tout en ESM. Ainsi, seuls les modules nécessaires au contenu actuellement affiché dans le navigateur sont récupérés, et le navigateur est chargé de requêter les dépendances manquantes lors du chargement de nouvelles pages. Cette approche permet non seulement d'améliorer le temps de chargement initial des pages mais aussi de n'invalider qu'une partie des fichiers et non le bundle dans son entièreté. Vite offre des mises à jour en Hot Module Replacement (HMR) plus rapides en invalidant précisément les modules, en utilisant les en-têtes HTTP pour les rechargements, et en optimisant les performances de build. Bien que Vite soit rapide en développement, le bundling reste crucial pour la production; Vite propose donc une commande de build optimisée pour la production. 

Vite.JS : nos recommandations

L'adoption de Vite est une amélioration majeure de la qualité de vie dans le développement d'une application. Sa rapidité et sa fiabilité en font un outil de bundling digne de confiance pour tous les projets. Nous recommandons vivement d'adopter Vite à partir de la version 17 d'Angular en suivant la procédure de migration. Pour en savoir plus, ce benchmark témoigne des différences de performances entre Vite et Webpack.