1. Introduction of Vite

1.1 What is Vite

Vite is a front-end build tool for Web development powered by the native ES Module.

In the Development environment based on the browser native ES Module Development, completely skipped the concept of packaging;

Build code in Production based on Rollup packaging.

1.2 Main features of Vite

  • 💡 Fast service startup: Use native ESM files without packaging!
  • ⚡️ Lightweight fast thermal overloading: Module thermal overloading (HMR) that is always extremely fast, regardless of application size
  • 🛠️ Rich features: support TypeScript, JSX, CSS, and so on out of the box.
  • 📦 Optimized build: Optional pre-configured Rollup build in “multi-page application” or “library” mode
  • 🔩 Generic plug-ins: Share the Rollup-superset plug-in interface between development and build.
  • 🔑 Fully typed apis: Flexible apis and full TypeScript types

1.3 Browser Support

  • Development environment: Vite needs to be used in browsers that support dynamic import of native ES modules.
  • In production: Default supported browsers need to support the introduction of native ES modules via script tags. Older browsers can be supported via the official plugin @vitejs/ plugin-Legacy.

2. Advantages of Vite

  • It's very easy to get started
  • High development efficiency
  • Low community cost (compatible with most rollup plugins)

2.1 High development efficiency – 🚀 speed

2.1.1 Compare common Webpack

names Development Environment (Dev) Dev startup duration (20 components) Hot update (HMR) Production environment The Build time
Webpack Bundles are generated and then the development server is started 3124ms HMR requires all compiled modules and dependencies Package to Generate bundle 9125ms
Vite Start the development server, take advantage of the ESM capabilities of the new generation of browsers, request the required modules directly and compile them in real time without packaging 353ms In HMR, the browser only needs to request the module again, and the browser’s cache (source module negotiation cache, relying on module strong cache) is used to optimize the request. This allows HMR to keep up to date quickly regardless of the size of the application. Bundles are generated using the mature rollup packaging tool 4471ms

It’s easy to see why Vite is so much faster than Webpack.

Vite does not need to be packaged for cold startup in the development environment, does not need to analyze dependencies between modules, and does not need to be compiled before starting the development server. It also uses esBuild for pre-build at startup. (The following figure shows the flow chart of development services based on native ESM)

Webpack after the start will do a bunch of things, experienced a long compile packaging chain, starting from the entrance to gradually 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. (The bundle-based development service flow chart is shown below)

Of course, we only compared webPack, which is the most popular and popular front end, to other build tools like Browserify, Gulp, Parcel, Rollup, Snowpack, and so on.

2.2 Extremely easy to get started

2.2.1 Initialization of dumb Commands

Vite requires node.js version >= 12.0.0.

In a nutshell, if you know how to use vue-CLI scaffolding, this Vite build tool can be plugged in almost seamlessly.

 # npm
 npm init vite@latest
 ​
 # yarn
 yarn create vite
 ​
 # pnpm
 pnpm create vite
Copy the code

Done !

Then follow the prompts to select the project you want to create.

2.2.2 Configuration is extremely simple

Compared with Webpack (or vue-CLI based on Webpack), it is necessary to configure entry, loader, plugin and so on. The actual construction work is usually realized by various Webpack Loaders and Plugin.

Vite is pretty simple to use; Simply execute the initialization command, and you get a preset development environment that comes out of the box with a bunch of features including: CSS preprocessing, HTML preprocessing, asynchronous loading, subcontracting, compression, HMR support, default Chunk hash naming, and more.

To put it simply,ViteAs long as you focus on writing business code, then leave work early, don’t work late, and don’t bother with the tools anymore.

2.3 Low community cost

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:

  • With the Vue decouplingReact, Svelte, Preact, Vanilla, etc., which means Vite can be used in most modern technology stacks
  • Plug-in interface that closely resembles RollupThat means you can reuse most of the tools in the Rollup ecosystem that have been honed over and over again

Seriously, with those two on the table, plus the performance benefits and low learning costs discussed earlier, why not?

The last

This series will be a continuous update series, about the whole “Vite from entry to master”, I will mainly from the following picture several aspects, please wait and see!!

Pretty boy pretty girls, all see here, don’t click a “like” and then go 🌹🌹🌹