It can be divided into two levels, front-end development tool and construction tool, indicating that Vite has the ultimate experience improvement in the development process and construction project

1 ESM (ECMAScript Module)

CommonJs community specification

Prior to ES6, server-side specifications

// CommonJS module, loaded at runtime
let { stat, exists, readfile } = require('fs')
Copy the code

It has the following characteristics

  1. The dynamic resolution runtime loads the module
  2. Load the entire modulecommonJSIn a module, you export the entire module
  3. Each module is an objectcommonJSModules are treated as an object
  4. Copy the valuecommonJSThe output of the module is similar to the value pass of the function, which is a copy of the value

AMD, UMD community specifications

Before ES6, the client specification

  1. As above
  2. Asynchronous loading

ES Module official specification

After the ES6

// ES6 module, loaded at compile time
import { stat, exists, readFile } from 'fs';
Copy the code

It has the following characteristics

  1. Static parsing is to determine the output module in the parsing phase, soes6The moduleimportUsually written at the beginning of the incoming file.
  2. Loading is not the whole module ines6Modules It is common to see several in a moduleexportexport
  3. Modules are not objects ines6Each module is not treated as an object
  4. Module referencees6In a module, you export not a copy of the module’s value, but a reference to the module

How does the browser load the ESM

<! -- ES6 module -->
<script type="module" src="./entry.js"></script>
Copy the code

The browser also loads the ESM using the

ESM compatibility in browsers

2 Why use Vite

  1. Slow server startup and long packaging time
  2. Slow hot update, update a module, global packaging
  3. Slow build process

3 Use Vite in the development environment

Quick cold start

Webpack: It is packaged, the bundle is generated, and the local server is started

Vite: Start the local server first, no packaging, no compilation, Vite uses esbuild pre-build dependencies. Esbuild is written using Go and is 10-100 times faster than a prepacker-built dependency written in JavaScript.

According to the need to compile

Access entry: loads the corresponding module dependencies according to the HTTP request path. Only the accessed resources and module dependencies are compiled. Files that cannot be recognized by the browser such as VUE are compiled into ESM and returned to the browser

Thermal overload (HMR)

Webpack: Once saved, it must be packaged, a new bundle is generated, and then the local server is started. As the complexity of the project increases, the packaging time increases, and it takes a long time to wait for hot reloading

Vite: Caches loaded modules, accurately compiles modified vUE and other files that cannot be recognized by the browser into ESM, millisecond update, regardless of the size of the project

4 Use Vite in the production environment

Why userolluppackage

  1. Lightweight, ESM-based packer
  2. The packaged bundles are smaller
  3. In combination withtree-shaking, delete unreferenced Dead code

Why do production environments still need to be packaged

  1. Although native ESMs are now widely supported, it is still inefficient to publish unpackaged ESMs in a production environment (even if used) due to the additional network round-trips caused by nested importsHTTP/2)
  2. To get the best load performance in a production environment, it is best to keep the code goingtree-shakingLazy loading and chunk splitting (for better caching)
  3. Ensuring optimal output and consistent behavior between development servers and production builds is not easy. So Vite comes with a set of buildoptimized build commands, right out of the box

Why not useESBuildPackaging?

  1. While EsBuild is astonishingly fast and already a great tool for building libraries, some important features for building applications are still under development — particularly code splitting and CSS handling
  2. For now, Rollup is more mature and flexible when it comes to application packaging. The use of ESBuild as a production builder is not ruled out in the future

5 develop

features

  1. Will the originalwebpackMost of the work is left to the browser
  2. useesbuildPre-built, CommonJS/UMD converted to ESM format, and Vite converted ESM dependencies that had many internal modules into a single module to improve subsequent page loading performance (eg:lodash-es)
  3. Natural supporttypescript
  4. supportless.sassAnd so on, only need to install the corresponding compiler, no need to writeloaderConfiguration etc.

The ESM and Tree – shaking

ESM static parsing, tree-shaking, Dead code removal

Production Environment Compatibility

Build packages for production environments assume that the target browser supports modern JavaScript syntax, and by default, vite’s target browser is one that supports native ESM Script tags and supports native ESM dynamic imports

Traditional browsers can support this through the @vitejs/ plugin-Legacy plugin, which automatically generates the traditional version of chunk and its corresponding ES language feature polyfill. The compatible version of Chunk will only be loaded on demand in browsers that do not support native ESM

Vite and Weex possibilities

  1. Do you want to use weex syntax to develop?

  2. Vite supports WEEx-VUe-loader.

  3. How to interact with the App side?

advice

Webpack website

Vite website

A rollup. Js’s official website

Caniuse website

esbuild github