Pros and Cons of Vite and Vue CLI

There is a new build tool in the Vue ecosystem called Vite, which has a development server that is 10-100 times faster than the Vue CLI.

Does this mean that Vue CLI is outdated? In this article, I’ll compare the two build tools and explain their pros and cons so you can decide which one is right for your next project.

Vue CLI Overview

Most Vue developers know that Vue CLI is an indispensable tool for quickly setting up Vue-based projects using standard build tools and best-practice configurations.

Its main functions include:

• Engineering Scaffolding
• Development server with hot module reloading
• Plugin System
• user interface
  

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

Vite Overview

Similar to Vue CLI, Vite is also a build tool that provides basic project scaffolding and a development server.

However, Vite is not based on Webpack, it has its own development server that utilizes native ES modules in the browser. This architecture makes Vite orders of magnitude faster than Webpack's development server. Vite is built using Rollup and is also faster.

Vite is still in the testing phase. It seems that the purpose of the Vite project is not to be an all-in-one tool like Vue CLI, but to focus on providing a fast development server and basic build tools.

Why is Vite so fast?

The Vite development server is at least 10 times faster than Webpack. For a basic project, the difference in development build/rebuild time is 250ms compared to 2.5 seconds.

In a larger project, this difference becomes more apparent. The webpack dev server can be as slow as 25-30 seconds on build/rebuild, sometimes even slower. At the same time, the Vite development server might be serving the same project at a constant 250ms.

This is clearly a game-changing difference in development experience, how does Vite do this?

Webpack Development Server Architecture

The way Webpack works is that it builds your entire application into a JavaScript-based bundle by parsing every import and require in your application and transforming files (e.g. Sass, TypeScript, SFC) at runtime.

This is all done on the server side, and there is a roughly linear relationship between the number of dependencies and the time to build/rebuild after a change.

Vite Development Server Architecture

Vite does not bundle an application server. Instead, it relies on the browser's native support for JavaScript modules (aka ES modules, which is a relatively new feature).

The browser will request any JS modules over HTTP when needed and process them at runtime. The Vite development server will convert any files (such as Sass, TypeScript, SFC) on demand.

This architecture avoids bundling the entire application on the server side and takes advantage of the browser's efficient module handling to provide a significantly faster development server.

Tip: Vite is faster when you code-split and tree-shake your application because it only loads the modules it needs, even during development. This is different from Webpack, where code splitting only benefits production bundles.

Disadvantages of Vite

As you may have figured out, the main feature of Vite is its ridiculously fast development server.

Without this feature, it probably wouldn’t be discussed anymore, as it really doesn’t have any additional features compared to Vue CLI and does have some drawbacks.

Since Vite uses JavaScript modules, it is best to make dependencies use JavaScript modules as well. While most modern JS packages offer this, some older packages may only provide CommonJS modules.

Vite can convert CommonJS to JavaScript modules, but it may not be able to do it in some edge cases. Of course, it also requires a browser that supports JavaScript modules.

Unlike Webpack/Vue CLI, Vite cannot create bundles targeting older browsers, web components, etc.

Also, unlike Vue CLI, the development server and build tools are different systems, leading to potentially inconsistent behavior in production vs. development.

Vue CLI vs Vite Summary

The Future of Vite

While the above comparison focuses on the current state of Vite and Vue CLI, there are still a few points to consider:

• Vite will only improve as JavaScript module support in browsers improves.
• As the JS ecosystem catches up, more packages will support JavaScript modules, reducing the number of edge cases that Vite cannot handle.
• Vite is still in beta – functionality is subject to change.
• It’s possible that Vue CLI will eventually integrate with Vite so that you don’t have to use either one anymore.
  

It’s worth noting that Vite isn’t the only development server project taking advantage of JavaScript modules in the browser. There is also the more famous Snowpack, which may even squeeze out the development of Vite. Time will tell

The above is the detailed content of the advantages and disadvantages of Vite and Vue CLI. For more information about Vite and Vue CLI, please pay attention to other related articles on 123WORDPRESS.COM!