Principle:

  • Import and package on demand using babel-plugin-Component.
  • Configure WebPack as multiple entries to ensure that the directory structure of the final package conforms to the requirements of the babel-plugin-Component plug-in for on-demand loading.

On-demand awareness:

In the actual bable process, the current code is deleted directly, and the referenced methods and components are referenced after traversing the AST abstract syntax tree.

babel

Babel profile

Babel is a general-purpose, multipurpose JavaScript compiler, but unlike a normal compiler it simply converts higher-version rules of the same language into lower-version rules, rather than printing another code that low-level machines can read, and can be used for different forms of static analysis depending on different extensions. (Static analysis: The process of analyzing and processing code without the need to execute it. It is mainly used for syntax checking, compilation, code highlighting, code conversion, optimization, compression, etc.)

The three stages of Babel translation
  • Parsing the Parse

Parsing code to produce abstract syntax trees (AST) is how computers understand our code. Babel is implemented through Babylon. In simple terms, it is a compilation process for JS code, a process of lexical analysis and grammar analysis.

  • Transformation Transform

To perform a series of transformations on the AST, Babel receives the AST and traverses it with babel-traverse, adding, updating, and removing the AST.

  • Generate the Generate

The transformed AST is then converted into JS code using the module babel-Generator.

⚠️ : Babel just translates the syntax introduced by the new standard, such as ES6 arrow functions: while the new standard introduces new native objects, some new prototype methods for native objects, new apis (Proxy, Set, etc.), these things cannot be translated, need to introduce the corresponding polyfill to solve.

babel-plugin-component.js

The main function is to intercept each node as the Bable traverses the AST syntax tree. There are many AST nodes used by it, but the key ones are ImportDeclaration, CallExpression, MemberExpression and AssignmentExpression.

Importationimport declares an expression to determine the package introduced. The member variable introduced by element-UI is cached, and then the node is removed. Such as:

import { Button } from 'element-ui';
Copy the code

CallExpression function calls expressions. When a function or method is called, it intercepts the function or parameter name. When the function or parameter name is a member variable cached with import, it calls the importMethod method to replace the AST of the function or parameter. For example, Button in the following code will be replaced:

Vue.use(Button)
Copy the code

MemberExpression: intercepts the package name of the cached Element-UI in the object member variable expression. If so, call importMethod to replace AST. For example, the following service will be replaced:

Vue.prototype.$loading = Loading.service
Copy the code

$loading = loading. service AssignmentExpression node ($loading = loading. service) The assigned character is intercepted for an AST replacement.

ImportMethod generates the element-ui/lib/xxx.js path to find the module’s individual files, and then replaces the AST with the addDefault method, For CSS files, use element-ui/lib/theme-chalk/xxx. CSS and replace AST with addSideEffect. The alternate path here is the path of the single component generated by the multi-entry file packaging.

Finally, complete changes to the AST are completed. That is, load the specified component or method on demand.