DEV Community

Shariq Ahmed
Shariq Ahmed

Posted on

What is Vite? Everything You Need to Know About This Development Tool

Vite: A Development Tool

To prevent developers from having frequent headaches while working on the front end of the web, Vite — a development tool — was created by Evan You in 2020. Using Vite, developers will have a faster and smoother experience while building web applications. The good thing?

You can create applications made of TypeScript and JavaScript using Vite. But before we talk about its features. let’s discuss what are the selling points of Vite.

Okay, so Vite has both a dev server and a build command. The former works for the source files over native ES modules. Built-in features and Hot Module Replacement(HMR) are used for updating modules when the app is executing.

Contrarily, the build command bundles the code with Rollup. To start in Vite, you have to write ‘create-app’. What actually is it? Well, it is basically a bootstrapper that is compatible with many libraries, including React, Vue, and Solid. But before you start using Vite, make sure both Node.js and npm are installed on your system.

Now, you may wonder why you should use Vite. Well, if you want to add, update, or even remove modules even when the app is running, use Vite. In other words, in Vite, the whole page will not be reloaded. The upside of this? Speedy development because only the changes are updated.

Another benefit is that while working in Vite, you are also provided with complete control of your project. Just write either ‘vite.config.js’ or ‘vite.config.ts’ in a file and move that file to a working directory.

Further in Vite, for reducing the size of the code and optimizing performance, tree-shaking and code-splitting functions are used. The former helps in getting rid of the unused code, while the latter divides your code into chunks.

The benefit of all this? You only have to download the code you need for the page. Consequently, both load times and performance are improved. You can also see the changes in code in real-time. This means you don’t need to refresh the whole page. What’s even better is that you don’t need to reload manually. In Vite, there’s automatic iteration.

You also don’t need to use any bundler. This means now web developers can make apps faster, no matter the size of the project. And if they are willing to use modern web tools in front-end development, they can do that as well. Vite can use native ES modules and modern browser APIs.

Despite all this, like any other tool, there are disadvantages of Vite as well. The first is that it has a small user base compared to other tools like CRA. Another con is that some of the features of Vite aren't compatible with all browser versions. You might need to update your browser while using an app made by Vite

Top comments (0)