June 24, 2025

We're happy to share the release of Vite 7! It has been 5 years since Evan You sent the first commit to the Vite repo, and nobody could have predicted how much the frontend ecosystem would change since then. Most modern frontend frameworks and tools are now working together, building on top of Vite's shared infrastructure. And they can innovate at a faster pace by sharing at a higher level. Vite is now being downloaded 31 million times a week, with a 14 million increase in the last seven months since the previous major release.

This year, we're making several big steps. To start with, ViteConf is going to be in person! The Vite Ecosystem will gather in Amsterdam on October 9-10! Organized by JSWorld in partnership with Bolt, VoidZero, and the Vite Core Team! We had three incredible ViteConf online editions, and we can't wait to meet in real life. Check out the speakers and get your ticket at the ViteConf site!

And VoidZero continues to make significant strides in its mission to build an open source unified development toolchain for the JavaScript ecosystem. Over the last year, the VoidZero team has been working on Rolldown, a Rust-based next-generation bundler, as part of a broader effort to modernize Vite's core. You can try out the Rolldown-powered Vite today by using the rolldown-vite package instead of the default vite package. It is a drop-in replacement, as Rolldown will become the default bundler for Vite in the future. Switching should reduce your build time, especially for larger projects. Read more at the Rolldown-vite announcement blog post and our migration guide.

Through a partnership between VoidZero and NuxtLabs, Anthony Fu is working on creating Vite DevTools. They will offer deeper and more insightful debugging and analysis for all Vite-based projects and frameworks. You can read more on the VoidZero and NuxtLabs join forces on Vite Devtools blog post.

Quick links:

• Docs
• New Translation: فارسی
• Other Translations: 简体中文, 日本語, Español, Português, 한국어, Deutsch
• Migration Guide
• GitHub Changelog

Play online with Vite 7 using vite.new or scaffold a Vite app locally with your preferred framework running pnpm create vite. Check out the Getting Started Guide for more information.

We invite you to help us improve Vite (joining the more than 1.1K contributors to Vite Core), our dependencies, or plugins and projects in the ecosystem. Learn more at our Contributing Guide. A good way to get started is by triaging issues, reviewing PRs, sending tests PRs based on open issues, and supporting others in Discussions or Vite Land's help forum. If you have questions, join our Discord community and talk to us in the #contributing channel.

Stay updated and connect with others building on top of Vite by following us on Bluesky, X, or Mastodon.

Node.js Support ​

Vite now requires Node.js 20.19+, 22.12+. We have dropped Node.js 18, now that it has reached its EOL at the end of April 2025.

We require these new ranges so Node.js supports require(esm) without a flag. This allows us to distribute Vite 7.0 as ESM only without preventing the Vite JavaScript API from being required by CJS modules. Check out Anthony Fu's Move on to ESM-only for a detailed review of the current state of ESM in the ecosystem.

Default Browser Target Changed to Baseline Widely Available ​

Baseline gives us clear information about which web platform features work across their core browser set today. Baseline Widely Available indicates the feature is well-established and works across many devices and browser versions, being available across browsers for at least 30 months.

In Vite 7, the default browser target is changing from 'modules' to a new default: 'baseline-widely-available'. The set of browsers will be updated on each major to match the list of minimum browser versions compatible with Baseline Widely available features. The default browser value of build.target is changing in Vite 7.0:

• Chrome 87 → 107
• Edge 88 → 107
• Firefox 78 → 104
• Safari 14.0 → 16.0

This change adds predictability to the default browser target for future releases.

Vitest ​

For Vitest users, Vite 7.0 is supported from Vitest 3.2. You can read more about how the Vitest team keeps improving Vite testing story in the Vitest 3.2 release blog post.

Environment API ​

Vite 6 was the most significant major release since Vite 2, adding new capabilities with the new experimental Environment API. We are keeping the new APIs as experimental while the ecosystem reviews how the new APIs fit on their projects and provide feedback. If you're building on top of Vite, we encourage you to test the new APIs and reach out to us in the open Feedback discussion here.

In Vite 7, we added a new buildApp hook to let plugins coordinate the building of environments. Read more in the Environment API for Frameworks guide.

We want to thank the teams that have been testing the new APIs and helping us stabilize the new features. The Cloudflare team, for example, announced the 1.0 release of their Cloudflare Vite plugin, as well as official support for React Router v7. Their plugin shows the potential of Environment API for runtime providers. Learn more about their approach and future steps at "Just use Vite”… with the Workers runtime.

