Introduction to Vite: the lightning-fast module bundler

Developers have been struggling a lot with the cold start of dev servers while working on solutions build using react and other JavaScript frameworks. These frameworks use module bundlers such as webpack, parcel and rollup to combine multiple files into a single bundle. It is time consuming to bundle the code and makes users wait ridiculously. As a solution to this problem, Vite, a lightning-fast module bundler provides instant code compilation and rapid hot module replacement.

In this article, we will learn basics of Vite and create a sample react application using the Vite framework.

Getting Started

Table of contents

• Introduction to Vite
• Vite module categorization
• Vite vs Webpack
• Pros and Cons
• Creating first Vite project
• Vite project structure
• Creating a Basic App
• Useful links

Introduction to Vite

Vite is a build in tool created by Evan You, the creator of the Vue.js framework to provide a faster and leaner development experience for modern web projects. It is the next-generation frontend tooling that provides a lightning-fast dev server, bundling and resolves the server cold start issue.

Before ES modules, developers had no native mechanism for modularizing JavaScript codes. Bundling is the process that crawls and concatenates Javascript modules into files that can run in the browser. Webpack, Rollup and Parcel are the most commonly used bundling tools. These tools have a lots of performance issues while dealing with large scale projects that contains thousands of modules. It can often take up an unreasonably long wait to start a dev server, and file edits can take a couple of seconds to be reflected in the browser.

Vite address these issues with the use of native ES modules in the browser. It takes advantage of the native ES modules supported in modern browsers and runs a server that compiles and serves any required dependencies on the fly via ES modules. This approach allows Vite to process and provide only the required code. It is lightning fast as it uses esbuild for pre-bundling dependencies during the development. esbuild is an extremely fast JavaScript bundler written in the Go language.

Image source esbuild — FAQ

Vite module categorization

Vite divides modules in an application into two categories to improve the dev server starting time.

• Dependencies —Mostly plain JavaScripts which do not change often during development. Vite pre-bundles dependencies using esbuild are 10–100x faster than JavaScript-based bundlers.
• Source code — Often contains non-plain JavaScripts that needs transforming (e.g. JSX, CSS or Vue/Svelte components), and are often edited. Vite transforms and serves source code on demand when the browser requests.

Vite vs Webpack

Webpack is one the most commonly used bundlers for web projects. It bundles all files in the project before the development server is ready. In webpack, as the number codes to be processed increases, the compilation process also increases. Similarly, during hot module replacement when the code is updated, webpack needs to perform additional processing to update the bundle and serve the latest code during the development.

The use of native ES modules (native ESM) gives Vite a significant speed over webpack, which handles the code and bundling dependencies differently. Vite processes and provides only the code. If an application has 100 pages and some modifications are need on the 90th page, Vite processes only that page whereas webpack bundles the entire project.

Image source Why Vite | Vite (vitejs.dev)

Pros and Cons

Let’s have a look at some of the pros and cons of Vite.

Pros

• It provides lightning-fast start-ups with instant hot module replacement. It’s much faster than other CLIs such as Create React App, Lit or Vanilla, which use webpack to bundle the projects.
• CSS Pre-Processors support for Sass, Less and Stylus.
• It offers multi-page support.
• It is framework-agnostic and offers templates for React, Vue, Svelte, Lit and Vanilla.
• It offers a “library mode” which can be used for creating browser-oriented libraries.

Cons

• Different tools are used for bundling the code; esbuild is used for the development build whereas Rollup is used for production build. This could result in bugs that are hard to debug and fix.
• Lack of first-class support for Jest.

Creating first Vite project

Requirements

• nodejs 12.2+

• npm or yarn
  Vite is used to develop projects for multiple frameworks such as vanilla, lit, react, vue etc. In this section, we will create a React application using Vite.

• Run the following command in the terminal to create a react application with default template values.
  

npm init vite@latest first-vite-react-app --template react

• After project creation, navigate into the project folder, install all dependencies and start the development server using the following command.

cd first-vite-react-app
npm install
npm run dev

• Open the local url on the browser to visualize the app.

Vite project structure

Vite app provides similar same project structure as the “Create React App” with minimal configuration changes.

• public directory — Contains static assets that are not referenced in the code like favicon, robot.txt etc.
• index.html — It is the entry point to your application. Vite treats it as the source code and part of the module graph.
• main.tsx — It is one of the main files similar to index.js in create react app to render the App.jsx file.
• src directory — Contains the source code of the project.
• vite.config.js file — Defines different configuration options for the application like base URL, build directory, etc.
• package.json — Lists the package names along with version the project depends on.

Creating a Basic App

In this section, we will create a basic app to display a profile card.

• Create a directory called components within the src/ directory.
• Create a file, Welcome.jsx inside the src/components/ directory and add the following code to it.

export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Vishnu Sivan</h1>
        <p>Immersive Tech Lead, TCS</p>
        <p>Seasoned professional, forward looking software engineer with 3+ years of experience <br/>
          in creating and executing innovative solutions to enhance business productivity.</p>
        <a href="https://codemaker2015.github.io/">codemaker2015.github.io</a>
      </div>
    </>
  );
}

The above code will create a new functional React component called Welcome. Create a div to show the user name, role, single line bio and portfolio link.

• Open App.jsx file and provide a reference to the new component in it.

import Welcome from "./components/Welcome"

export default function App() {
  return (
    <>
      <Welcome />
    </>
  )
}

• Add a profile icon image within the src/assets directory.
• Add the profile icon in the Welcome component as below,

import icon from "../assets/logo.jpg"

export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <img src={icon} alt="Profile Icon" width={200} height={200} />
        <h1>Vishnu Sivan</h1>
        <p>Immersive Tech Lead, TCS</p>
        <p>Seasoned professional, forward looking software engineer with 3+ years of experience <br/>
          in creating and executing innovative solutions to enhance business productivity.</p>
        <a href="https://codemaker2015.github.io/">codemaker2015.github.io</a>
      </div>
    </>
  );
}

• Create a new directory, css under the src/ directory and add the following code to it.

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0596df;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #d4d4d3;
    padding: 20px;
    border-radius: 10px;
}

img {
    border-radius: 10px;
}

h1 {
    color: #0596df;
}

• Add main.css reference in the Welcome.jsx component. The final Welcome component is as shown below,

import icon from "../assets/logo.jpg"
import "../css/main.css"

export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <img src={icon} alt="Profile Icon" width={200} height={200} />
        <h1>Vishnu Sivan</h1>
        <p>Immersive Tech Lead, TCS</p>
        <p>Seasoned professional, forward looking software engineer with 3+ years of experience <br/>
          in creating and executing innovative solutions to enhance business productivity.</p>
        <a href="https://codemaker2015.github.io/">codemaker2015.github.io</a>
      </div>
    </>
  );
}

• Run the app using the following command

npm run dev

There you have it! Your own web app using Vite for react :)

Thanks for reading this article.

Thanks Grigary C Antony for providing glance of Vite concepts.

Thanks Gowri M Bhatt for reviewing the content.

If you enjoyed this article, please click on the heart button ♥ and share to help others find it!

The full source code for this tutorial can be found here,

GitHub - codemaker2015/vite-sample-projects

The article is also available on Medium.

Here are some useful links,

• Vite
• Vite - React.js Examples
• vite examples - CodeSandbox
• Vite Plugin PWA