Why is Vite fast? Where are you soon? Tell me about my own understanding

Preface

Hello, everyone, I’m Lin Sanxin, 161bbef2df238e uses the most easy-to-understand words to is my motto, is the prerequisite for advanced is my original intention.

Because of the use of Vue3 + TS + Vite for development in the past few months, and it is really strongly attracted Vite ! ! The biggest advantage of Vite is: fast! ! ! very fast! ! !

To be honest, Vite development, I don’t want to go back to the previous Webpack project development, because the previous project start-up project requires 30s , modify the code update also need 2s , but now using Vite , almost start the project only need 1s , And the code update is super fast! ! !

So why Vite be so fast? The official explanation is really official. . So today I want to speak in a relatively easy-to-understand language. I hope you can understand it after reading it.

Problem status

ES modular support issues

As we all know, the previous browsers did not support ES module , such as:

// index.js

import { add } from './add.js'
import { sub } from './sub.js'
console.log(add(1, 2))
console.log(sub(1, 2))

// add.js
export const add = (a, b) => a + b 

// sub.js
export const sub = (a, b) => a - b 

Do you think such a piece of code can be run directly in the browser? The answer is no. How to solve it? At this time, the packaging tool came out. He index.js、add.js、sub.js the three files bundle.js into a 061bbef2df250f file, and then directly introduced bundle.js index.html to achieve the code effect. Some packaging tools do this, such as webpack、Rollup、Parcel

Project startup and code update issues

Needless to say, everyone knows:

• Project initiation: As the project gets bigger and bigger, it may take a few minutes to start a project
• Code update: As the project becomes larger and larger, modify a small piece of code and wait a few seconds before updating after saving

Solve the problem

Solve the slow startup project

Vite is packaged, the module is divided into two areas: dependency and source code:

• dependency: generally the kind of JavaScript that will not change during development, such as component libraries, or some larger dependencies (libraries that may have hundreds of modules), this part uses esbuild for pre-build dependencies, and esbuild It is written in Go, which is 10-100 times faster than the packager pre-built dependency written in JavaScript
• Source code of : Generally, it is a file with a JSX、CSS、vue chance of modification, such as 061bbef2df3344 which needs to be converted and is often modified and edited. At the same time, these files are not all loaded in one brain, but can be loaded on demand (for example, routing lazy loading). Vite will convert the file es module , because most of the current browsers directly support es module , which improves the performance a lot. Why? Let's look at the following two pictures:

The first picture is the previous packaging mode, just like the previous example of index.js、add.js、sub.js . When the project starts, all files need to be packaged into a file bundle.js , and then html , this multi-file -> bundle.js The process is very time consuming.

The second map, is Vite packaged the way, just to say, Vite is directly converted es module JavaScript code, throw support es module browser, allow your browser to load their own dependence, that is, the pressure lost Give the browser, so as to achieve the effect of fast project startup.

Solve the slow update

As I just said, when the project is started, the module is divided into the dependency and the source code. When you update the code, the dependency does not need to be reloaded. You only need to find out which 161bbef2df34a0 source file is updated, and update the corresponding file. That's it. Doing so makes the update speed very fast.

Vite also uses the HTTP header to speed up the reloading of the entire page (again let the browser do more for us): the request of the source module will 304 Not Modified , and the request of the dependent module will be strongly cached Cache-Control: max-age=31536000,immutable They will not need to be requested again if they are cached.

Production Environment

We just talked about the development environment, and we also said that Vite directly throws the converted es module to the browser, so that the browser loads the dependencies by itself based on the dependencies.

Then someone will say, when it is put in the production environment, is it possible to open a Vite service without packaging, anyway, the browser will load the dependencies according to the dependencies. The answer is no, why:

• 1. Your code is placed on the server, too much browser loading dependency will definitely cause more network requests
• 2. In order to obtain the best loading performance in a production environment, it is best to perform tree-shaking, lazy loading and chunk segmentation, and CSS processing. These optimization operations are currently not perfect in esbuild

So Vite final package is the use of Rollup

Concluding remarks

I am Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends and fish together haha, fish school