Advantages and disadvantages of Vite and Vue and CLI

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

Does this mean that Vue CLI is out of date? In this article, I will compare these two build tools and explain their advantages and disadvantages so that you can decide which one is suitable for your next project.

Overview of Vue CLI

As most Vue developers know, Vue CLI is an indispensable tool for quickly building Vue-based projects using standard build tools and best practice configurations.

Its main functions include:

Engineering scaffold Development server with hot module overload Plug-in system User interface

Note in this discussion that Vue CLI is built on top of Webpack, so the development server and build functionality and performance will be supersets of Webpack.

Overview of Vite

Similar to Vue and CLI, Vite is a build tool that provides scaffolding and development servers for basic projects.

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

Vite is still in the beta stage, and it seems that the purpose of Vite project is not to provide a 1-body 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 will be at least about 10 times faster than the Webpack. For a basic project, the development build/rebuild time difference is 250ms compared to 2.5 seconds.

In a larger project, this difference will become more obvious. The Webpack development server may be as slow as 25-30 seconds or even slower during build/rebuild. At the same time, the Vite development server may serve the same project at a constant speed of 250ms.

This is obviously the difference between the development experience and the change of the rules of the game. How did Vite achieve this 1 point?

Webpack Development Server Architecture

Webpack works by parsing every import and require in the application, building the entire application into an JavaScript-based bundle, and transforming files (for example, Sass, TypeScript, SFC) at run time.

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

Vite Development Server Architecture

Vite does not bind the application server side. Instead, it relies on the browser's native support for the JavaScript module (that is, the ES module, a relatively new feature).

The browser will request any JS module through HTTP as needed and process it at run time. The Vite development server will convert any files (such as Sass, TypeScript, SFC) as needed.

This architecture avoids the binding of the whole application on the server side, and provides a significantly faster development server by using the efficient module processing of the browser.

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

Disadvantages of Vite

As you may already understand, the main feature of Vite is that its development server is ridiculously fast.

Without this feature, it probably won't be discussed again, because compared with Vue CLI, it really doesn't have other functions, and it does have some disadvantages.

Since Vite uses the JavaScript module, it is best to have dependencies also use the JavaScript module. While most modern JS packages provide this 1, older packages may only provide CommonJS modules.

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

Unlike Webpack/Vue CLI, Vite cannot create bundles for legacy browsers, web components, and so on.

Moreover, unlike Vue CLI, development servers and build tools are different systems, which may lead to different behaviors in production and development.

Summary of Vue CLI vs Vite

Vue CLI 优点	Vue CLI 缺点
经历过战斗考验，可靠	开发服务器速度与依赖数量成反比
与 Vue 2 兼容
可以捆绑任何类型的依赖关系
插件生态系统
可以针对不同的目标进行构建

Vite 优点	Vite 缺点
开发服务器比 Webpack 快 10-100 倍	只能针对现代浏览器（ES2015+）
将 code-splitting 作为优先事项	与 CommonJS 模块不完全兼容
	处于测试阶段，仅支持 Vue 3
	最小的脚手架不包括 Vuex、路由器等
	不同的开发服务器与构建工具

The Future of Vite

Although the above comparison focuses mainly on the current status of Vite and Vue CLI, there are still several points to consider:

Vite will improve only if support for the JavaScript module in the browser is improved. As the JS ecosystem catches up, more software packages will support JavaScript modules, reducing edge situations that Vite cannot handle. The Vite is still in the beta phase and the functionality is subject to change. It is possible that Vue CLI will eventually combine with Vite, so that you don't have to use one of them.

It is worth noting that Vite is not the only 11 development server projects that utilize the JavaScript module in the browser. There is also the more famous Snowpack, which may even squeeze out the development of Vite. Time will prove this one point

The above is the Vite and Vue CLI pros and cons of the details, more information about Vite and Vue CLI please pay attention to other related articles on this site!