On December 9, 2022, Vite 4.0 was released with numerous advancements. Within less than a year, this front-end tool has come up with its new version, i.e., Vite 5.0.
Released on November 16, 2023, Vite 5.0 is all set to take front-end development to the next level.
If you are wondering what is new in Vite 5.0, this blog post is for you.
Overview of Vite
For those who do not know, Vite is a renowned front-end web development tool. It helps users build and optimize web applications.
Evan You is the key person behind the launch of this lightning-fast web development tool. It was first released in 2020, and since then, it has witnessed several upgrades.
Let us learn about the changes we can see in its new version, which is Vite 5.0.
Upgrades in Vite 5.0
Node.js Support
With this new version, Vite 5.0 has started supporting the latest versions of Node.js.
If you were working with previous versions of Node.js, this might disappoint you. Vite 5.0 does not support Note.js 14, 16, 17, and 19 anymore. You will be required to have Node.js 18/ 20+.
Rollup 4
Vite 5.0 adopts Rollup 4, which brings various improvements in terms of performance. For instance, users can experience improvement in tree-shaking capabilities that naturally minimize the bundle size.
Additionally, you can notice the following changes as well.
- The assertions prop is now named as attributes prop.
- You cannot use Acorn plugins anymore.
- For Vite plugins, this.resolve skipSelf option is now true by default.
Deprecate CJS Node API
Another crucial change you notice in Vite 5.0 is the deprecated CJS Node API. If you call require(‘vite’), it projects a deprecation warning. Users will need to update their frameworks or files to import the ESM build of Vite.
Performance
In Vite 5.0, you also get a new feature server.warmup. It improves the startup time several times. It enables users to define a list of modules that should be pre-transformed as soon as the server starts.
When a user uses —open or server.open, Vite 5.0 warms up the entry point of their applications.
Improved Type-Script Support
TypeScript has turned into a crucial part of the JavaScript ecosystem. Vite 5.0 provides full support for this statically typed language. Now users can experience improved TypeScript integration.
In addition to this, they can do better type-checking and get enhanced tooling support now.
Worker. Plugins Acts as a Function Now
In the previous version of Vite, worker.plugins used to accept an array of plugins ((Plugin | Plugin[ ])[ ]). However, in Vite 5.0, it has to be configured as a function that returns an array of plugins (() => (Plugin | Plugin[ ])[] ).
It is an imperative change; therefore, parallel worker builds run steadily.
Browser Compatibility
Cross-browser compatibility is vital in the contemporary web development landscape. Vite 5.0 recognizes this need. This new version supports enhanced browser compatibility features.
Users can do cross-browser testing without any issues now. It helps web developers build and test applications across different browser environments.
Support for Manifest Files in .vite Directory
Earlier the manifest files used to be generated in the root of build.outDir by default. With Vite 5, the user can produce them in the .vite directory in the build.outDir by default.
This change aids in avoiding conflicts among public files having the same manifest file names during their transfer to the build.outDir.
Developer Tooling
Vite 5.0 has given more emphasis on improving the overall web development experience. Users can notice improvement in the errors handling capabilities.
Developers can identify and resolve issues more quickly than before. In addition to this, Vite 5.0 streamlines the development workflow by adopting a productive coding environment.
Press an Additional Enter for CLI Shortcuts
Users using CLI shortcuts will need to press an additional Enter to prompt the shortcut command. For instance, earlier users had to press only r to restart the dev server. Now they will press r + Enter to restart the dev server.
Conclusion
Vite 5.0 introduces an array of new features while also eliminating several components. Some of the primary changes you can notice in this current version of Vite are improved TypeScript integration, Rollup 4, Cleaned up API, and Deprecated CJS Node API.
It would not be wrong to mention that Vite is a next-generation front-end web development tool. This new version brings a lot of revolutionary changes and simplifies the developing experience.
