Does Vite make Vue CLI obsolete?

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

Does this mean Vue CLI is obsolete? 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.

Summary of the Vue CLI

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

Its main functions include:

• Construction scaffold
• Development server with hot module overload
• Plug-in system
• The user interface

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

Vite overview

Like the Vue CLI, Vite is a build tool that provides basic project scaffolding and development servers.

However, Vite is not based on Webpack and has its own development server, leveraging the native ES module in the browser. This architecture makes Vite several orders of magnitude faster than Webpack’s development server. Vite builds with Rollup, which is also faster.

Vite is currently in beta, and it seems that the Vite project is not intended to be an all-in-one tool like Vue CLI, but rather to focus on providing a fast development server and basic build tools.

How did Vite go so fast?

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

In a larger project, the difference becomes more pronounced. Webpack development servers can be as slow as 25-30 seconds when building/rebuilding, and sometimes even slower. At the same time, the Vite development server might be servicing the same project at a constant 250ms.

This is clearly the difference between development experience and game-changing, how does Vite do it?

Webpack develops the server architecture

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

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

Vite development server architecture

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

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

This architecture avoids server-side bundling of the entire application and leverages the browser’s efficient module handling to provide a significantly faster development server.

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

The disadvantage of Vite

As you probably already know, Vite’s main feature is its ridiculously fast development server.

Without this feature, we probably wouldn’t be talking about it, because it really doesn’t have any other features compared to the Vue CLI, and it does have some disadvantages.

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

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

Unlike the Webpack/Vue CLI, Vite cannot create bundles for older browsers, Web Components, and so on.

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

Vue CLI vs Vite summary

So what was the verdict?

For experienced Vue developers, Vite is a great choice because its development server is ridiculously fast and makes Webpack look like prehistoric times.

However, for new Vue developers who prefer a little hand-holding, or for large projects that use legacy modules and require complex builds, the Vue CLI is likely to remain essential for now.

The future of Vite

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

• Vite will only improve if 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 can’t handle.
• Vite is still in beta — functionality may change.
• It’s possible that the Vue CLI will eventually be combined with Vite so you don’t have to use one of them anymore.

It’s worth noting that Vite isn’t the only development server project that utilizes JavaScript modules in browsers. There is the more famous Snowpack, which may even crowd out Vite’s growth. Time will tell

reference

• Vite and VitePress, Evan You, VueConf Toronto 2020
• Vite – GitHub
• Vue CLI – GitHub

Original text: blog. Zhangbing. Site / 2020/12/18 /… Source: vuejsdevelopers.com