Migrating to Vite 7 ​

Vite 7 should be a smooth update from Vite 6. We're removing already deprecated features, like Sass legacy API support and the splitVendorChunkPlugin that shouldn't affect your projects. We still suggest you review the detailed Migration Guide before upgrading.

The complete list of changes is at the Vite 7 Changelog.

Acknowledgments ​

Vite 7 was crafted by the Vite Team with the help of the wide community of contributors, downstream maintainers, plugin authors. A special shout-out to sapphi-red for his remarkable work on rolldown-vite and this release. Vite is brought to you by VoidZero, in partnership with Bolt and Nuxt Labs. We also want to thank our sponsors on Vite's GitHub Sponsors and Vite's Open Collective.

November 26, 2024

Today, we're taking another big step in Vite's story. The Vite team, contributors, and ecosystem partners are excited to announce the release of Vite 6.

It has been an eventful year. Vite adoption keeps growing, with npm downloads per week jumping from 7.5 million to 17 million since the release of Vite 5 a year ago. Vitest is not only being favored more by users but is also starting to form an ecosystem of its own. For example, Storybook has new testing capabilities powered by Vitest.

New frameworks have also joined the Vite ecosystem, including TanStack Start, One, Ember, and others. Web frameworks are innovating at an increasingly faster pace. You can check out the improvements folks have been doing at Astro, Nuxt, SvelteKit, Solid Start, Qwik City, RedwoodJS, React Router, and the list goes on.

Vite is used by OpenAI, Google, Apple, Microsoft, NASA, Shopify, Cloudflare, GitLab, Reddit, Linear, among many others. Two months ago, we started a list of companies using Vite. We're happy to see many developers sending us a PR to add their companies to the list. It's hard to believe how much the ecosystem we built together has grown since Vite gave its first steps.

Speeding up the Vite ecosystem ​

Last month, the community gathered for the third edition of ViteConf, hosted once more by StackBlitz. It was the biggest Vite conference, with a broad representation of builders from the ecosystem. Among other announcements, Evan You announced VoidZero, a company dedicated to building an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem. VoidZero is behind Rolldown and Oxc, and their team is making significant strides, getting them rapidly ready for being adopted by Vite. Watch Evan's keynote to learn more about the next steps for Vite's rust-powered future.

February 8, 2024

Vite 5 was released last November, and it represented another big leap for Vite and the ecosystem. A few weeks ago we celebrated 10 million weekly npm downloads and 900 contributors to the Vite repo. Today, we're excited to announce the release of Vite 5.1.

Quick links: Docs, Changelog

Docs in other languages: 简体中文, 日本語, Español, Português, 한국어, Deutsch

Try Vite 5.1 online in StackBlitz: vanilla, vue, react, preact, lit, svelte, solid, qwik.

If you're new to Vite, we suggest reading first the Getting Started and Features guides.

To stay up to date, follow us on X or Mastodon.

Vite Runtime API ​

Vite 5.1 adds experimental support for a new Vite Runtime API. It allows running any code by processing it with Vite plugins first. It is different from server.ssrLoadModule because the runtime implementation is decoupled from the server. This lets library and framework authors implement their own layer of communication between the server and the runtime. This new API is intended to replace Vite's current SSR primitives once it is stable.

The new API brings many benefits:

• Support for HMR during SSR.
• It is decoupled from the server, so there is no limit on how many clients can use a single server - every client has its own module cache (you can even communicate with it how you want - using message channel/fetch call/direct function call/websocket).
• It doesn't depend on any node/bun/deno built-in APIs, so it can run in any environment.
• It's easy to integrate with tools that have their own mechanism to run code (you can provide a runner to use eval instead of new AsyncFunction for example).

The initial idea was proposed by Pooya Parsa and implemented by Anthony Fu as the vite-node package to power Nuxt 3 Dev SSR and later also used as the base for Vitest. So the general idea of vite-node has been battle-tested for quite some time now. This is a new iteration of the API by Vladimir Sheremet, who had already re-implemented vite-node in Vitest and took the learnings to make the API even more powerful and flexible when adding it to Vite Core. The PR was one year in the makings, you can see the evolution and discussions with ecosystem maintainers here.

Features ​

Improved support for .css?url ​

Import CSS files as URLs now works reliably and correctly. This was the last remaining hurdle in Remix's move to Vite. See (#15259).

