preface

Hello everyone, I am Lin Sanxin, with the most easy to understand the most difficult knowledge points is my motto, the basis is advanced premise is my initial mind.

Due to the development of Vue3 + TS + Vite these months, and is really Vite strong fans!! The biggest advantage of Vite is: fast!! Very fast!!

To be honest, after using Vite development, I do not want to go back to the previous Webpack project development, because the previous project to start the project takes more than 30 seconds, modify the code update also needs more than 2 seconds, but now using Vite, almost only need 1 second, and modify the code update is super fast!!

So how did Vite do it so fast? The official explanation, really official. So today I want to talk about it in simple terms, and I hope you can read it once and understand it.

Question the status quo

ES modular support issues

As we all know, previous browsers did not support ES Module, for example:

// 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 
Copy the code

Do you think a piece of code like this can run in a browser? The answer is no. So what’s the solution? This is where the packaging tool comes in. It packs the index.js, Add. js, and sub.js files into a bundle.js file, and then imports bundle.js directly into the project index. HTML to achieve code effect. Some packaging tools do this, such as WebPack, Rollup, and Parcel

Project startup and code update issues

This goes without saying, we all know:

  • Project startup: As projects get bigger, it can take several minutes to start each project
  • Code updates: As the project gets bigger, it takes a few seconds to update a small piece of code after saving it

To solve the problem

Fix slow startup projects

When Vite packages, it divides modules into two regions: dependencies and source code:

  • Rely onThis section uses JavaScript that does not change during development, such as component libraries, or large dependencies (libraries that may have hundreds of modules)esbuildTo carry outPrebuilt dependencies.esbuildWritten using Go, it is 10-100 times faster than a prepacker-built dependency written in JavaScript
  • The source code: General is what kind of good modification probability is relatively large file, for exampleJSX, CSS, VUEThese files need to be transformed and are often modified and edited. Also, these files are not loaded all at once, but can be loaded on demand (e.g. route lazy loading).ViteWill convert the file toes moduleDirectly to the browser, because most browsers today support it directlyes moduleThis improves performance a lot. Why? Let’s take a look at the following two pictures:

Js, add.js, and sub.js. When a project starts, it needs to package all files into a bundle.js file and then import it in HTML.

The second figure is the packaging method of Vite. As mentioned earlier, Vite directly throws the converted JavaScript code of ES Module to the browser that supports ES Module, and lets the browser load the dependency by itself. In other words, it puts the pressure on the browser, so as to achieve the effect of faster project startup.

Fix slow updates

As mentioned earlier, when the project starts, the module is divided into dependencies and source code. When you update the code, the dependencies do not need to be reloaded. You just need to find exactly which source file is updated, and update the corresponding file. This makes updates very fast.

Vite also uses HTTP headers to speed up whole page reloads (again letting the browser do more for us) : requests from source modules are negotiated in the Cache according to 304 Not Modified, while dependent module requests go through cache-control: Max-age =31536000,immutable Strong cache, so once cached they do not need to be requested again.

The production environment

We are talking about the development environment, but also said that Vite is a direct transformation of the ES Module JavaScript, to the browser, the browser based on dependencies, to load their own dependencies.

Then some people would say that in the production environment, can not be packaged, just open a Vite service, anyway, the browser will be based on dependencies to load their own. The answer is no, and why?

  • 1. Your code is hosted on the server, and too many browser load dependencies will definitely result in more network requests
  • 2. To get the best load performance in a production environment, it is best to keep the code goingTree-shaking, lazy loading and chunk splitting, CSS processingThese optimizations operate at presentesbuildNot perfect yet

So the final package of Vite is Rollup

conclusion

I am Lin Sanxin, an enthusiastic front-end novice programmer. If you progress, like the front end, want to learn the front end, then we can make friends, touch fish ha ha, touch fish, point this –> touch fish boiling point