Last year, when vue3 was released, I was intrigued by the description of the accompanying packaging tool vite. Actually running, the project build speed is not much different from Webpack, but the development hot update speed is really fast flying!

Vite is French for quick

1. Definition of Vite:

A lighter, faster Web application development tool for modern browsers, based on the ECMAScript standard native module system (ES Modules) implementation.

Mainstream browsers (except IE11) all support it. Its biggest feature is to import and export modules in the way of export import on the browser side, set type=”module” in the script tag, and then use the module content. (Note: Credit: caniuse.com)

<script type="module">Import {contant} from './contant.js'</script>
Copy the code

Vite vs. Webpack

If the application is too complex, the development process using Webpack can cause the following problems

  1. The cold startup of Webpack Dev Server takes a long time
  2. Webpack HMR is slow to respond to hot updates

The characteristics of vite

  1. lightweight
  2. According to the need to pack
  3. HMR (Hot render dependency)

Webpack Dev Server needs to be built at startup, which takes a lot of time

Vite is different in that when executing Vite Serve, the Web Server is directly started internally, and all the code files are not compiled first.

But what tools like Webpack do is compile all modules ahead of time and pack them into bundles. In other words, modules are compiled and packed into bundles regardless of whether they will be executed or not. As the project gets bigger and the packaged bundles get bigger, the packaging speed naturally gets slower and slower.

Vite installation

//yarn
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

//npm
$ npm init vite-app <project-name> 
$ cd <project-name> 
$ npm install 
$ npm run dev
Copy the code

After initialization, the Vite project structure is as follows

|____node_modules 
|____App. | vue / / application entry____| / index.html page entry____Vite. Config. | js / / configuration file____package.json
Copy the code

Node_modules has a package named. Vite_opt_cache into which used dependencies are backed up on the first cold boot (NPM run dev)

For example, if only Vue is used for initialization, the current package will have vue.js

Package problem (Vite Build)

Webpack

Does WebPack need to pack bundles of bundle.js in large volumes compared to Vite? The main reasons for the packaging requirement were:

  1. The browser environment does not support modularity
  2. Fragmented module files will generate a large number of HTTP requests (a large number of requests will cause concurrent requests for resources on the browser side)
Vite

The packaging principle of Vite is based on Dynamic Imports, a new feature of ES, which will inevitably have compatibility problems with old browsers. Polyfill is familiar with Big Sword.

Compile the Typescript

Vite cites EsBuild’s support for TS, JSX and other languages via GO, which can compile hundreds of TS files dozens of times faster than TSC (I’m too lazy to actually test it)

Reading extension

The difference is between HTTP1.1 and HTTP2

http2.akamai.com/demo

See these two articles for a full explanation of HTTP2

HTTP/2 and HTTP/3

HTTP/1.1 vs HTTP/2: What’s the Difference?

If you see here, if my article is helpful to you, welcomecoingive a like

(Written in 2020-10-1 and recently compiled from Evernote)