Vite 2.0 Announcement

Today I am pleased to announce the official release of Vite 2.0!





Vite (French for "fast", pronounced /vit/



("vit" for trans.) ) Is a new kind of build tool for web development. Think of a preconfigured dev server + collector, but smaller and faster. It uses browser-built ES module support and tools like esbuild for a fast and modern development experience.





To get an idea of ​​how fast Vite is, here's a video comparing uploading a React app to Repl.it using Vite and create-react-app



(CRA):





If you've never heard of Vite before and would like to know more about it, check out the rationale behind this project . If you're wondering how Vite differs from other similar tools, check out the comparisons .





What's new in version 2.0

Since we decided to completely reorganize the internals before version 1.0 left RC, this is actually the first stable version of Vite. However, Vite 2.0 has many significant improvements over the previous incarnation:





Agnostic core of the framework

Vite , Vue ESM. Vite 1 HMR .





Vite 2.0 , , . , . Vue, React, Preact, Lit Element Svelte .





( Awesome Vite - . .)





API

WMR, Rollup Rollup . , Rollup, , Vite, Vite (, HMR).





API , / , Vite.





esbuild

Vite ESM, , CommonJS ESM. Vite Rollup, 2.0 esbuild, 10-100- . , , React Meterial UI, 28 Macbook Pro M1, ~1,5 . , .





CSS

Vite CSS :





  1. : @import



    url()



    CSS Vite npm.





  2. URL: url()



    , .





  3. CSS : JS CSS, JS .





Server-Side Rendering (SSR) Support

Vite 2.0 SSR. Vite API- ESM Node.js ( HMR ) CommonJS SSR. Vite, / SSG.





Vite SSR , , .





Vite ESM, @vitejs/plugin-legacy. modern/legacy , .





!

, Vite ! Vite , (, Node.js> = 12):





npm init @vitejs/app
      
      



Then check out the guide to see what Vite has to offer 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 .








All Articles