vite Documentation

File: README.md Copy Chapter

Vite ⚡

Next Generation Frontend Tooling

• 💡 Instant Server Start
• ⚡️ Lightning Fast HMR
• 🛠️ Rich Features
• 📦 Optimized Build
• 🔩 Universal Plugin Interface
• 🔑 Fully Typed APIs

Vite (French word for "quick", pronounced /viːt/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

• A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

• A build command that bundles your code with Rolldown, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

Read the Docs to Learn More.

Packages Copy Chapter

Contribution Copy Chapter

See Contributing Guide.

License Copy Chapter

MIT.

Sponsors Copy Chapter

File: docs/blog/announcing-vite2.md Copy Chapter

title: Announcing Vite 2.0
author:

• name: The Vite Team
  sidebar: false
  date: 2021-02-16
  head:
• • meta
  • property: og:type
    content: website
• • meta
  • property: og:title
    content: Announcing Vite 2.0
• • meta
  • property: og:url
    content: https://vite.dev/blog/announcing-vite2
• • meta
  • property: og:description
    content: Vite 2 Release Announcement

Announcing Vite 2.0

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 Copy Chapter

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 Copy Section

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 Copy Section

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 Copy Section

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 Copy Section

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 Copy Section

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 Copy Section

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! Copy Chapter

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.

File: docs/blog/announcing-vite3.md Copy Chapter

title: Vite 3.0 is out!
author:
name: The Vite Team
date: 2022-07-23
sidebar: false
head:

• • meta
  • property: og:type
    content: website
• • meta
  • property: og:title
    content: Announcing Vite 3
• • meta
  • property: og:image
    content: https://vite.dev/og-image-announcing-vite3.webp
• • meta
  • property: og:url
    content: https://vite.dev/blog/announcing-vite3
• • meta
  • property: og:description
    content: Vite 3 Release Announcement
• • meta
  • name: twitter:card
    content: summary_large_image

Vite 3.0 is out!

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 Copy Chapter

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 Copy Chapter

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 Copy Chapter

Vite CLI Copy Section

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 Copy Section

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 Copy Section

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

Click to learn more

In Vite 2.9, both the scanner and optimizer were run in the background. In the best scenario, where the scanner would find every dependency, no reload was needed in cold start. But if the scanner missed a dependency, a new optimization phase and then a reload were needed. Vite was able to avoid some of these reloads in v2.9, as we detected if the new optimized chunks were compatible with the ones the browser had. But if there was a common dep, the sub-chunks could change and a reload was required to avoid duplicated state. In Vite 3, the optimized deps aren't handed to the browser until the crawling of static imports is done. A quick optimization phase is issued if there is a missing dep (for example, injected by a plugin), and only then, the bundled deps are sent. So, a page reload is no longer needed for these cases.

import.meta.glob Copy Section

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 Copy Section

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 Copy Chapter

ESM SSR Build by Default Copy Section

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 Copy Section

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 Copy Chapter

Built Asset Paths fine-grained Control (Experimental) Copy Section

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) Copy Section

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) Copy Section

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 Copy Chapter

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 Copy Chapter

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 Copy Chapter

• 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 Copy Chapter

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 Copy Chapter

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 Copy Chapter

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 who has 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 Copy Chapter

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.

File: docs/blog/announcing-vite4.md Copy Chapter

title: Vite 4.0 is out!
author:
name: The Vite Team
date: 2022-12-09
sidebar: false
head:

• • meta
  • property: og:type
    content: website
• • meta
  • property: og:title
    content: Announcing Vite 4
• • meta
  • property: og:image
    content: https://vite.dev/og-image-announcing-vite4.webp
• • meta
  • property: og:url
    content: https://vite.dev/blog/announcing-vite4
• • meta
  • property: og:description
    content: Vite 4 Release Announcement
• • meta
  • name: twitter:card
    content: summary_large_image

Vite 4.0 is out!

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 collaborate with others on our Discord community.

Start playing with Vite 4 Copy Chapter

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 Copy Chapter

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 Copy Section

@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) Copy Section

@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 Copy Chapter

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 Copy Chapter

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 Copy Chapter

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 Copy Chapter

• 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 Copy Chapter

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 Copy Chapter

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 Copy Section

@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 Copy Section

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 Copy Chapter

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 Copy Chapter

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!

File: docs/blog/announcing-vite4-3.md Copy Chapter

title: Vite 4.3 is out!
author:
name: The Vite Team
date: 2023-04-20
sidebar: false
head:

• • meta
  • property: og:type
    content: website
• • meta
  • property: og:title
    content: Announcing Vite 4.3
• • meta
  • property: og:image
    content: https://vite.dev/og-image-announcing-vite4-3.webp
• • meta
  • property: og:url
    content: https://vite.dev/blog/announcing-vite4-3
