Vite 3 was released five months ago. npm downloads per week have gone from 1 million to 2.5 million since then. The ecosystem has matured too, and continues to grow. In this year’s Jamstack Conf survey, usage among the community jumped from 14% to 32% while keeping a high 9.7 satisfaction score. We saw the stable releases of Astro 1.0, Nuxt 3, and other Vite-powered frameworks that are innovating and collaborating: SvelteKit, Solid Start, Qwik City. Storybook announced first-class support for Vite as one of its main features for Storybook 7.0. Deno now supports Vite. Vitest adoption is exploding, it will soon represent half of Vite’s npm downloads. Nx is also investing in the ecosystem, and officially supports Vite.
As a showcase of the growth Vite and related projects have experienced, the Vite ecosystem gathered on October 11th at ViteConf 2022. We saw representatives from the main web framework and tools tell stories of innovation and collaboration. And in a symbolic move, the Rollup team choose that exact day to release Rollup 3.
Today, the Vite team with the help of our ecosystem partners, is happy to announce the release of Vite 4, powered during build time by Rollup 3. We’ve worked with the ecosystem to ensure a smooth upgrade path for this new major. Vite is now using Rollup 3, which allowed us to simplify Vite’s internal asset handling and has many improvements. See the Rollup 3 release notes here.
Quick links:
Docs in other languages:
If you recently started using Vite, we suggest reading the Why Vite Guide and checking out the Getting Started and Features guide. If you want to get involved, contributions are welcome at GitHub. Almost 700 collaborators have contributed to Vite. Follow the updates on Twitter and Mastodon, or join collaborate with others on our Discord community.
Start playing with Vite 4
Use pnpm create vite to scaffold a Vite project with your preferred framework, or open a started template online to play with Vite 4 using vite.new.
You can also run pnpm create vite-extra to get access to templates from other frameworks and runtimes (Solid, Deno, SSR, and library starters). create vite-extra templates are also available when you run create vite under the Others option.
Note that Vite starter templates are intended to be used as a playground to test Vite with different frameworks. When building your next project, we recommend reaching out to the starters recommended by each framework. Some frameworks now redirect in create vite to their starters too (create-vue and Nuxt 3 for Vue, and SvelteKit for Svelte).
New React plugin using SWC during development
SWC is now a mature replacement for Babel, especially in the context of React projects. SWC’s React Fast Refresh implementation is a lot faster than Babel, and for some projects, it is now a better alternative. From Vite 4, two plugins are available for React projects with different tradeoffs. We believe that both approaches are worth supporting at this point, and we’ll continue to explore improvements to both plugins in the future.
@vitejs/plugin-react
@vitejs/plugin-react is a plugin that uses esbuild and Babel, achieving fast HMR with a small package footprint and the flexibility of being able to use the Babel transform pipeline.
@vitejs/plugin-react-swc (new)
@vitejs/plugin-react-swc is a new plugin that uses esbuild during build, but replaces Babel with SWC during development. For big projects that don’t require non-standard React extensions, cold start and Hot Module Replacement (HMR) can be significantly faster.
Browser Compatibility
The modern browser build now targets safari14 by default for wider ES2020 compatibility. This means that modern builds can now use BigInt and that the nullish coalescing operator isn’t transpiled anymore. If you need to support older browsers, you can add @vitejs/plugin-legacy as usual.
Importing CSS as a String
In Vite 3, importing the default export of a .css file could introduce a double loading of CSS.
ts
import cssString from './global.css'
This double loading could occur since a .css file will be emitted and it’s likely that the CSS string will also be used by the application code — for example, injected by the framework runtime. From Vite 4, the .css default export has been deprecated. The ?inline
