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 the 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 now true by default.
For Vite plugins, this.parse now only supports the allowReturnOutsideFunction 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 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
Migration from v4
https://vitejs.dev/guide/migration
Let’s get connected! You can find me on:
- DEV: https://dev.to/nhannguyendevjs
- Medium: https://medium.com/@nhannguyendevjs
- Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
- X (formerly Twitter): https://twitter.com/nhannguyendevjs
Top comments (0)