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:
- Node.js 10x or higher
- Yarn / npm 5.2 or higher installed on their PC
What exactly is Vite?
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.
How does it work?
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
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
What does Vite offer?
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
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.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.
Other features of Vite include:
- Support for
.jsxfiles using esbuild for transpilation
- Out of the box support for TypeScript also using esbuild for transpilation
- Asset URL handling
- Support for CSS Preprocessors, PostCSS, and CSS modules
- Support for mode options and environment variables
To 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:
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
You can run the following command to bundle your app for production:
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.
Are you adding new JS libraries to improve performance or build new features? What if they’re doing the opposite?
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.