Vite 5.0 is out
Vite 4 was released almost a year ago, but here comes version 5 with numerous improvements, especially in terms of performance.
Vite 5 focuses on cleaning up the API (removing deprecated features) and streamlines several features closing long-standing issues.
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, Vite recommends 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).
You can also start with stackblitz — vite project.
Node.js Support
Vite no longer supports Node.js 14 / 16 / 17 / 19, which reached its EOL. Node.js 18 / 20+ is now required.
Rollup 4
Vite is now using Rollup 4 which also brings along its breaking changes, in particular:
- Import assertions (
assertions
prop) has been renamed to import attributes (attributes
prop). - Acorn plugins are no longer supported.
- For Vite plugins,
this.resolve
skipSelf
option is nowtrue
by default. - For Vite plugins,
this.parse
now only supports theallowReturnOutsideFunction
option for now.
Read the full breaking changes in Rollup’s release notes for build-related changes in build.rollupOptions
.
Deprecate CJS Node API
The CJS Node API of Vite is deprecated. When calling require('vite')
, a deprecation warning is now logged. You should update your files or frameworks to import the ESM build of Vite instead.
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://vitejs.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
andimport.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
anduseDefineForClassFields
TypeScript behavior - Remove
--https
flag andhttps: true
- Remove
resolvePackageEntry
andresolvePackageData
APIs - Removes previously deprecated APIs
- Read more about advanced changes affecting plugin and tool authors
Migration from v4
Let’s get connected! You can find me on:
- Medium: https://medium.com/@nhannguyendevjs
- Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
- X (formerly Twitter): https://twitter.com/nhannguyendevjs