As of this week, we are:
What is Vite
It has 2 modes: dev server and build.
The dev server is instant, has super-fast hot module reload, and has lots of batteries.
The build is optimized for production and powered by rollup.
You get the best of both worlds: Really fast feedback loop in dev mode and an optimized build for production.
What makes Vite special
Vite is not the only “nextgen tooling” for front-end. Snowpack, WMR or @web/dev-server have pioneered some of the innovations in Vite. But Vite took it to the next level and quickly created an amazing community around it.
Some of the special features of Vite:
- Framework agnostic: Plays nice with Vue, React, Svelte, Lit, Preact or SolidJS.
- Super fast dev mode: Thanks to on-demand compilation via esbuild
- Universal plugins: Vite runs a Rollup-superset plugin shared between dev and build.
Vite is taking over the frontend tooling space
- Slinkity (Eleventy and Vite)
- Storybook with Vite
- Astro moving to Vite
- StackBlitz sandboxes
- Replit moving to Vite
- Nuxt 3 on Vite
but you can also add:
And probably others…
We are also moving to Vite… in many ways :)
1/ Apps documentation → VitePress
2/ Apps Build → Vite
3/ Our in-browser compiler → browser-vite
For Backlight.dev, we created a brand new version of our in-browser compiler using Vite. To make it run in the browser, we created browser-vite - a patched version of Vite running in a WebWorker. We compile code using esbuild-wasm (The WebAssembly version of esbuild) and even support Vite HMR 🤯.
The results are astonishing, and we will share more about them in later posts.
Meanwhile, you can check browser-vite on GitHub.
As described above, Vite is taking an essential part of our product development tooling but also inside our products themselves.
We see a lot of teams embracing Vite in the future. We are proud to help the Vite ecosystem with our contribution.