ViteJS is fundamentally a build tool and local development server. It is designed to streamline the front-end development of modern web apps by reloading code modules dynamically to avoid recompiling the entire application. In this article, we’ll offer an overview of ViteJS, covering its key features and benefits. We’ll also show you how to get started and expand functionality, and look at how Vite can optimise your apps.
Key features of ViteJS
Tools like Webpack and Rollup have helped to streamline front-end development and as native ES (ECMAScript) module support has become widespread in browsers, the situation has improved considerably. In fact, Vite is, in part, built on Rollup. But bottlenecks can be a problem for developers with complex code. Dev servers using bundler-based setups can take a significant time – even minutes – to reload when changes are made. Rather than bundling, however, Vite.js supports native ES modules (ESM) and serves them direct to the browser. That means it doesn’t need to reload the whole application when you make a change, so there’s no interruption to your development cycle.
ViteJS achieves this speed through Hot Module Replacement (HMR). HMR means that modules can replace themselves independently of other page elements. While some bundlers support HMR, Vite’s approach is faster, using native ESM, so only a restricted portion of the dependency chain is invalidated. This means HMR times don’t expand as the application gains complexity.
Vite has direct support for code-splitting and lazy loading to aid performance. With frameworks like Vue or React, you need to declare lazy import components manually for each route. However, Vite splits chunks automatically according to a vendor-based config, determining what needs to be loaded and when.
Dependency pre-bundling takes place transparently when you run the
vite command for the first time in your project. This improves both compatibility and performance. CommonJS and UMD components are converted to native ESM and the conversion of ESM dependencies into a single module enhances later page loads by requiring only a single HTTP request.
Recommended Video: What is Vite? By Jennifer Bland
Getting Started with ViteJS
There are also TypeScript variants of each of these.
To run Vite, you’ll need Node.js v14.18 or above. You can then use command-line tools NPM, Yarn or PNPM to start a project – Vite will install all necessary components from here. For example, with NPM, just enter the following in your terminal:
$ npm create vite@latest
Then follow the prompts to name your project, choose your framework and select a language variant. Once done, you can enter your project directory and type the following to fire up your server:
$ npm install
$ npm run dev
This will generate a basic application scaffold – you can see the results in your browser, at
http://localhost:5173/ by default. Note that, as standard, Vite uses a single
Of course this scaffold is only a beginning – Vite.js is highly extensible and flexible and also features many presets for established frameworks and types of projects. You can choose a range of community-developed templates on the Vite community github to start your project .
Exploring the ViteJS ecosystem
While it’s simple to get started with Vite.js, there is also a significant ecosystem to explore for extending functionality.
Plugins allow you to extend Vite.js in diverse ways (though you’ll also find many common patterns are already supported by Vite’s core functionality). The plugin infrastructure is based on that of Rollup, with a few additional options. This means they come with a mature and stable ecosystem. Vite’s official plugins include additional functionality for Vue single file components, JSX and SWC, an alternative compiler tool to Babel. There’s also an extensive range of community-maintained plugins that extend Vite’s functionality in important ways, such as support for PWAs.
Community and developer support
We’ve already mentioned Awesome Vite as a source for plugins, integrations and templates. You’ll find resources here for a huge range of extensions to Vite’s core functionality. Vite’s developer community is also lively and helpful. You’ll find plenty of support on Github Discussions as well as the #help channel on Vite Land Discord.
Performance and optimization
Aside from its ease of use, the major advantage of Vite.js is its performance. It achieves this by using native ESM for HMR. As we outlined above, this can save many seconds and sometimes even minutes in reload times that would otherwise have a severe impact on the development process. Traditional bundlers like Webpack, when tasked with compiling your code and assets, go through the whole dependency tree to provide the widest browser support. Vite, by contrast, only supports ESM-supporting browsers, which means it can take advantage of dynamic loading strategies.
Vite also automates the optimisation of asynchronous chunk loading with a preload step that can determine dependencies before the initial load. This prevents the 2-stage loading of dependent chunks and extra network round trips.
Page loads in production
When it comes to deployment on production, Vite.js also pays dividends. The
vite build command automatically produces a production-ready application bundle that only requires static hosting, meaning less server-side processing and simpler server setups.