The good and bad of Vite

The full text is 3000 words, welcome to like, follow and forward

1. What is Vite

In April 2020, Youda made such a tweet:

Then, in February 2021, Vite 2.0 came, and it came up as a set of combo punches:

• Extremely fast development experience based on esbuild
• Multi-frame support
• Compatible with Rollup's plug-in mechanism and API
• SSR support
• Old browser support

At the beginning, I refused. From grunt, gulp, to Webpack, Rollup, Snowpack, and several well-known and unknown build frameworks, they are all in 2021. Come? Then I tried it out, um, it's really fragrant!

2. Advantages of Vite

2.1 Really fast

Vite is very, very fast, compared to Vue-cli (based on Webpack):

Sample code: Vue3 project, 10 components

The running time of the dev command for testing the two differs ten times. In theory, the larger the project, the greater the performance gap. Why? The biggest reason is that Vite does not do much packaging operations in development mode!

After Webpack starts, it will do a lot of things and go through a long compilation and packaging chain. Starting from the entrance, you need to gradually go through syntax analysis, dependency collection, code translation, packaging and merging, code optimization, and finally compiling and packaging the high-version, discrete source code. It is a product code with low version and high compatibility. This is full of CPU and IO operations. Performance must be problematic when Node is running.

Vite only did two things after running the Dev command. One was to start a service for hosting resource services; the other was to use esbuild pre-build the npm dependency package. After that, I lay down until the browser sent a request for the module of the ESM specification through http, and Vite started to " on-demand compiling " the requested module.

The premise of Vite here is:

• Most modern browsers already natively support the ESM specification, and build tools-especially in the development environment, it is not necessary to spend a lot of time on compiling and packaging for low version compatibility!

In such a comparison, Webpack does everything, the browser only needs to run the compiled low version (es5) code; while Vite only handles part of the problem, and the rest is handled by the browser itself, so the speed is bound to be a thief. fast.

In addition to skipping the compilation operation during the startup phase, Vite also has many performance optimizations worth mentioning. Take a look at it as a whole:

• Precompiled: This module does not change the basic npm package, use Esbuild in prebuilt stage collated first package, to reduce the number of http requests
• On-demand compilation: user code, such as frequently changed modules, will not be compiled until it is used
• Client-side strong caching: The requested module will be max-age=31536000,immutable . If the module changes, the additional version query will be used to invalidate it
• Product optimization: Compared with Webpack, Vite directly anchors the higher version browser, and does not need to insert too much runtime and template code in the build product
• Built-in better subcontracting implementation: no user intervention is required, a series of smart subcontracting rules are enabled by default to minimize the repeated packaging of modules
• Better processing of static resources: Vite tries to avoid directly processing static resources, but chooses to provide services in accordance with the ESM method, such as the introduction of the image import img from 'xxx.png' statement, after the execution, the img variable is just a path string.

It can be seen that the speed of Vite is all-round. From Dev to Build, from npm package to project source code, to static resource processing, various optimization measures are implemented as much as possible under the framework of ESM rules, and the theoretical performance is greatly improved.

2.2 Simple

The usage of Vite is very simple, execute the initialization command:

yarn create @vitejs/app my-vue-app --template vue

You get a preset development environment, and you can start writing demos happily. Vite will give you a bunch of functions out of the box, including css preprocessor, html preprocessor, hash naming, asynchronous loading, sub-package, compression , HMR, etc.:

These functions are preset by the author according to industry best practices, and usually do not require user intervention to make changes.

The performance of Vite is easily reminiscent of vue-cli, but the difference between the two is quite big: vue-cli depends on Webpack at the bottom, and the actual construction work is usually implemented by various Webpack loader and plugins, such as less => css by less -loader implementation; image loading is implemented by img-loader, etc. This design is very flexible. You can make any changes you can think of under the Webpack system. You only need to learn a little knowledge of Webpack, including hundreds of configuration items, thousands of plug-ins, and a number of illusory construction concepts.

Vite is very concise. It only exposes a very small number of configuration items and plugin interfaces. The design does not intend to allow you to do too many custom operations. . . This is because Vite did not intend to make another Webpack from the very beginning, but a set of "front-end construction tools that can significantly improve the front-end development experience", focusing on the development experience students, Vite can be said to be well-intentioned It’s hard to find ways to reduce the cost of learning and entry. It doesn’t want you to learn a lot of complicated and ethereal concepts in order to use tools. It hopes that these things are blocked at the framework level-although the cost is loss of flexibility.

To put it simply, Vite is positioned as a fool-like but powerful build tool. You can concentrate on writing good business code and get off work early, so you don't have to bother with tools.

2.3 Ecology

In addition to the extreme operating performance and easy usage, Vite's compatibility with existing ecosystems cannot be ignored, which is mainly reflected in two points:

• Decoupled from Vue, compatible with React, Svelte, Preact, Vanilla, etc., which means that Vite can be used in most modern technology stacks
• Plug-in interface very close to Rollup, which means that most of the tools in the Rollup ecosystem that have been repeatedly tempered can be reused

To be honest, these two items are put on the table, coupled with the performance advantages and ultra-low learning costs discussed earlier, I will really not think of the reason for rejection for a while. . .

3. Vite's disadvantages

Vite is still very new. Although it provides a very extreme development experience in theory and somatosensory, there are still some issues worthy of attention.

3.1 Compatibility

By default, both dev and build will directly print the code package of the ESM version, which requires the client browser to have a relatively new version, which is still a bit difficult under the current national conditions.

However, Vite also provides some ways to make up for it, using the build.polyfillDynamicImport configuration item to cooperate with []( https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) \@vitejs/plugin-legacy packs a version that seems to be more compatible. I believe this will gradually be smoothed out over time.

3.2 Lack of Show Case

Vite is too new. It was only recently that the official 2.0 version was released. The community has not reacted too much. Naturally, there are no large and complex commercial landing cases. No one can say how many pits there may be.

However, the good news is that the search interest for Vite in the community has increased dramatically in recent months:

Data from Google Index

I believe there will be a large number of preachers soon, after all, this thing is really competitive.

3.3 Cost

Don't forget that the complexity of engineering itself will not disappear out of thin air. Only the team behind Vite is helping us move forward. For the Vite development team, maintaining so many build rules is not a small burden. From the user's point of view, tools that are easier to use often mean that they are more difficult to customize.

In addition, it is really easy to play in the preset frame of Vite, but as the complexity of the project increases, users will still come into contact with the underlying esbuild or Rollup sooner or later, and the knowledge that senior engineers should supplement sooner or later still has to supplement. Come back, you can't escape.

Three, summary

Vite gave me the biggest inspiration: Webpack is not the standard answer, front-end construction tools can have some new ways to play:

• packaging is not the purpose, running is, in 2021, you can leave it to the browser to do the things that can be done by the browser.
• A flexible framework may mean a gradual out-of-control amount of development for the author; it may mean high learning costs for users, as well as the debate about whether repeated similar spaces are better or tabs. Well, a set of built-in best practices industry, there is not much room for customization, but in some cases, it can improve everyone’s efficiency.

My personal attitude towards Vite: stay on the sidelines in the short-term, and very optimistic in the long-term.

I believe it is a good choice to start learning Vite now. This stuff is packaged too well, and the learning cost is very low (excellent blowing effect). You can write some demos or just use small new projects that are controllable by users. Landing. However, it is recommended not to radically rebuild some existing large-scale projects directly.