Vite is a new build tool in the Vue ecosystem that boasts a significantly faster development server compared to Vue CLI (10–100x faster). Both Vue CLI and Vite are popular tools for building Vue.js applications. They offer scaffolding, development servers, and build functionality, but differ in architecture and performance.

Vue CLI

Vue CLI is a tool for quickly setting up a Vue-based project with the standard build tools and best-practice configuration.

Its main features include:

• Project scaffolding
• Dev server with hot-module reloading
• Plugin system
• User interface

It’s important for this discussion to note that Vue CLI is built on top of Webpack, so both the dev server and build functionality and performance will be a superset of Webpack.

Webpack

Webpack serves as a static module bundler, primarily aimed at combining the assets of your web project into a few compact files that can be easily downloaded by web browsers.

Webpack operates by creating a JavaScript-based bundle of your entire application, addressing each import and require statement in the app and modifying files as necessary, such as Sass, TypeScript, and SFC (Single File Components).

This process takes place on the server side, and the duration to build the bundle after making changes is generally proportional to the number of dependencies involved.

Vite

Vite is a development server and build tool that enhances the speed and efficiency of web development. It offers a development server that serves your project while you’re working on it, featuring instant Hot Module Replacement (HMR) that enables you to observe code changes in real-time.

Unlike Vue CLI, Vite doesn’t rely on Webpack. Instead, it has its own development server that leverages native ES modules directly in the browser. Vite utilizes Rollup for the build process, which results in faster performance compared to other methods.

‍

How Vite is faster than Vue CLI

As we mentioned before, both Vue CLI and Vite offer scaffolding, development servers, and build functionality but differ in architecture and performance.

‍

Vue CLI dev server

Vue CLI development server is based on Webpack development server that comes with hot module replacement (HMR).

‍

‍

A bundler-based build setup has to eagerly crawl and build your entire application before it can be served.
When the bundler starts the build process, it scans through the application’s entry point and follows every import and require statement to identify all the dependencies in the project. It traverses the entire dependency graph, ensuring that every module and file required by the application is accounted for. It then builds the application by transforming, optimising, and bundling modules, including handling JavaScript, CSS, and assets.
This approach requires completing the full build process before the application can be served or deployed. Changes in the codebase necessitate repeating the entire process. While ensuring proper optimisation, this approach may lead to longer build times. Overall, the bundler-based build setup ensures the complete processing of the application before it can be served.

‍

Vite dev server

‍

‍

Vite improves dev server start-up time by dividing modules into two categories.
1. Dependencies
2. Source code

Dependencies are plain JavaScript that doesn’t change often. Some large dependencies are expensive to process. Vite pre-bundles dependencies using a fast tool called esbuild.
Source code contains non-plain JavaScript that needs transforming and will be edited frequently. Vite serves source code as a native ESM, letting the browser handle part of the bundling. It transforms and serves code on demand, optimising loading for route-based code splitting.
In simpler terms, Vite speeds up the dev server by pre-bundling dependencies quickly and serving source code on-demand, utilising the browser’s capabilities to optimise loading.

‍

When you create a basic Vite project (in our case, a Vite project for Vue 3), the index.html file is pretty basic:

‍

Index.html

This setup resembles the Vue CLI, but with a key difference: the script tag has the attribute type=”module”. The src attribute of the script points directly to your original source code file.

When this request is made, the main.js file is sent to the browser as a native ES module. As a result, your code is not bundled at all. Essentially, the source file serves as a basic Vue startup file.4

‍

‍

Main.js

What is happening here?

Vite utilizes native ES modules and dynamic ESM modules to inject your code into the browser as needed. Whenever an import statement is encountered in your project, the browser dynamically loads the required code. This dynamic loading approach ensures that only the necessary code is fetched for each specific scenario.

During the development process, Vite not only serves your website but also facilitates this dynamic loading mechanism. It applies this technique to both modern browsers that support it and older browsers through a compatibility mechanism.

In addition, Vite is using Hot Module Replacement (HMR) to update changed code while you’re developing your project. This creates the least amount of friction while you’re developing with an almost instant launch speed for your project.

‍

Conclusion

When building Vue.js applications, Vite provides a quicker option compared to Vue CLI. It utilizes on-demand code loading and Hot Module Replacement (HMR) to enable shorter development cycles and instant code upgrades. By reducing build and reload times, Vite improves the overall development process.

If speed and efficiency are crucial to you, opting for Vite as your build tool can significantly boost productivity and accelerate development for your Vue.js project.

‍