• • meta
  • property: og:description
    content: Vite 4.3 Release Announcement
• • meta
  • name: twitter:card
    content: summary_large_image

Vite 4.3 is out!

April 20, 2023

Quick links:

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

Performance Improvements Copy Chapter

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 Copy Chapter

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 Copy Chapter

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.

File: docs/blog/announcing-vite5.md Copy Chapter

title: Vite 5.0 is out!
author:
name: The Vite Team
date: 2023-11-16
sidebar: false
head:

• • meta
  • property: og:type
    content: website
• • meta
  • property: og:title
    content: Announcing Vite 5
• • meta
  • property: og:image
    content: https://vite.dev/og-image-announcing-vite5.webp
• • meta
  • property: og:url
    content: https://vite.dev/blog/announcing-vite5
• • meta
  • property: og:description
    content: Vite 5 Release Announcement
• • meta
  • name: twitter:card
    content: summary_large_image

Vite 5.0 is out!

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 Copy Chapter

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 Copy Chapter

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

Performance Copy Chapter

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 Copy Chapter

• 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 Copy Chapter

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 Copy Chapter

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.

File: docs/blog/announcing-vite5-1.md Copy Chapter

title: Vite 5.1 is out!
author:
name: The Vite Team
date: 2024-02-08
sidebar: false
head:

• • meta
  • property: og:type
    content: website
• • meta
  • property: og:title
    content: Announcing Vite 5.1
• • meta
  • property: og:image
    content: https://vite.dev/og-image-announcing-vite5-1.webp
• • meta
  • property: og:url
    content: https://vite.dev/blog/announcing-vite5-1
• • meta
  • property: og:description
    content: Vite 5.1 Release Announcement
• • meta
  • name: twitter:card
    content: summary_large_image

Vite 5.1 is out!

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 Copy Chapter

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.

::: info
The Vite Runtime API evolved into the Module Runner API, released in Vite 6 as part of the Environment API.
:::

Features Copy Chapter

Improved support for `.css?url` Copy Section

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 Copy Section

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 Copy Section

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 Copy Section

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 Copy Section

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

Performance improvements Copy Chapter

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 measures the time it takes to do the requests as separate modules. In Vite 4.0, loading 10K modules took 8 seconds on a M1 MAX. We had a breakthrough in Vite 4.3 where 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 in Chrome, we have:

Run CSS preprocessors in threads Copy Section

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 Copy Section

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 Copy Section

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 Copy Section

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 Copy Chapter

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

Deprecated `as` option in `import.meta.glob` Copy Section

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 Copy Section

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 Copy Chapter

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 Copy Chapter

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.

File: docs/blog/announcing-vite6.md Copy Chapter

title: Vite 6.0 is out!
author:
name: The Vite Team
date: 2024-11-26
sidebar: false
head:

• • meta
  • property: og:type
    content: website
• • meta
  • property: og:title
    content: Announcing Vite 6
• • meta
  • property: og:image
    content: https://vite.dev/og-image-announcing-vite6.webp
• • meta
  • property: og:url
    content: https://vite.dev/blog/announcing-vite6
• • meta
  • property: og:description
    content: Vite 6 Release Announcement
• • meta
  • name: twitter:card
    content: summary_large_image

Vite 6.0 is out!

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 Copy Chapter

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.

interface HmrContext {
  file: string
  timestamp: number
  modules: Array<ModuleNode>
  read: () => string | Promise<string>
  server: ViteDevServer
}

interface HotUpdateOptions {
  type: 'create' | 'update' | 'delete'
  file: string
  timestamp: number
  modules: Array<EnvironmentModuleNode>
  read: () => string | Promise<string>
  server: ViteDevServer
}

handleHotUpdate({ modules }) {
  return modules.filter(condition)
}

// Migrate to:

hotUpdate({ modules }) {
  return modules.filter(condition)
}

handleHotUpdate({ server, modules, timestamp }) {
  // Invalidate modules manually
  const invalidatedModules = new Set()
  for (const mod of modules) {
    server.moduleGraph.invalidateModule(
      mod,
      invalidatedModules,
      timestamp,
      true
    )
  }
  server.ws.send({ type: 'full-reload' })
  return []
}

// Migrate to:

hotUpdate({ modules, timestamp }) {
  // Invalidate modules manually
  const invalidatedModules = new Set()
  for (const mod of modules) {
    this.environment.moduleGraph.invalidateModule(
      mod,
      invalidatedModules,
      timestamp,
      true
    )
  }
  this.environment.hot.send({ type: 'full-reload' })
  return []
}

handleHotUpdate({ server }) {
  server.ws.send({
    type: 'custom',
    event: 'special-update',
    data: {}
  })
  return []
}

// Migrate to...

hotUpdate() {
  this.environment.hot.send({
    type: 'custom',
    event: 'special-update',
    data: {}
  })
  return []
}