Vite is a build tool created by Evan You, the creator of Vue. It allows for faster development thanks to super fast Hot Module Reload (HMR), fast cold start times, and CSS + JSX + TypeScript support out of the box.
Although Vite is opinionated, it can be extended via its Plugin API and JavaScript API. It allows developers to serve code natively using ES Modules during development, which negates the need for a bundle step.
Why work with Vite?
Although Vue is a fantastic progressive framework for building user interfaces, it can be troublesome for a developer to experience long wait times when using a dev server.
Prior to ECMAScript Modules being available in the majority of modern browsers, (sorry IE11!), the concept of bundling referred to the process of crawling and concatenating source modules into files that the browser can run.
Since its first release 8 years ago, we have seen tools like Webpack, a bundle-based build tool, address some of these issues, such as dependency injection and combining scripts to reduce page load times.
The diagram below shows how Webpack takes source scripts, images, assets and styles, and processes them into chunked static assets for the browser to consume.
Vite works a little differently.
In development mode, Vite splits the application code into two.
One is the dependency code, i.e. code imported from node_modules. This code is processed using esbuild. Esbuild is a javascript bundler written in Go that processes around 10-100 times faster than Webpack.
Two is the application code e.g. the custom-written code for the application such as .jsx, .vue, or .scss files.
Unlike Webpack, Vite uses route-based code splitting to load only the parts of the code that need to be loaded, unlike Webpack which has to rebundle everything.
Using Vite can dramatically improve the performance of coding many languages during development, and reduce the feedback loop time which is ordinarily incurred with Webpack.
How does Vite work?
Vite’s ability to pre-bundle NPM dependencies and convert CommonJS/UMD modules to ESM using esbuild, means that Vite’s cold start times are significantly faster than any other JavaScript-based bundler.
Vite also provides an HMR API over native ESM. In this way, precise instant updates can be made to the page with reload or loss of application state. This is an in-built capability when using the Vite CLI to create an app using create-vite.
To optimise assets, Vite currently uses Rollup. Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. Rollup allows you to develop code in a modern way using ES modules, and compiles it back to older supported formats such as CommonJS modules, AMD modules, and IIFE-style scripts.
One major benefit of using Rollup is that Rollup statically analyzes code to only import and export required code only, resulting in lighter and faster builds.
Vite was initially created to serve as the future foundation of Vue.js tooling. Although as of 2.0 Vite is now fully framework-agnostic, supporting frameworks such as:
Speed comparisons
* Vite changes pretty much instantly (this may in fact be a few milliseconds)
Vite in Action
GPMD is currently using Vite across several existing projects such as sshman and BigCommerce Apps - Blinker and Nominated Days.
As we can see in the speed demonstrations, using Vite, combined with its framework agnostic capabilities, can potentially save many developers time and also money.
It allows not only for increased speed during app prototyping but also during the development cycle.
References
https://vuejs.org/
https://vitejs.dev/
http://github.com/shoobyban/sshman
https://rollupjs.org/
