Some insights from Vite

What is a Vite?

Vite is a browser native ES Modules development server. Using the browser to parse the module, compiling and returning it on demand on the server side, bypassing the concept of packaging completely and allowing the server to be used on demand. Not only does it have Vue file support, it also handles hot updates, and the speed of hot updates does not slow down with the increase of modules.

It has the following features: 1. Lightning cold service startup (i.e. input startup command, such as NPM run dev starts quickly) 2. Instant hot update HRM (such as webpack-dev-server implementation module hot update) 3

webpack

Webpack packs all resources (including Javascript, images, fonts, CSS, etc.) into dependencies, such as a.js and B.js in main.js

// a.js
const a = () = > { return 10 }
export { a }

// b.js
const b = () = > { return 20 }
export { b }
// c.js
import { a } from './a'
import { b } from './b'

const c = return a() + b()
export { c }
Copy the code

It is processed by Webpack and packaged to generate bundle.js

// bundle.js
const a = 10;
const b = 20;
const c = return a + b;
export { c };

Copy the code

As you can see, module C in bundle.js relies on the return values of modules A and B to calculate the correct result, so if module A code is changed, such as a = 30, then Webpack will repackage all the modules that depend on bundle.js to generate a new bundle

// Generate new bundle.js after changing module A
// bundle.js
const a = 30;
const b = 20;
const c = return a + b;
export { c };
Copy the code

** Summary: ** If you modify a submodule in the Bundle module, the entire bundle file is repackaged and exported. As the project grows, the entire bundle depends on more submodules, and more resources need to be packaged, and the packaging time becomes longer and longer.

vite

Vite use the browser support ES Moudle, encounter code in the import xx from “XXXXXXX “, directly to find the corresponding resource, find the direct import is done. For example, the code has

// a.js
const a = () = > { return 10 }
export { a }

// b.js
const b = () = > { return 20 }
export { b }
// c.js
import { a } from './a'
import { b } from './b'

const c = return a() + b()
export { c }
Copy the code

Use:



Open the console and you can see that modules A, B and C have all been requested and loaded!

Let’s see what hot updates look like when you change code.

The following only changes the code in module A



As you can see, module B is not updated, only the module C and vue files that depend on MODULE A are updated. (Note that if module C is not used in the code, the code that changes module A and B will not be loaded on the consoleAccording to the need to introduce)

/ / script import
<script type="module" src="index.js"></script>

/ / the import import
import Vue from 'vue'

/ / export export
export default str => str.toUpperCase()
export {a, b, c}
Copy the code

As in the Vite project:

When the service starts, Vite listens for the file that is currently imported. Hot update means that when the file is changed, Vite determines which file is changed, uses the corresponding plugin to recompile the file, and then returns it to the browser. It also timestamps the file to prevent the browser from not updating the file due to caching. If you change the code in helloWorld.vue, webSocker sends a command to Vite to perform different update operations.

What’s new with Vite?

Vitejs. dev/ from V1 to the new version, the most obvious is that vue is removed as a plugin, and Vite is really a compiler packaging tool, you can choose to support the framework or single file when creating

// Create a project
npm init @vitejs/app
Copy the code

Select a VUE project and find one more in the root directoryvite.config.jsFiles, which is also a big part of this update, for example for packaging, sourceMap, Server are easy to configure.details