JavaScript build tools have changed and shaped the way we build things that run on the web. Build tools are an integral part of any development workflow, they include (but are not limited to) task runners, transpilers, module bundlers, linters, package managers, and development servers.
These tools help developers build efficiently and make development processes much easier(although, configuring them can get complicated).
In this article, we will take a look at a build tool called Vite, what it is, why we need it, how it might improve our development workflow, and how to get started with it.
This tutorial assumes the reader has the following:
Vite was originally intended as a development server for just Vue single file components(SFC) but it has evolved and is now a no-bundle JavaScript development server.
As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs **with hot reload**. Now it’s almost 6AM and I have PoC working. The hot reload is so fast it’s near instant.
— Evan You (@youyuxi) April 20, 2020
Vite doesn’t bundle our projects in development environments, rather it uses native ES module imports.
According to its official documentation:
Vite is an opinionated web dev build tool that serves your code via native ES Module imports during development and bundles it with Rollup for production.
The main difference between Vite and the other development servers currently available is the fact that it does not bundle your files during development.
It is important to note that Vite is still very much experimental and is undergoing work to make it suitable for production. It is best to not use it on critical projects until it becomes stable.
One of the reasons module bundlers are popular today is the poor support for ES6 modules by the browser when ES modules were first introduced in ES2016. Many modern browsers now support native ES modules and you can use the import and export statements natively, we can include our imports in our HTML using the type="module" attribute in our script tag to specify we’re importing a module:
<script type="module" src="filename.js"></script>
According to the documentation, the ES import syntax in our source code is served directly to the browser and any browser that supports the native <script module> automatically parses them, then makes HTTP requests for each import. The dev server intercepts the HTTP requests from the browser and performs code transformations where necessary.
This makes the Vite server insanely fast, Vite Cold start clocks at around 140ms compared to Vue-CLI 1900ms.
vue-next-webpack-preview cold server start: 1909ms / compiled for first view: 2732ms
vite cold server start: 129ms
— Evan You (@youyuxi) May 4, 2020
Some of the perks of using Vite include:
Bare module resolving — Browsers do not yet support bare module imports where you import from a package name like import { createApp } from 'vue' because it’s not a relative path to our node_modules. Vite checks your JavaScript files for such bare import specifiers, it rewrites them and performs module resolution to locate the correct files from your project dependencies and resolves them as valid module specifiers.
Hot module replacement(HMR) — Hot module replacement is a feature available in JavaScript bundlers where your JavaScript file changes are updated in the browser without needing a browser refresh, with Vite all your file changes are reflected in the browser almost immediately and you do not need to reload the browser. According to the documentation, “the hot module replacement (HMR) performance is decoupled from the total number of modules. This makes HMR in your project consistently fast no matter how big your app is”.
HMR speed is a huge pain point for developers who use Webpack.
On-demand compilation— Vite compiles source files as they are requested by the browser so the only code that is imported and required on the current screen is compiled, and unchanged files return a 304 (Not Modified) error code. This is different from what current bundlers do because they compile all the files in your project and bundle them before you can begin making changes to them. This makes Vite suitable for larger projects.
Configuration option — If you like to have more controls over your project, You can extend the default configuration of your project with the vite.config.js or vite.config.ts file in the base root directory of your project or the current working directory. You can also explicitly specify a config file via vite --config my-config.js.
You can add support for custom file transforms by adding a Koa middleware in your configuration file in development mode and a Rollup plugin for build.
.tsx and .jsx files using esbuild for transpilationTo get started using Vite, we will be making use of create-vite-app, a boilerplate to bootstrap new Vite projects, we will not have to worry about configurations to get started with using our app as it comes with Vue as the default starter and we can configure what template we want to use with the --template flag as it also supports React and Preact.
Run this command to create a new Vite app with the boilerplate:
#Using NPX npx create-vite-app testing-vite #or, Using Yarn yarn create vite-app testing-vite
We’re using the name “testing-vite” as the project name for this tutorial, it can be replaced with whatever name you deem fit.
Now, change to the created project directory using the command:
cd testing-vite
Then proceed to install the necessary packages required for our project to work:
#Using NPM npm install #or, Using Yarn yarn
We can then spin up our development server in the browser by running the command:
#Using NPM npm run dev #or, Using Yarn yarn dev
You should get something similar to this running on http://localhost:3000 after running the dev command:
You can run the following command to bundle your app for production:
vite build
Vite uses Rollup for production builds, the production build output is in the dist directory located in the root of your project. It contains static assets that can be deployed anywhere (and can be polyfilled to support older browsers).
The documentation says, “the build step is configurable by passing on most options to Rollup”.
With Vite, you have a very fast development server that would improve your development workflow and increase productivity.
The result of your file changes are instantaneous in the browser and you can bundle your app for production using Rollup. The code repository to this article can be accessed on GitHub.
There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.
LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.
LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — start monitoring for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]
Learn more →
