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
- The dynamic resolution runtime loads the module
- Load the entire module
commonJS
In a module, you export the entire module - Each module is an object
commonJS
Modules are treated as an object - Copy the value
commonJS
The 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
- As above
- 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
- Static parsing is to determine the output module in the parsing phase, so
es6
The moduleimport
Usually written at the beginning of the incoming file. - Loading is not the whole module in
es6
Modules It is common to see several in a moduleexport
export - Modules are not objects in
es6
Each module is not treated as an object - Module reference
es6
In 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
- Slow server startup and long packaging time
- Slow hot update, update a module, global packaging
- 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 userollup
package
- Lightweight, ESM-based packer
- The packaged bundles are smaller
- In combination with
tree-shaking
, delete unreferenced Dead code
Why do production environments still need to be packaged
- 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 imports
HTTP/2
) - To get the best load performance in a production environment, it is best to keep the code going
tree-shaking
Lazy loading and chunk splitting (for better caching) - 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 useESBuild
Packaging?
- 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
- 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
- Will the original
webpack
Most of the work is left to the browser - use
esbuild
Pre-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
) - Natural support
typescript
- support
less
.sass
And so on, only need to install the corresponding compiler, no need to writeloader
Configuration 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
-
Do you want to use weex syntax to develop?
-
Vite supports WEEx-VUe-loader.
-
How to interact with the App side?
advice
Webpack website
Vite website
A rollup. Js’s official website
Caniuse website
esbuild github