DEV Community

loading...

Announcing Vite 2.0

yyx990803 profile image Evan You ・4 min read

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.

Discussion (46)

pic
Editor guide
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
horusgoul profile image
Horus Lugo

After using the beta for a month I can only say that it's incredibly fast and easy to use.

Congrats!

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

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
shubharora734 profile image
shubharora734

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

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️

Vite looks pretty cool. As a React dev (thank you for supporting React btw!) I plan to try it out.

Collapse
itscasey profile image
Casey 💎

Yooo Evan!

Vite is looking awesome

Collapse
gersongams profile image
Gerson Garrido

I just tested a few moments ago, and HOLY SH1T!!! the speed is unbelievable, I thought the speed was a bluff but damn!. This will be my first option for every app!

Collapse
n3m3s7s profile image
Fabio Politi

Outstanding!!!
Congratulations and please keep up with your Amazing work!
I've read the documentation days ago but now I will try Vite ASAP

Collapse
pdslly profile image
pdslly

支持尤大👏👏

Collapse
jedipixels profile image
Marco Napoli

Is there a way when creating a project to choose options like vuex, routing... and so on like the Vue Cli?

Thanks.

Collapse
hey68you profile image
hey68you

Sounds really great - I would be interested in migrating an existing big React webpack project to use Vite. Are there any webpack migration documents/tutorials ?
Thanks

Collapse
hqjs profile image
hq

Try hqjs.org it is the first ESM friendly builder that is framework agnostic since 2018, it supports Angular as well and requires no configuration.

Collapse
xxholly32 profile image
xx

支持尤大!!!

Collapse
xanadev profile image
abid

Your work is inspiring, I'll definitely give Vite a spin

Keep up the great work.

Collapse
jeankaplansky profile image
Jean Kaplansky

Oh, wow! I love that you got to scalability by plugin by version 2. You really had me when you said you're supporting CSS as a first-class citizen! I'm bookmarking this one to come back to later.

Collapse
pixelagil profile image
Alejandro Vivas

Wow this is absolutely incredible. It just took me like 5 segs to get a new react project and install all dependencies with yarn.

Congratz and good job!

Collapse
fabianmossberg profile image
Fabian Mossberg

This looks really nice!

Collapse
viniciuskneves profile image
Collapse
okydk profile image
Stefan

Been using Vite in production for a while now. Now I dare to say it out loud! 🥳 Great work and big up to esbuild too!

Collapse
davedavehong profile image
davedavehong

great!

Collapse
716green profile image
Bob Bass

This article is great because I played with vite when Evan first tweeted about the NPX module but I didn't quite understand what the it was going for. I'm excited to give it another go now.

Collapse
alimobasheri profile image
MirAli Mobasheri

That's great news! Good luck.