Vite est un outil de build qui permet de délivrer le code front-end en utilisant les modules EcmaScript natif et qui utilise Rollup pour le build de production.
Pourquoi vite est différent ?
Vite approche le problème du développement front-end d'une nouvelle manière. Plutôt que de générer un "bundle" à chaque modification d'un fichier, Vite se repose sur le support des import natif en créant un serveur personnalisé (basé sur koa) qui va délivrer des fichiers JS compatibles.
Prenons par exemple ce fichier :
import React from 'react'
export function Demo () {
return <div>Hello world !</div>
}Lorsqu'il sera obtenu depuis le serveur de développement le code sera automatiquement transformé.
import React from '/@modules/react'
export function Demo () {
return React.createElement('div', {}, 'Hello world !')
}Le chemin /@modules sera compris par le serveur vite qui incluera automatiquement la librairie depuis votre dossier node_module. En plus du code de base, du code sera aussi ajouté pour déclencher le rafraichissement automatiquement la page lorsque vous modifiez un fichier.
Cette approche permet à vite d'être plus rapide vu que tous les fichiers n'ont pas besoin d'être recompilés à chaque modification. Seul le fichier modifié aura besoin d'être transformé à la prochaine requête. Vite intègre d'ailleurs par défaut le HMR (Hot Module Replacement) pour les frameworks React, Preact et VueJS.
Rollup pour le build
Pour la phase de build Vite se repose sur Rollup en offrant une configuration de base généraliste qui conviendra à la plupart des cas. Pour des cas plus complexes vous pouvez étendre la configuration via un fichier vite.config.js.
