Vite 3 was launched 5 months in the past. npm downloads per week have gone from 1 million to 2.5 million since then. The ecosystem has matured too, and continues to develop. On this yr’s Jamstack Conf survey, utilization among the many neighborhood jumped from 14% to 32% whereas holding a excessive 9.7 satisfaction rating. We noticed the steady releases of Astro 1.0, Nuxt 3, and different Vite-powered frameworks which are innovating and collaborating: SvelteKit, Strong Begin, Qwik Metropolis. Storybook introduced first-class assist for Vite as certainly one of its primary options for Storybook 7.0. Deno now helps Vite. Vitest adoption is exploding, it’s going to quickly characterize half of Vite’s npm downloads. Nx can also be investing within the ecosystem, and formally helps Vite.
As a showcase of the expansion Vite and associated tasks have skilled, the Vite ecosystem gathered on October eleventh at ViteConf 2022. We noticed representatives from the principle net framework and instruments inform tales of innovation and collaboration. And in a symbolic transfer, the Rollup crew select that precise day to launch Rollup 3.
At the moment, the Vite crew with the assistance of our ecosystem companions, is joyful to announce the discharge of Vite 4, powered throughout construct time by Rollup 3. We have labored with the ecosystem to make sure a easy improve path for this new main. Vite is now utilizing Rollup 3, which allowed us to simplify Vite’s inner asset dealing with and has many enhancements. See the Rollup 3 launch notes right here.
Fast hyperlinks:
Docs in different languages:
Should you lately began utilizing Vite, we recommend studying the Why Vite Information and testing the Getting Began and Options information. If you wish to get entangled, contributions are welcome at GitHub. Virtually 700 collaborators have contributed to Vite. Comply with the updates on Twitter and Mastodon, or be a part of collaborate with others on our Discord neighborhood.
Begin enjoying with Vite 4
Use pnpm create vite to scaffold a Vite undertaking together with your most popular framework, or open a began template on-line to play with Vite 4 utilizing vite.new.
It’s also possible to run pnpm create vite-extra to get entry to templates from different frameworks and runtimes (Strong, Deno, SSR, and library starters). create vite-extra templates are additionally accessible while you run create vite beneath the Others possibility.
Word that Vite starter templates are supposed for use as a playground to check Vite with totally different frameworks. When constructing your subsequent undertaking, we suggest reaching out to the starters really useful by every 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 utilizing SWC throughout improvement
SWC is now a mature substitute for Babel, particularly within the context of React tasks. SWC’s React Quick Refresh implementation is rather a lot sooner than Babel, and for some tasks, it’s now a greater various. From Vite 4, two plugins can be found for React tasks with totally different tradeoffs. We imagine that each approaches are price supporting at this level, and we’ll proceed to discover enhancements to each plugins sooner or later.
@vitejs/plugin-react
@vitejs/plugin-react is a plugin that makes use of esbuild and Babel, reaching quick HMR with a small bundle footprint and the pliability of having the ability to use the Babel remodel pipeline.
@vitejs/plugin-react-swc (new)
@vitejs/plugin-react-swc is a brand new plugin that makes use of esbuild throughout construct, however replaces Babel with SWC throughout improvement. For large tasks that do not require non-standard React extensions, chilly begin and Sizzling Module Substitute (HMR) might be considerably sooner.
Browser Compatibility
The fashionable browser construct now targets safari14 by default for wider ES2020 compatibility. Which means trendy builds can now use BigInt and that the nullish coalescing operator is not transpiled anymore. If that you must assist older browsers, you’ll be able to add @vitejs/plugin-legacy as regular.
Importing CSS as a String
In Vite 3, importing the default export of a .css file might introduce a double loading of CSS.
import cssString from './world.css'
This double loading might happen since a .css file might be emitted and it is doubtless that the CSS string may even be utilized by the appliance code — for instance, injected by the framework runtime. From Vite 4, the .css default export has been deprecated. The ?inline question suffix modifier must be used on this case, as that does not emit the imported .css types.
import stuff from './world.css?inline'
Be taught extra within the Migration Information.
Atmosphere Variables
Vite now makes use of dotenv 16 and dotenv-expand 9 (beforehand dotenv 14 and dotenv-expand 5). You probably have a worth together with # or `, you will want to wrap them with quotes.
-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"
For extra particulars, see the dotenv and dotenv-expand changelog.
Different Options
- CLI Shortcuts (press
hthroughout dev to see all of them) (#11228) - Help for patch-package when pre bundling dependencies (#10286)
- Cleaner construct logs output (#10895) and swap to
kBto align with browser dev instruments (#10982) - Improved error messages throughout SSR (#11156)
Lowered Bundle Dimension
Vite cares about its footprint, to hurry up set up, particularly within the use case of playgrounds for documentation and reproductions. And as soon as extra, this main brings enhancements in Vite’s bundle measurement. Vite 4 set up measurement is 23% smaller in comparison with vite 3.2.5 (14.1 MB vs 18.3 MB).
Upgrades to Vite Core
Vite Core and vite-ecosystem-ci proceed to evolve to offer a greater expertise to maintainers and collaborators and to make sure that Vite improvement scales to deal with the expansion within the ecosystem.
Framework plugins out of core
@vitejs/plugin-vue and @vitejs/plugin-react have been a part of Vite core monorepo because the first variations of Vite. This helped us to get an in depth suggestions loop when making modifications as we have been getting each Core and the plugins examined and launched collectively. With vite-ecosystem-ci we are able to get this suggestions with these plugins developed on unbiased repositories, so from Vite 4, they’ve been moved out of the Vite core monorepo. That is significant for Vite’s framework-agnostic story and can permit us to construct unbiased groups to keep up every of the plugins. You probably have bugs to report or options to request, please create points on the brand new repositories shifting ahead: vitejs/vite-plugin-vue and vitejs/vite-plugin-react.
vite-ecosystem-ci enhancements
vite-ecosystem-ci extends Vite’s CI by offering on-demand standing reviews on the state of the CIs of most main downstream tasks. We run vite-ecosystem-ci 3 times every week towards Vite’s primary department and obtain well timed reviews earlier than introducing a regression. Vite 4 will quickly be suitable with most tasks utilizing Vite, which already ready branches with the wanted modifications and might be releasing them within the subsequent few days. We’re additionally capable of run vite-ecosystem-ci on-demand on PRs utilizing /ecosystem-ci run in a remark, permitting us to know the impact of modifications earlier than they hit primary.
Acknowledgments
Vite 4 would not be potential with out uncountable hours of labor by Vite contributors, lots of them maintainers of downstream tasks and plugins, and the efforts of the Vite Group. All of us have labored collectively to enhance Vite’s DX as soon as extra, for each framework and app utilizing it. We’re grateful to have the ability to enhance a standard base for such a vibrant ecosystem.
We’re additionally grateful to people and corporations sponsoring the Vite crew, and corporations investing instantly in Vite’s future: @antfu7‘s work on Vite and the ecosystem is a part of his job at Nuxt Labs, Astro is funding @bluwyoo‘s’ Vite core work, and StackBlitz hires @patak_dev to work full time on Vite.
Subsequent steps
Our speedy focus could be on triaging newly opened points to keep away from disruption by potential regressions. If you need to get entangled and assist us enhance Vite, we recommend beginning with points triaging. Be a part of our Discord and attain out on the #contributing channel. Polish our #docs story, and #assist others. We have to proceed to construct a useful and welcoming neighborhood for the subsequent wave of customers, as Vite’s adoption continues to develop.
There are a variety of open fronts to maintain enhancing the DX of everybody that has chosen Vite to energy their frameworks and develop their apps. Onwards!
