Today I'm excited to announce the official release of Vite 2.0!
Vite (French word for "fast", pronounced /vit/) is a new kind of build tool for frontend web development. Think a pre-configured dev server + bundler combo, but leaner and faster. It leverages browser's native ES modules support and tools written in compile-to-native languages like esbuild to deliver a snappy and modern development experience.
To get a sense of how fast Vite is, here's a video comparison of booting up a React application on Repl.it using Vite vs. create-react-app (CRA):
If you've never heard of Vite before and would love to learn more about it, check out the rationale behind the project. If you are interested in how Vite differs from other similar tools, check out the comparisons.
What's New in 2.0
Since we decided to completely refactor the internals before 1.0 got out of RC, this is in fact the first stable release of Vite. That said, Vite 2.0 brings about many big improvements over its previous incarnation:
Framework Agnostic Core
The original idea of Vite started as a hacky prototype that serves Vue single-file components over native ESM. Vite 1 was a continuation of that idea with HMR implemented on top.
Vite 2.0 takes what we learned along the way and is redesigned from scratch with a more robust internal architecture. It is now completely framework agnostic, and all framework-specific support is delegated to plugins. There are now official templates for Vue, React, Preact, Lit Element, and ongoing community efforts for Svelte integration.
New Plugin Format and API
Inspired by WMR, the new plugin system extends Rollup's plugin interface and is compatible with many Rollup plugins out of the box. Plugins can use Rollup-compatible hooks, with additional Vite-specific hooks and properties to adjust Vite-only behavior (e.g. differentiating dev vs. build or custom handling of HMR).
The programmatic API has also been greatly improved to facilitate higher level tools / frameworks built on top of Vite.
esbuild Powered Dep Pre-Bundling
Since Vite is a native ESM dev server, it pre-bundles dependencies to reduce the number browser requests and handle CommonJS to ESM conversion. Previously Vite did this using Rollup, and in 2.0 it now uses esbuild which results in 10-100x faster dependency pre-bundling. As a reference, cold-booting a test app with heavy dependencies like React Meterial UI previously took 28 seconds on an M1-powered Macbook Pro and now takes ~1.5 seconds. Expect similar improvements if you are switching from a traditional bundler based setup.
First-class CSS Support
Vite treats CSS as a first-class citizen of the module graph and supports the following out of the box:
-
Resolver enhancement:
@importandurl()paths in CSS are enhanced with Vite's resolver to respect aliases and npm dependencies. -
URL rebasing:
url()paths are automatically rebased regardless of where the file is imported from. - CSS code splitting: a code-split JS chunk also emits a corresponding CSS file, which is automatically loaded in parallel with the JS chunk when requested.
Server-Side Rendering (SSR) Support
Vite 2.0 ships with experimental SSR support. Vite provides APIs to to efficiently load and update ESM-based source code in Node.js during development (almost like server-side HMR), and automatically externalizes CommonJS-compatible dependencies to improve development and SSR build speed. The production server can be completely decoupled from Vite, and the same setup can be easily adapted to perform pre-rendering / SSG.
Vite SSR is provided as a low-level feature and we are expecting to see higher level frameworks leveraging it under the hood.
Opt-in Legacy Browser Support
Vite targets modern browsers with native ESM support by default, but you can also opt-in to support legacy browers via the official @vitejs/plugin-legacy. The plugin automatically generates dual modern/legacy bundles, and delivers the right bundle based on browser feature detection, ensuring more efficient code in modern browsers that support them.
Give it a Try!
That was a lot of features, but getting started with Vite is simple! You can spin up a Vite-powered app literally in a minute, starting with the following command (make sure you have Node.js >=12):
npm init @vitejs/app
Then, check out the guide to see what Vite provides out of the box. You can also check out the source code on GitHub, follow updates on Twitter, or join discussions with other Vite users on our Discord chat server.
Top comments (48)
Congrats on your first DEV post!
Wait, this is literally Evan :v
I think we need profile verification for public figures
Good idea
I didn't believe it's him first
Comments helped me to figure all out
Please name a single platform where profile verification helped and didn't lead to disaster.
yea his first post :D
Now we need a post about Vite vs Vue CLI for project scaffolding. And it would be awesome if we can have Vite as part of Vue CLI in the future. I'd preffer to stick with Vue CLI instead of relying on another one for my apps
yes ! vite is very fast
Evan, you rule!
I am using Vite with vanilla js and Tailwind CSS and I was mind blowing, it's insanely fast and the development experience is awesome
Have you tried that in prod too?
no i haven't tried it yet
I tried this out today, and it is awesome. This makes webpack seem silly. I've tried snowpack in the past but could not get the sourcemaps to work correctly with react + typescript + monorepo. Vite does. I plan on using this for my projects going forward.
I check it today and I have to say it's amazing, fast and easy. I wrote an article explaining my experience dev.to/richicodes/hello-vite-react...
Congratulations guys! I started working with Vue v3 and Vite a few months ago and it's awesome.
Recent laravel-mix release sped up compilation in a vue app for me by a lot (twitter.com/dev_michaelz/status/13...)
Excited to see how vite will further bring these times down.
So is vite just like snowpack but with a different name?
I was asking myself the exact same question. 😂 A little bit confused about the similarities and differences. I think both use esbuild.
comparisons are listed
vitejs.dev/guide/comparisons.html#...
Wait Evan You has a DEV account? He must already have 1K followers by nowGreat first post on DEV, even tho it is kind of an advertisement and I hope to see more cool posts by you here.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.