Vous avez sûrement déjà entendu parler de Vite, cet outil de développement front-end, qui occupe une place de plus en plus importante dans le monde des serveurs web. Créé en 2020, il a su se démarquer de concurrents bien établis, tels que Webpack, pour s’imposer petit à petit comme une référence de la programmation web. À tel point qu’il est aujourd’hui intégré nativement à certains frameworks.
Vous voulez tout savoir sur cet outil ? Son fonctionnement technique ? Pourquoi vous devriez l’adopter ? Nous vous expliquons tout dans cet article.
Le point sur Vite JS
Qu’est-ce que Vite JS ? Définition
Vite (du mot français éponyme) est un serveur de développement, créé pour faire tourner localement des applis web. Cet outil a pour fondateur Evan You, déjà connu pour avoir développé le framework Vue.js.
La première version de cet outil front, sorti en 2020, a connu un rapide succès. Depuis, cette techno est très régulièrement mise à jour : sa dernière update majeure a eu lieu en décembre 2022, avec la version 4.0.
Concurrent direct à des outils tels que Webpack, Rollup, Snowpack ou Parcel, Vite se distingue de ces derniers par sa rapidité et sa facilité d’utilisation, comme nous l’expliquerons dans cet article.
Cette techno front supporte les frameworks Vue, React ou Svelte. Il est même nativement intégré avec Vue, depuis la version 3 de ce framework.
Pourquoi utiliser cette technologie front-end ?
Si vite a subi une adoption massive dès son lancement, c’est grâce à son fonctionnement particulier qui permet d’accélérer drastiquement le processus de développement.
La raison principale en est son approche ‘on-demand development’. En clair, lors d’un build, au lieu de compiler l’ensemble des fichiers (comme le ferait webpack), Vite ne compile que les fichiers qui ont besoin de l’être (ceux qui ont été modifiés), ce qui augmente considérablement le temps de construction, et donc de mise en production.
Le hot-reloading fonctionne de la même façon, et permet de recharger l’application web de façon dynamique lors du développement. Avec Vite, ce rafraîchissement s’exécute composant par composant (ou module par module, pour être plus précis), en fonction de ceux qui ont été modifiés. Sans avoir à recharger l’ensemble de l’application, donc. Fonctionnant à l’aide du protocole WebSocket, ce hot-reloading paraît instantané, ce qui offre un vrai gain de temps et d’expérience aux développeurs.
Enfin, la configuration du serveur est très simple : elle ne repose que sur un unique fichier JavaScript. Ce dernier contient alors toutes les options possibles de configuration serveur, qui sont détaillées dans la documentation officielle.
Vite dans la technique
Maintenant que nous avons fait connaissance avec l’outil Vite, plongeons un peu dans la technique.
Vite, plutôt que de réinventer la roue, repose sur des outils ou librairies déjà existantes. Parmi celles-ci :
- Rollup, est le bundler utilisé par Vite, qui lui permet d’avoir un code final optimisé et de taille réduite ;
- Connect, la librairie à la base du serveur local Vite ;
- Chokidar, pour détecter les changements dans le code et ainsi mettre à jour l’interface via le hot-reloading ;
- esbuild est utilisé par Vite pour compiler le projet. Cet outil permet de builder rapidement et efficacement un ensemble de sources web, JavaScript et CSS.
En plus de ces librairies, qui permettent à Vite d’être aussi rapide et efficace, l’outil repose également sur d’autres bibliothèques, plus communes. Citons parmi celles-ci Babel, pour transpiler le code (traduire le code TypeScript ou JavaScript en un code qui sera supporté par tous les navigateurs). Mais aussi PostCSS, qui permet de simplifier l’utilisation de CSS, complexe en JavaScript.
Au niveau de sa configuration, nous l’avons dit, Vite repose sur un unique fichier JavaScript (ou TypeScript) : vite.config.js (ou vite.config.ts). Par défaut, ce fichier est presque vide – moins d’une dizaine de lignes de code ! Et pour cause, Vite fonctionne très bien “out of the box”, sans configuration spécifique. Cependant, il est possible d’avoir une configuration poussée de l’outil, en fonction des besoins et des préférences du développeur freelance.
Voici un exemple de configuration personnalisée du serveur :
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
// configuration du build
build: {
outDir: 'dist',
assetsDir: 'assets',
minify: true,
sourcemap: true,
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
},
// configuration du serveur local
server: {
port: 3000,
proxy: {
'/api': {
target: '<http://localhost:8080>',
changeOrigin: true,
rewrite: (path) => path.replace(/^\\/api/, '')
}
}
},
// création d'alias, pour personnaliser l'import des modules
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'styles': path.resolve(__dirname, 'src/styles')
}
}
});
Dans cet exemple, nous distinguons 3 blocs principaux :
- build, qui définit tous les paramètres de compilation du projet (ici principalement le répertoire de sortie, et les paramètres terser, responsable de la minification du code) ;
- server, qui configure le serveur de développement local (ici le port et le proxy) ;
- resolve, qui gère la redirection des imports de module (ici, un ‘@’ dans l’import redirigera vers ‘src’, tandis que ‘styles’ ira chercher dans le répertoire ‘src/styles’).
Comment utiliser Vite.js avec un projet web ?
Nous l’avons dit, Vite est un outil simple à utiliser. Créer un projet utilisant ce serveur local avec Vue, Svelte ou React se fait une CLI (Command Line Interface). Cette dernière, native à l’outil, permet de créer le projet en quelques secondes seulement.
Voici les commandes à utiliser pour créer une web-app en utilisant Vite, avec npm :
# créer un projet en utilisant la dernière version de vite
npm create vite@latest
# des questions seront posées à travers le terminal :
Project name:
Select a framework:
Select a variant:
# puis, pour installer les dépendances de base et lancer le projet :
cd vite-project
npm install
npm run dev
Et voilà ! Le projet est créé, les dépendances installées, et tout est prêt pour lancer le développement. Suivant le projet, il est possible d’avoir besoin d’une configuration spécifique. Il faudra alors modifier le fichier vite.config.js, dont nous avons donné un exemple dans la section précédente.
Conclusion
En conclusion, Vite, nouveau venu dans le monde des serveurs web, a su s’imposer face a de gros concurrents, tels que Webpack ou Rollup. Grâce à sa configuration simpliste, minimaliste, et son approche “on-demand development”, il fait gagner un temps considérable aux développeurs – ce qui explique son adoption rapide. Faisant maintenant partie nativement de la suite Vue, nul doute que sa popularité va continuer à croître, et ses fonctionnalités à évoluer !
