Vite 5.1 was released in February this year (2024) with a bunch of new features. Vite is already pretty popular because of its features like Hot module replacement, pre-bundling, compatibility with TypeScript, etc. With Vite 5.1 a lot of new features have been added to Vite.
Vite is one of the most popular frontend tools with over 10 million weekly downloads on the npm website. Vite is open source, and over 900 contributors are involved in the development of Vite. All this is fine, but what exactly is Vite? And why would you need it?
What is Vite?
Vite is a popular frontend tool to improve your frontend development experience with JavaScript by providing features like Hot Module Replacement, pre-bundling, etc.
When you are working on a modern frontend project with JavaScript, you create multiple files and use the module system to export/import code from one file to another so that you can define a proper structure for your project, which is scalable too.
A large project may have thousands of modules, and that's where the problem begins. During development, when you make any code change, the server refresh will be slow, which will affect the developer's productivity and happiness (as per the official Vite website).
Vite comes feature-packed to ease your development process by pre-bundling packages, caching the packages, hot module replacement, providing support for Typescript, supporting JSX and TSX files, supporting Vue, managing static assets and CSS, and many more.
What's New in Vite 5.1?
Here are some of the new features that are introduced in the Vite 5.1 version.
1. New Vite Runtime API
New Vite runtime API brings in support for HMR (Hot module replacement) for Server side rendering, it is environment-independent (works with node, bun, deno, etc.), and it decouples the server and client.
2. Import CSS as a URL
You can import CSS as URL easily and more reliably.
3. close Method in Server
To tear down the server completely a close method has been added to the preview server. It will not only close the server but will also close all the socket connections.
4. Performance Improvement
Vite 5.1 is faster than its predecessor. It can now serve 10k modules in 5.35 seconds.
5. CSS Preprocessors
Now you can run the CSS preprocessor in a separate thread. You can do it by making css.preprocessorMaxWorkers: true, and this will improve the startup time of the project by almost 40%.
There are a lot more small features and updates that have been added to the new Vite 5.1 version. You can read all about it on the Vite official website.
Create a New Frontend Project
You can use vite to create your next project. All you have to do is, run the following command,
npm create vite@latest
And then follow the prompts. You can create a React project, Vue project, Vanilla JS project, etc.
Check the getting started guide on the Vite website.
