DEV Community

Evan You
Evan You

Posted on

Announcing Vite 2.0

Alt Text

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: @import and url() 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
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
ben profile image
Ben Halpern

Congrats on your first DEV post!

Collapse
 
qm3ster profile image
Mihail Malo

Wait, this is literally Evan :v

Collapse
 
stanleymasinde profile image
Stanley Masinde

I think we need profile verification for public figures

Thread Thread
 
sabrinastolz profile image
SabrinaStolz

Good idea
I didn't believe it's him first
Comments helped me to figure all out

Thread Thread
 
qm3ster profile image
Mihail Malo

Please name a single platform where profile verification helped and didn't lead to disaster.

Collapse
 
raghavmisra profile image
Raghav Misra

yea his first post :D

Collapse
 
frondor profile image
Federico VΓ‘zquez

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

Collapse
 
joinmouse profile image
joinmouse

yes ! vite is very fast

Collapse
 
stereobooster profile image
stereobooster

Evan, you rule!

Collapse
 
enochndika profile image
Enoch Ndika

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

Collapse
 
adarshaacharya profile image
Aadarsha Acharya πŸš€

Have you tried that in prod too?

Collapse
 
enochndika profile image
Enoch Ndika

no i haven't tried it yet

Collapse
 
adammlr profile image
Adam Miller • Edited

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.

Collapse
 
richicodes profile image
richi.codes

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...

Collapse
 
mgagna profile image
Mauro Gagna

Congratulations guys! I started working with Vue v3 and Vite a few months ago and it's awesome.

Collapse
 
michi profile image
Michael Z

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.

Collapse
 
dajpes profile image
dajpes

So is vite just like snowpack but with a different name?

Collapse
 
mauro_codes profile image
Mauro Garcia

I was asking myself the exact same question. πŸ˜‚ A little bit confused about the similarities and differences. I think both use esbuild.

Collapse
 
ericteen profile image
Guanghui Cheng

comparisons are listed
vitejs.dev/guide/comparisons.html#...

Collapse
 
shadowtime2000 profile image
shadowtime2000

Wait Evan You has a DEV account? He must already have 1K followers by now

Great 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.