“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

What is Vite

In April 2020, You sent out this tweet:

Then, in February 2021, came Vite 2.0, a one-two punch:

• Esbuild-based extreme development experience
• Multi-framework support
• Compatibility with Rollup’s plugin mechanism and API
• SSR support
• Older browser support

From Grunt, Gulp, Webpack, Rollup, Snowpack, and several other well-known build frameworks, I said no at first. Then I tried it and, well, it really smells good!

Two, Vite advantages

2.1 Really fast

Vite is very, very fast compared to VUe-CLI (based on Webpack) :

	Dev Startup duration	Dev page loading speed	The Build time
Vue-cli	2568ms	320ms	5.14 s
Vite	232ms	379ms	2.39 s

Example code: Vue3 project, 10 components

The test dev command takes ten times more time to run, and theoretically, the bigger the project, the bigger the performance difference. Why? The biggest reason is that Vite doesn’t do much packaging in development mode!

Webpack starts to do a bunch of things, experienced a long compile packaging chain, starting from the entrance to the need to experience syntax parsing, depend on the collection, the code translation, packaging, merger, code optimization, will eventually build high version, discrete source packaged into low version, high compatibility of the product code, it is filled with CPU, IO operations, Performance is bound to be problematic while Node is running.

When Vite runs the Dev command, it does two things: first, it starts a service to host the resource service; The second is to use esbuild to pre-build NPM dependencies. It then sits there until the browser sends an ESM specification module request over HTTP, and Vite starts “compiling” the requested module on demand.

The Vite presupposition is:

• Most modern browsers already support the ESM specification natively, and build tools — especially in development environments — don’t need to spend a lot of time compiling and packaging for low-level compatibility.

In contrast, Webpack does everything, and the browser just runs the compiled lower version (ES5) code; Vite handles only part of the problem, leaving the rest to the browser, which is damn fast.

In addition to skipping compilations during startup, there are a number of performance optimizations worth mentioning in Vite.

• Precompile: Modules that don’t change much, such as NPM packages, are packaged in the prebuild phase using Esbuild to reduce HTTP requests
• Compilation on demand: Modules that change frequently, such as user code, are not compiled until they are used
• Client strong caching: requested modules are returned with HTTP headersmax-age=31536000,immutableSet to strong caching and invalidate modules with additional version Query if they change
• Product optimization: Compared to Webpack, Vite directly anchors the older version of the browser and does not need to insert as much runtime template code into the build build
• Better subcontracting implementation built in: no user intervention is required, and a set of smart subcontracting rules are enabled by default to minimize duplicate packaging of modules
• Better handling of static resources: Vite avoids handling static resources directly, opting instead to follow the ESM approach to providing services such as importing imagesimport img from 'xxx.png'Statement, after executionimgA variable is just a path string.

It can be seen that Vite’s fast is all-round, from Dev to Build, from NPM package to project source code, and then to static resource processing under the ESM rule framework to achieve a variety of optimization measures as far as possible, the theoretical performance is dramatically improved.

2.2 simple

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

yarn create @vitejs/app my-vue-app --template vue
Copy the code

Vite immediately gives you a bunch of features, including CSS preprocessor, HTML preprocessor, Hash naming, asynchronous loading, subcontracting, compression, HMR, etc. :

These features are preset by the authors according to industry best practices, and usually require no user intervention to make changes.

Vite’s performance is reminiscent of vue-CLI, but there are significant differences: Vue-cli relies on Webpack. The actual construction work is usually implemented by various Webpack Loaders and plugins. For example, less => CSS is implemented by less-Loader. Image loading by img-loader implementation. The design is flexible, and you can make any change you can think of within the Webpack system with just a little Webpack knowledge, including hundreds of configuration items, thousands of plug-ins, and a few silly building concepts.

Vite is very simple. It exposes very few configuration items and plugin interfaces, and is not designed to allow you to do much customization… That’s because Vite was never intended to be another Webpack, but rather a set of “front-end build tools that significantly enhance the front-end development experience.” It’s all about the experience. It doesn’t want you to learn a bunch of complex, ethereal concepts in order to use the tools, and it wants those things to be hidden at the framework level — albeit at the expense of flexibility.

In short, Vite positioning is a foolproof but powerful build tool that lets you focus on writing business code, leave work early, and stop worrying about the tools.

2.3 the ecological

In addition to the extreme performance and easy to use, the compatibility of Vite to the existing ecosystem should not be ignored, mainly reflected in two points:

• Decoupled from Vue and compatible with React, Svelte, Preact, Vanilla, etc., this means Vite can be used in most modern technology stacks
• A plug-in interface that is extremely close to Rollup means that you can reuse most of the tools in the Rollup ecosystem that have been honed and honed

Seriously, with these two on the table, plus the performance benefits and low learning costs discussed above, it’s hard to see why not…

3. Disadvantages of Vite

Vite is still very new, and while it offers a very sophisticated development experience both in theory and motion, there are a few concerns.

3.1 compatibility

By default, both dev and Build will print the ESM version of the code package directly, which requires the client browser to have a relatively new version, which is a bit difficult nowadays.

But Vite also provides some methods to compensate for using build. PolyfillDynamicImport configuration items with @ vitejs/plugin – legacy compatibility pack out a look better version, I believe it will be erased slowly over time.

3.2 Lack of Show Case

Vite is so new that it has only recently been released as version 2.0, and the community has yet to react, so there are no big, complex commercial cases, and it’s anyone’s guess how many pitfalls there might be.

The good news is that the community’s search for Vite has grown dramatically in recent months:

The data comes from the Google Index

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

3.3 the price

Don’t forget that the complexity of engineering itself doesn’t go away, it’s the team behind Vite that carries the load, and it’s a burden for the Vite development team to maintain so many build rules. From a user’s perspective, tools that are easier to use tend to be harder to customize.

In addition, it’s easy to just play inside the pre-set bezel of Vite, but as the complexity of the project increases, the user will have to touch the underlying ESbuild or Rollup sooner or later.

Third, summary

The biggest takeaway from Vite: Webpack is not the standard answer, and front-end build tools can have some new gameplay:

• Packaging is not the goal, running is. In 2021, leave it to the browser to do what it can
• A flexible framework, for the author, can mean a spiraling out of control amount of development; This can mean high learning costs for users, as well as repeated arguments about whether Spaces are better than tabs. Well, a set of tools built into a variety of industry best practices without much room for customization can, in some cases, make everyone more productive

My personal attitude to Vite: stay on the sidelines in the short term, very bullish in the long term.

I believe it’s a good time to start learning Vite. It’s packaged so well, it’s cheap to learn, you can write a Demo or just start a small new project that can be controlled by your users. However, the suggestion is not radical direct reconstruction of some of the existing large projects, do not bury their own pit, early work is not sweet.