build.assetsInlineLimit now supports a callback ​

Users can now provide a callback that returns a boolean to opt-in or opt-out of inlining for specific assets. If undefined is returned, the default logic applies. See (#15366).

Improved HMR for circular import ​

In Vite 5.0, accepted modules within circular imports always triggered a full page reload even if they can be handled fine in the client. This is now relaxed to allow HMR to apply without a full page reload, but if any error happens during HMR, the page will be reloaded. See (#15118).

Support ssr.external: true to externalize all SSR packages ​

Historically, Vite externalizes all packages except for linked packages. This new option can be used to force externalize all packages including linked packages too. This is handy in tests within monorepos where we want to emulate the usual case of all packages externalized, or when using ssrLoadModule to load an arbitrary file and we want to always external packages as we don't care about HMR. See (#10939).

Expose close method in the preview server ​

The preview server now exposes a close method, which will properly teardown the server including all opened socket connections. See (#15630).

Performance improvements ​

Vite keeps getting faster with each release, and Vite 5.1 is packed with performance improvements. We measured the loading time for 10K modules (25 level deep tree) using vite-dev-server-perf for all minor versions from Vite 4.0. This is a good benchmark to measure the effect of Vite's bundle-less approach. Each module is a small TypeScript file with a counter and imports to other files in the tree, so this mostly measuring the time it takes to do the requests a separate modules. In Vite 4.0, loading 10K modules took 8 seconds on a M1 MAX. We had a breakthrough in Vite 4.3 were we focused on performance, and we were able to load them in 6.35 seconds. In Vite 5.1, we managed to do another performance leap. Vite is now serving the 10K modules in 5.35 seconds.

The results of this benchmark run on Headless Puppeteer and are a good way to compare versions. They don't represent the time as experienced by users though. When running the same 10K modules in an Incognito window is Chrome, we have:

Run CSS preprocessors in threads ​

Vite now has opt-in support for running CSS preprocessors in threads. You can enable it using css.preprocessorMaxWorkers: true. For a Vuetify 2 project, dev startup time was reduced by 40% with this feature enabled. There is performance comparison for others setups in the PR. See (#13584). Give Feedback.

New options to improve server cold starts ​

You can set optimizeDeps.holdUntilCrawlEnd: false to switch to a new strategy for deps optimization that may help in big projects. We're considering switching to this strategy by default in the future. Give Feedback. (#15244)

Faster resolving with cached checks ​

The fs.cachedChecks optimization is now enabled by default. In Windows, tryFsResolve was ~14x faster with it, and resolving ids overall got a ~5x speed up in the triangle benchmark. (#15704)

Internal performance improvements ​

The dev server had several incremental performance gains. A new middleware to short-circuit on 304 (#15586). We avoided parseRequest in hot paths (#15617). Rollup is now properly lazy loaded (#15621)

Deprecations ​

We continue to reduce Vite's API surface where possible to make the project maintainable long term.

Deprecated as option in import.meta.glob ​

The standard moved to Import Attributes, but we don't plan to replace as with a new option at this point. Instead, it is recommended that the user switches to query. See (#14420).

Removed experimental build-time pre-bundling ​

Build-time pre-bundling, an experimental feature added in Vite 3, is removed. With Rollup 4 switching its parser to native, and Rolldown being worked on, both the performance and the dev-vs-build inconsistency story for this feature are no longer valid. We want to continue improving dev/build consistency, and have concluded that using Rolldown for "prebundling during dev" and "production builds" is the better bet moving forward. Rolldown may also implement caching in a way that is a lot more efficient during build than deps prebundling. See (#15184).

Get Involved ​

We are grateful to the 900 contributors to Vite Core, and the maintainers of plugins, integrations, tools, and translations that keeps pushing the ecosystem forward. If you're enjoying Vite, we invite you to participate and help us. Check out our Contributing Guide, and jump into triaging issues, reviewing PRs, answering questions at GitHub Discussions and helping others in the community in Vite Land.

Acknowledgments ​

Vite 5.1 is possible thanks to our community of contributors, maintainers in the ecosystem, and the Vite Team. A shout out to the individuals and companies sponsoring Vite development. StackBlitz, Nuxt Labs, and Astro for hiring Vite team members. And also to the sponsors on Vite's GitHub Sponsors, Vite's Open Collective, and Evan You's GitHub Sponsors.

November 16, 2023

Vite 4 was released almost a year ago, and it served as a solid base for the ecosystem. npm downloads per week jumped from 2.5 million to 7.5 million, as projects keep building on a shared infrastructure. Frameworks continued to innovate, and on top of Astro, Nuxt, SvelteKit, Solid Start, Qwik City, between others, we saw new frameworks joining and making the ecosystem stronger. RedwoodJS and Remix switching to Vite paves the way for further adoption in the React ecosystem. Vitest kept growing at an even faster pace than Vite. Its team has been hard at work and will soon release Vitest 1.0. The story of Vite when used with other tools such as Storybook, Nx, and Playwright kept improving, and the same goes for environments, with Vite dev working both in Deno and Bun.

We had the second edition of ViteConf a month ago, hosted by StackBlitz. Like last year, most of the projects in the ecosystem got together to share ideas and connect to keep expanding the commons. We're also seeing new pieces complement the meta-framework tool belt like Volar and Nitro. The Rollup team released Rollup 4 that same day, a tradition Lukas started last year.

Six months ago, Vite 4.3 was released. This release significantly improved the dev server performance. However, there is still ample room for improvement. At ViteConf, Evan You unveiled Vite's long-term plan to work on Rolldown, a Rust-port of Rollup with compatible APIs. Once it is ready, we intend to use it in Vite Core to take on the tasks of both Rollup and esbuild. This will mean a boost in build performance (and later on in dev performance too as we move perf-sensitive parts of Vite itself to Rust), and a big reduction of inconsistencies between dev and build. Rolldown is currently in early stages and the team is preparing to open source the codebase before the end of the year. Stay tuned!

Today, we mark another big milestone in Vite's path. The Vite team, contributors, and ecosystem partners, are excited to announce the release of Vite 5. Vite is now using Rollup 4, which already represents a big boost in build performance. And there are also new options to improve your dev server performance profile.

Vite 5 focuses on cleaning up the API (removing deprecated features) and streamlines several features closing long-standing issues, for example switching define to use proper AST replacements instead of regexes. We also continue to take steps to future-proof Vite (Node.js 18+ is now required, and the CJS Node API has been deprecated).

Quick links:

• Docs
• Migration Guide
• Changelog

Docs in other languages:

• 简体中文
• 日本語
• Español
• Português
• 한국어
• Deutsch (new translation!)

If you're new to Vite, we suggest reading first the Getting Started and Features guides.

We appreciate the more than 850 contributors to Vite Core, and the maintainers and contributors of Vite plugins, integrations, tools, and translations that have helped us reach here. We encourage you to get involved and continue to improve Vite with us. You can learn more at our Contributing Guide. To get started, we recommend triaging issues, reviewing PRs, sending failing tests PRs based on open issues, and helping others in Discussions and Vite Land's help forum. You'll learn a lot along the way and have a smooth path to further contributions to the project. If you have doubts, join us on our Discord community and say hi on the #contributing channel.

To stay up to date, follow us on X or Mastodon.

Quick start with Vite 5 ​

Use pnpm create vite to scaffold a Vite project with your preferred framework, or open a started template online to play with Vite 5 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).

Node.js Support ​

Vite no longer supports Node.js 14 / 16 / 17 / 19, which reached its EOL. Node.js 18 / 20+ is now required.

Performance ​

On top of Rollup 4's build performance improvements, there is a new guide to help you identify and fix common performance issues at https://vite.dev/guide/performance.

Vite 5 also introduces server.warmup, a new feature to improve startup time. It lets you define a list of modules that should be pre-transformed as soon as the server starts. When using --open or server.open, Vite will also automatically warm up the entry point of your app or the provided URL to open.

Main Changes ​

• Vite is now powered by Rollup 4
• The CJS Node API has been deprecated
• Rework define and import.meta.env.* replacement strategy
• SSR externalized modules value now matches production
• worker.plugins is now a function
• Allow path containing . to fallback to index.html
• Align dev and preview HTML serving behavior
• Manifest files are now generated in .vite directory by default
• CLI shortcuts require an additional Enter press
• Update experimentalDecorators and useDefineForClassFields TypeScript behavior
• Remove --https flag and https: true
• Remove resolvePackageEntry and resolvePackageData APIs
• Removes previously deprecated APIs
• Read more about advanced changes affecting plugin and tool authors

Migrating to Vite 5 ​

We have worked with ecosystem partners to ensure a smooth migration to this new major. Once again, vite-ecosystem-ci has been crucial to help us make bolder changes while avoiding regressions. We're thrilled to see other ecosystems adopt similar schemes to improve the collaboration between their projects and downstream maintainers.

For most projects, the update to Vite 5 should be straight forward. But we advise reviewing the detailed Migration Guide before upgrading.

A low level breakdown with the full list of changes to Vite core can be found at the Vite 5 Changelog.

Acknowledgments ​

Vite 5 is the result of long hours of work by our community of contributors, downstream maintainers, plugins authors, and the Vite Team. A big shout out to Bjorn Lu for leading the release process for this major.

We're also thankful to individuals and companies sponsoring Vite development. StackBlitz, Nuxt Labs, and Astro continue to invest in Vite by hiring Vite team members. A shout out to sponsors on Vite's GitHub Sponsors, Vite's Open Collective, and Evan You's GitHub Sponsors. A special mention to Remix for becoming a Gold sponsor and contributing back after switching to Vite.

April 20, 2023

Quick links:

• Docs: English, 简体中文, 日本語, Español, Português
• Vite 4.3 Changelog

Performance Improvements ​

In this minor, we focused on improving the dev server performance. The resolve logic got streamlined, improving hot paths and implementing smarter caching for finding package.json, TS config files, and resolved URL in general.

You can read a detailed walkthrough of the performance work done in this blog post by one of Vite Contributors: How we made Vite 4.3 faaaaster 🚀.

This sprint resulted in speed improvements across the board compared to Vite 4.2.

These are the performance improvements as measured by sapphi-red/performance-compare, which tests an app with 1000 React Components cold and warm dev server startup time as well as HMR times for a root and a leaf component:

You can read more information about the benchmark here. Specs and Versions for this performance run:

• CPU: Ryzen 9 5900X, Memory: DDR4-3600 32GB, SSD: WD Blue SN550 NVME SSD
• Windows 10 Pro 21H2 19044.2846
• Node.js 18.16.0
• Vite and React Plugin versions
  • Vite 4.2 (babel): Vite 4.2.1 + plugin-react 3.1.0
  • Vite 4.3 (babel): Vite 4.3.0 + plugin-react 4.0.0-beta.1
  • Vite 4.2 (swc): Vite 4.2.1 + plugin-react-swc 3.2.0
  • Vite 4.3 (swc): Vite 4.3.0 + plugin-react-swc 3.3.0

Early adopters have also reported seeing 1.5x-2x dev startup time improvement on real apps while testing the Vite 4.3 beta. We'd love to know the results for your apps.

Profiling ​

We'll continue to work on Vite's performance. We're working on an official Benchmark tool for Vite that let us get performance metrics for each Pull Request.

And vite-plugin-inspect now has more performance-related features to help you identify which plugins or middlewares are the bottleneck for your applications.

Using vite --profile (and then pressing p) once the page loads will save a CPU profile of the dev server startup. You can open them in an app as speedscope to identify performance issues. And you can share your findings with the Vite Team in a Discussion or in Vite's Discord.

Next Steps ​

We decided to do a single Vite Major this year aligning with the EOL of Node.js 16 in September, dropping support for both Node.js 14 and 16 in it. If you would like to get involved, we started a Vite 5 Discussion to gather early feedback.

December 9, 2022 - Check out the Vite 5.0 announcement

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
• Migration Guide
• Changelog

Docs in other languages:

• 简体中文
• 日本語
• Español

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.

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 query suffix modifier needs to be used in this case, as that doesn't emit the imported .css styles.

import stuff from './global.css?inline'

Learn more in the Migration Guide.

Environment Variables ​

Vite now uses dotenv 16 and dotenv-expand 9 (previously dotenv 14 and dotenv-expand 5). If you have a value including # or `, you will need to wrap them with quotes.

-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"

For more details, see the dotenv and dotenv-expand changelog.

Other Features ​

• CLI Shortcuts (press h during dev to see them all) (#11228)
• Support for patch-package when pre bundling dependencies (#10286)
• Cleaner build logs output (#10895) and switch to kB to align with browser dev tools (#10982)
• Improved error messages during SSR (#11156)

Reduced Package Size ​

Vite cares about its footprint, to speed up installation, especially in the use case of playgrounds for documentation and reproductions. And once more, this major brings improvements in Vite's package size. Vite 4 install size is 23% smaller compared to vite 3.2.5 (14.1 MB vs 18.3 MB).

Upgrades to Vite Core ​

Vite Core and vite-ecosystem-ci continue to evolve to provide a better experience to maintainers and collaborators and to ensure that Vite development scales to cope with the growth in the ecosystem.

Framework plugins out of core ​

@vitejs/plugin-vue and @vitejs/plugin-react have been part of Vite core monorepo since the first versions of Vite. This helped us to get a close feedback loop when making changes as we were getting both Core and the plugins tested and released together. With vite-ecosystem-ci we can get this feedback with these plugins developed on independent repositories, so from Vite 4, they have been moved out of the Vite core monorepo. This is meaningful for Vite's framework-agnostic story and will allow us to build independent teams to maintain each of the plugins. If you have bugs to report or features to request, please create issues on the new repositories moving forward: vitejs/vite-plugin-vue and vitejs/vite-plugin-react.

vite-ecosystem-ci improvements ​

vite-ecosystem-ci extends Vite's CI by providing on-demand status reports on the state of the CIs of most major downstream projects. We run vite-ecosystem-ci three times a week against Vite's main branch and receive timely reports before introducing a regression. Vite 4 will soon be compatible with most projects using Vite, which already prepared branches with the needed changes and will be releasing them in the next few days. We are also able to run vite-ecosystem-ci on-demand on PRs using /ecosystem-ci run in a comment, allowing us to know the effect of changes before they hit main.

Acknowledgments ​

Vite 4 wouldn't be possible without uncountable hours of work by Vite contributors, many of them maintainers of downstream projects and plugins, and the efforts of the Vite Team. All of us have worked together to improve Vite's DX once more, for every framework and app using it. We're grateful to be able to improve a common base for such a vibrant ecosystem.

We're also thankful to individuals and companies sponsoring the Vite team, and companies investing directly in Vite's future: @antfu7's work on Vite and the ecosystem is 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.

Next steps ​

Our immediate focus would be on triaging newly opened issues to avoid disruption by possible regressions. If you would like to get involved and help us improve Vite, we suggest starting with issues triaging. Join our Discord and reach out on the #contributing channel. Polish our #docs story, and #help others. We need to continue to build a helpful and welcoming community for the next wave of users, as Vite's adoption continues to grow.

There are a lot of open fronts to keep improving the DX of everyone that has chosen Vite to power their frameworks and develop their apps. Onwards!

July 23, 2022 - Check out the Vite 4.0 announcement

In February last year, Evan You released Vite 2. Since then, its adoption has grown non-stop, reaching more than 1 million npm downloads per week. A sprawling ecosystem rapidly formed after the release. Vite is powering a renewed innovation race in Web frameworks. Nuxt 3 uses Vite by default. SvelteKit, Astro, Hydrogen, and SolidStart are all built with Vite. Laravel has now decided to use Vite by default. Vite Ruby shows how Vite can improve Rails DX. Vitest is making strides as a Vite-native alternative to Jest. Vite is behind Cypress and Playwright's new Component Testing features, Storybook has Vite as an official builder. And the list goes on. Maintainers from most of these projects got involved in improving the Vite core itself, working closely with the Vite team and other contributors.

Today, 16 months from the v2 launch we are happy to announce the release of Vite 3. We decided to release a new Vite major at least every year to align with Node.js's EOL, and take the opportunity to review Vite's API regularly with a short migration path for projects in the ecosystem.

Quick links:

• Docs
• Migration Guide
• Changelog

If you are new to Vite, we recommend reading the Why Vite Guide. Then check out the Getting Started and Features guide to see what Vite provides out of the box. As usual, contributions are welcome at GitHub. More than 600 collaborators have helped improve Vite so far. Follow the updates on Twitter, or join discussions with other Vite users on our Discord chat server.

New Documentation ​

Go to vite.dev to enjoy the new v3 docs. Vite is now using the new VitePress default theme, with a stunning dark mode between other features.

Several projects in the ecosystem have already migrated to it (see Vitest, vite-plugin-pwa, and VitePress itself).

If you need to access the Vite 2 docs, they will remain online at v2.vite.dev. There is also a new main.vite.dev subdomain, where each commit to Vite’s main branch is auto deployed. This is useful when testing beta versions or contributing to the core’s development.

There is also now an official Spanish translation, that has been added to the previous Chinese and Japanese translations:

• 简体中文
• 日本語
• Español

Create Vite Starter Templates ​

create-vite templates have been a great tool to quickly test Vite with your favorite framework. In Vite 3, all of the templates got a new theme in line with the new docs. Open them online and start playing with Vite 3 now:

The theme is now shared by all templates. This should help better convey the scope for these starters as minimal templates to get started with Vite. For more complete solutions including linting, testing setup, and other features, there are official Vite-powered templates for some frameworks like create-vue and create-svelte. There is a community-maintained list of templates at Awesome Vite.

Dev Improvements ​

Vite CLI ​

  VITE v3.0.0  ready in 320 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

Apart from the CLI’s aesthetics improvements, you’ll notice that the default dev server port is now 5173 and the preview server listening at 4173. This change ensures Vite will avoid collisions with other tools.

Improved WebSocket Connection Strategy ​

One of the pain points of Vite 2 was configuring the server when running behind a proxy. Vite 3 changes the default connection scheme so it works out of the box in most scenarios. All these setups are now tested as part of the Vite Ecosystem CI through vite-setup-catalogue.

Cold Start Improvements ​

Vite now avoids full reload during cold start when imports are injected by plugins while crawling the initial statically imported modules (#8869).

import.meta.glob ​

import.meta.glob support was rewritten. Read about the new features in the Glob Import Guide:

Multiple Patterns can be passed as an array

import.meta.glob(['./dir/*.js', './another/*.js'])

Negative Patterns are now supported (prefixed with !) to ignore some specific files

import.meta.glob(['./dir/*.js', '!**/bar.js'])

Named Imports can be specified to improve tree-shaking

import.meta.glob('./dir/*.js', { import: 'setup' })

Custom Queries can be passed to attach metadata

import.meta.glob('./dir/*.js', { query: { custom: 'data' } })

Eager Imports is now passed as a flag

import.meta.glob('./dir/*.js', { eager: true })

Aligning WASM Import with Future Standards ​

The WebAssembly import API has been revised to avoid collisions with future standards and to make it more flexible:

import init from './example.wasm?init'

init().then((instance) => {
  instance.exports.test()
})

Learn more in the WebAssembly guide

Build Improvements ​

ESM SSR Build by Default ​

Most SSR frameworks in the ecosystem were already using ESM builds. So, Vite 3 makes ESM the default format for SSR builds. This allows us to streamline previous SSR externalization heuristics, externalizing dependencies by default.

Improved Relative Base Support ​

Vite 3 now properly supports relative base (using base: ''), allowing built assets to be deployed to different bases without re-building. This is useful when the base isn't known at build time, for example when deploying to content-addressable networks like IPFS.

Experimental Features ​

Built Asset Paths fine-grained Control (Experimental) ​

There are other deploy scenarios where this isn't enough. For example, if the generated hashed assets need to be deployed to a different CDN from the public files, then finer-grained control is required over path generation at build time. Vite 3 provides an experimental API to modify the built file paths. Check Build Advanced Base Options for more information.

Esbuild Deps Optimization at Build Time (Experimental) ​

One of the main differences between dev and build time is how Vite handles dependencies. During build time, @rollup/plugin-commonjs is used to allow importing CJS only dependencies (like React). When using the dev server, esbuild is used instead to pre-bundle and optimize dependencies, and an inline interop scheme is applied while transforming user code importing CJS deps. During the development of Vite 3, we introduced the changes needed to also allow the use of esbuild to optimize dependencies during build time. @rollup/plugin-commonjs can then be avoided, making dev and build time work in the same way.

Given that Rollup v3 will be out in the next months, and we're going to follow up with another Vite major, we've decided to make this mode optional to reduce v3 scope and give Vite and the ecosystem more time to work out possible issues with the new CJS interop approach during build time. Frameworks may switch to using esbuild deps optimization during build time by default at their own pace before Vite 4.

HMR Partial Accept (Experimental) ​

There is opt-in support for HMR Partial Accept. This feature could unlock finer-grained HMR for framework components that export several bindings in the same module. You can learn more at the discussion for this proposal.

Bundle Size Reduction ​

Vite cares about its publish and install footprint; a fast installation of a new app is a feature. Vite bundles most of its dependencies and tries to use modern lightweight alternatives where possible. Continuing with this ongoing goal, Vite 3 publish size is 30% smaller than v2.

In part, this reduction was possible by making some dependencies that most users weren't needing optional. First, Terser is no longer installed by default. This dependency was no longer needed since we already made esbuild the default minifier for both JS and CSS in Vite 2. If you use build.minify: 'terser', you'll need to install it (npm add -D terser). We also moved node-forge out of the monorepo, implementing support for automatic https certificate generation as a new plugin: @vitejs/plugin-basic-ssl. Since this feature only creates untrusted certificates that are not added to the local store, it didn't justify the added size.

Bug Fixing ​

A triaging marathon was spearheaded by @bluwyoo, @sapphi_red, that recently joined the Vite team. During the past three months, the Vite open issues were reduced from 770 to 400. And this dive was achieved while the newly open PRs were at an all-time high. At the same time, @haoqunjiang had also curated a comprehensive overview of Vite issues.

Compatibility Notes ​

• Vite no longer supports Node.js 12 / 13 / 15, which reached its EOL. Node.js 14.18+ / 16+ is now required.
• Vite is now published as ESM, with a CJS proxy to the ESM entry for compatibility.
• The Modern Browser Baseline now targets browsers which support the native ES Modules, native ESM dynamic import, and import.meta features.
• JS file extensions in SSR and library mode now use a valid extension (js, mjs, or cjs) for output JS entries and chunks based on their format and the package type.

Learn more in the Migration Guide.

Upgrades to Vite Core ​

While working towards Vite 3, we also improved the contributing experience for collaborators to Vite Core.

• Unit and E2E tests have been migrated to Vitest, providing a faster and more stable DX. This move also works as dog fooding for an important infrastructure project in the ecosystem.
• VitePress build is now tested as part of CI.
• Vite upgraded to pnpm 7, following the rest of the ecosystem.
• Playgrounds have been moved to /playgrounds out of packages directory.
• The packages and playgrounds are now "type": "module".
• Plugins are now bundled using unbuild, and plugin-vue-jsx and plugin-legacy were moved to TypeScript.

The Ecosystem is Ready for v3 ​

We have worked closely with projects in the ecosystem to ensure that frameworks powered by Vite are ready for Vite 3. vite-ecosystem-ci allows us to run the CI's from the leading players in the ecosystem against Vite's main branch and receive timely reports before introducing a regression. Today's release should soon be compatible with most projects using Vite.

Acknowledgments ​

Vite 3 is the result of the aggregate effort of members of the Vite Team working together with ecosystem project maintainers and other collaborators to Vite core.

We want to thank everyone that have implemented features, and fixes, given feedback, and have been involved in Vite 3:

• Vite team members @youyuxi, @patak_dev, @antfu7, @bluwyoo, @sapphi_red, @haoqunjiang, @poyoho, @Shini_92, and @retropragma.
• @benmccann, @danielcroe, @brillout, @sheremet_va, @userquin, @enzoinnocenzi, @maximomussini, @IanVanSchooten, the Astro team, and all other maintainers of frameworks and plugins in the ecosystem in that helped shape v3.
• @dominikg for his work on vite-ecosystem-ci.
• @ZoltanKochan for his work on pnpm, and for his responsiveness when we needed support with it.
• @rixo for HMR Partial Accept support.
• @KiaKing85 for getting the theme ready for the Vite 3 release, and @_brc_dd for working on the VitePress internals.
• @CodingWithCego for the new Spanish translation, and @ShenQingchuan, @hiro-lapis and others in the Chinese and Japanese translations teams for keeping the translated docs up to date.

We also want to thank individuals and companies sponsoring the Vite team, and companies investing in Vite development: some of @antfu7's work on Vite and the ecosystem is part of his job at Nuxt Labs, and StackBlitz hired @patak_dev to work full time on Vite.

What's Next ​

We'll take the following months to ensure a smooth transition for all the projects built on top of Vite. So the first minors will be focused on continuing our triaging efforts with a focus on newly opened issues.

The Rollup team is working on its next major, to be released in the following months. Once the Rollup plugins ecosystem has time to update, we'll follow up with a new Vite major. This will give us another opportunity to introduce more significant changes this year, which we could take to stabilize some of the experimental features introduced in this release.

If you are interested in helping improve Vite, the best way to get on board is to help with triaging issues. Join our Discord and look for the #contributing channel. Or get involved in our #docs, #help others, or create plugins. We are just getting started. There are many open ideas to keep improving Vite's DX.

February 16, 2021 - Check out the Vite 3.0 announcement

Today we are 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, check out this 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 Material 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 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 browsers 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

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.