[Talk]: Au coeur d’une pipeline: démystifions Vite et ses plugins

[Barbapapazes]

Titre

Au coeur d’une pipeline: démystifions Vite et ses plugins

Contenu

Warning

Cette conférence n'est pas prête avant mars.

Dans le paysage du frontend, il y en a un qui met (presque) tout le monde d’accord. Au point où, mi-2025, son nombre de téléchargements a dépassé celui de Webpack.

Vite est devenu, en l’espace de quelques années, un incontournable, une plateforme et une infrastructure communes pour le frontend. Vue, Nuxt, Remix, TanStack Start, Angular, Analog, Solid, Qwik, Astro, Slidev, Storybook, Tailwind CSS, Cloudflare, Laravel, Nitro et bien d’autres se basent désormais dessus. Il n’y a que Next qui résiste.

Au-delà d’utiliser Vite, toutes ces librairies et frameworks reposent sur un unique et même concept : les plugins, seul moyen d’étendre les capacités de Vite. Même les fonctionnalités de Vite sont des plugins ! Mais sais-tu comment ils fonctionnent ? Comment en développer un ? Et ce qui se cache dans la pipeline qui les orchestre tous ?

Dans cette session, plonge dans le monde fascinant (et parfois énigmatique) de la pipeline de Vite. Ensemble, nous repasserons sur l’histoire de Vite, de son passé à son futur, puis nous nous intéresserons à son fonctionnement en analysant la pipeline à travers de véritables plugins. À la fin, Vite n’aura plus de secret pour toi.

---

Bonjour 👋,

Cette intervention sera technique, et c’est volontaire.

Vite a initialement été développé pour Vue à partir d’avril 2020. Mais en février 2021, retournement de situation, Vite 2.0 est annoncé, sans avoir laissé le temps à la 1.0 de sortir de sa release candidate (RC). Dans l’annonce, un titre va changer le monde du frontend : Framework Agnostic Core. Evan You, créateur de Vue et Vite, a réécrit Vite en repartant de zéro pour le rendre agnostique du framework. Autrement dit, il devient possible pour tous les frameworks, existants et à venir, d’utiliser Vite comme plateforme commune, et de tirer parti de ses fonctionnalités.

La grande nouveauté, qui permet à Vite d’être agnostique des frameworks, ce sont les plugins. Il est possible de faire reposer dessus l’ensemble des spécificités du framework pour le rendre compatible avec Vite. Ce changement, d’apparence minime, a complètement bouleversé le frontend et le backend. Les frameworks frontend (Vue, Nuxt, Remix, TanStack, Angular), les frameworks backend (Laravel, Nitro, Cloudflare), et même des outils comme Storybook ou Tailwind CSS ont migré vers Vite.

Aujourd’hui, si vous utilisez un framework JavaScript, vous utilisez probablement Vite. En juillet 2025, Vite a surpassé Webpack en nombre de téléchargements sur npm.

Mais si une majorité des développeurs utilise Vite, ses plugins, sur lesquels tout repose, restent méconnus. Sur internet, il est impossible de trouver du contenu entrant dans les détails des concepts, d’apprendre à en construire un, ou de vulgariser la pipeline qui les orchestre tous. C’est dommage, parce qu’au-delà de la curiosité qu’ils peuvent susciter, les comprendre et les maîtriser s’avère être un véritable atout. Parfois, un plugin Vite sauve votre projet.

Pour lever le voile sur ces mystérieux plugins, voici le déroulé de la présentation :

1. Vite, origine, passé et futur : Cette première partie vise à retracer l’histoire de Vite, comprendre son fonctionnement et sa grande différence (serveur de développement natif basé sur ESM et mode non bundlé). Cela permettra d’expliquer une part de son succès tout en ayant une vue macro du système. Ce sera aussi l’occasion d’observer les nouveautés de Vite 8 avec l’intégration de Rolldown.
2. Au cœur de Vite : plugins et pipeline : C’est le centre de la conférence pour expliquer les trois grands concepts d’un plugin : resolveId, load, transform, et deux spécificités majeures : les filtres et l’ordre.
   Cela permettra d’explorer l’import d’images import 'image.png', de CSS import 'main.css', des plugins virtuels import 'virtual:my-plugin', ou encore de import.meta.glob. Rien de tout cela n’est natif au language, tout est géré par des plugins internes.
   • Une majorité des fonctionnalités de Vite est construite via des plugins.
   • La notion de pipeline est omniprésente dans le code source.
3. Des plugins concrets démystifiés : L’idée de la troisième partie, qui sera possiblement diluée dans la seconde, est de voir une application concrète, dans de véritables plugins, des concepts vus dans la partie précédente.
   • Laravel Vite permettra d’observer la manière dont PHP et Node.js arrive à s’échanger une information via un plugin et sur la manière dont les assets sont servis.
   • VitePress permettra de voir un cas concret de l’utilisation d’un plugin virtuel avec la récupération de données locales et distantes mais aussi la gestion des routes dynamiques.
   • Inspect permettra de visualiser concrètement la pipeline de Vite. Le meilleur moyen pour inspecter et monitorer Vite de l’intérieur.
   • Une analyse des plugins sera aussi faites pour démystifier des frameworks comme Vue, Svelte ou Angular.

Sur une partie de ces points, j’ai pu échanger avec Alexander Lichter, DevRel chez VoidZero.

Cette session a pour objectif de démystifier les plugins et la pipeline de Vite tout en offrant une compréhension approfondie du fonctionnement de plugins populaires. À la fin, chacun aura les clés pour comprendre quand développer un plugin et la manière de le faire. Ça sera technique mais c’est aussi ce qui rend cette conférence particulièrement intéressante.

L’une des originalités du talk tient dans le fait que l’audience sera le héro, à la manière des livres dont vous êtes le héro. Ainsi, c’est l’audience qui construira, via un système de choix en temps réel, le talk au fur et à mesure. Un squelette et une arborescence sera présente pour assurer la cohérence du talk. Le système est développé par mes soins, il s’appelle Inalia et a fait ses preuves l’an dernier durant l’ensemble de mes conférences.

L’objectif est double. D’une part rendre la talk unique, dynamique et vivant tout en immergeant le spectateur et d’autre part, rendre l’écriture du talk plus rigolote et intéressante.

Il s’agit d’une nouvelle conférence. Elle n’a jamais été donnée.

L’an dernier, j’ai eu l’opportunité de parler 19 fois lors de 11 évènements différents. L’ensemble de mes conférences sont disponibles sur soubiran.dev/talks.

Durée

Regular (20 minutes)

Niveau

Intermédiaire

Nom et prénom

Soubiran Estéban

Contact (Bluesky, X, LinkedIn, Autre)

https://www.linkedin.com/in/esteban25/

Entreprise

No response

Rôle ou fonction dans l'entreprise

No response