Contemporary web apps rely heavily on JavaScript and its ecosystem. No longer simply responsible for ad-hoc snippets in otherwise static pages, JavaScript is now the driving force for dynamic web apps whose functionality closely models that of native apps. But this complexity comes at a cost. These apps may leverage hundreds or even thousands of JavaScript (also ECMAScript or TypeScript) modules.
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
Vite is designed for speed and efficiency, so getting started is easy. It embraces the paradigm of convention over configuration (CoC), also known as ‘opinionated’ software. That means it works well straight out of the box. But it’s also very flexible and extensible, with wide support for languages and frameworks. Supported templates for JavaScript are:
- Vanilla
- Vue
- React
- Preact
- Lit
- Svelte
- Solid
- Qwik
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 index.html as its entry point and part of the module graph. From here, references to JavaScript source code and other assets are loaded as required. Resources are automatically rebased by Vite, so there’s no need to manage placeholders for publicly accessible directories. All of this means you can write code as you would for a static HTTP server, knowing that Vite will handle routes for you.
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.
Vite plugins
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.
Framework integrations
If you want to stick with an existing non-JavaScript back-end framework like Rails, Flask, Django or Laravel, Vite.js supports integrations here too. You can use your preferred web framework for standard MVC-style applications and use Vite for serving assets. You’ll find many of these integrations ready to use on the community portal, Awesome Vite. And if you wish to develop a custom integration of your own, that’s possible too, with a few configuration directives.
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.
Faster workflows
Vite’s ESM support means faster development workflows, preventing those tiresome waits during build processes. Vite.js does much of this out-of-the-box and includes many performance optimisations as standard. As well as core JavaScript code-splitting, Vite also automatically performs CSS code-splitting, generating asynchronous chunks that can be loaded only when needed.
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.
Conclusion
ViteJS is still young, but since its initial release in 2020, uptake has increased. It’s clear enough why. Vite is fast and lightweight, and allows developers to focus on their code without interruption or distraction from troublesome build processes. But Vite is not just easy to use. As web apps continue on their path towards greater standardisation and coherence with native applications, the demands placed on JavaScript libraries and frameworks are expanding hugely. To that extent, ViteJS is rapidly becoming an essential tool in managing complex JavaScript and ESM-driven applications.
