Si vous êtes développeur web depuis longtemps, vous avez sûrement connu l'époque des projets où chaque page était un fichier HTML statique dans lequel on incluait les scripts nécessaires aux interactions avec les API.
Aujourd'hui le web a bien évolué. Avec le foisonnement d'outils, de technologies, de frameworks, construire un projet web est devenu plus complexe. Webpack, Babel, ESLint, Prettier, PostCSS, SASS,... c'est un véritable ecosystème à maitriser. C'est là que ViteJS entre en jeu.
ViteJS, c'est quoi ?
ViteJS est un outil de build moderne qui tend à offrir aux développeurs un moyen de construire des applications web plus rapidement et plus efficacement. Emprunté du français, "Vite" signifie rapide et c'est exactement l'objectif que souhaitait atteindre son créateur Evan YOU (aussi à l'origine de Vue.js): une rapidité pour le développement et le build des applications web modernes.
Comment ça marche ?
Le mode développement
Pour le serveur de développement, ViteJS utilise un serveur ESM qui sert les fichiers via l'API HTTP native des modules ECMAScript. Cela signifie que vos fichiers sont servis à la demande, plus besoin d'attendre que l'application soit recompilée pour être visualisée. Une fois que vous aurez testé ce serveur, vous vous demanderez sûrement comment vous faisiez avant !
Le mode production
Pour la production, ViteJS utilise Rollup pour construire et empaqueter votre application. Pourquoi Rollup ? Pour la taille des fichiers de sortie, et en termes de vitesse, la taille compte !
Comment commencer avec ViteJS ?
Pour démarrer un projet ViteJS il existe le générateur de projet, comme pour beaucoup d'outils Javascript :
npm create vite@latest
Vous pouvez aussi choisir de spécifier directement un modèle parmi la liste (non-exhaustive) : vanilla, React, Vue.js, Lit, Svelte.
npm create vite@latest mon_projet -- --template react
À l'instar de create-react-app, cette commande va vous créer la structure et la configuration nécessaire au démarrage d'un projet React.
Vous n'aurez alors plus qu'à exécuter cette suite de commande pour démarrer votre serveur :
cd mon_projet
npm install
npm run dev
Votre application est maintenant accessible à l'adresse http://localhost:5173.
Montez dans le train
ViteJS est rapide et efficace pour les projets web modernes alors n'attendez plus, donnez sa chance à cet outil formidable. Il est peu probable que vous en sortiez déçu quelque soit votre expérience en développement front-end.
