组件库按需加载原理分析

在使用 vant、element-ui、ant-design 等 UI 组件库时候会用到按需加载，通过 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件可以快速配置好自动按需加载组件，还可以通过直接手动引入对应组件和样式文件的方式来实现。同时，在开发中使用 webpack 构建项目时也常使用懒加载技术，本文所述的组件库动态加载和 webpack 构建项目的懒加载是不同的。本文将以 babel-plugin-import 插件为主，讲解组件库按需加载方案的实现原理。

组件库按需加载： 组件库以组件为基本单位产出 js、css、less 文件，借助插件或者部分引入的写法，使得项目代码或 babel 编译后的代码中只包含使用到的组件的 js、css、less 等。 webpack 懒加载： webpack 将源码中的 import、require 引入的文件编译之后再根据动态加载语法配置（通常以页面路由为基本单位）将较大的代码拆分并构建出较小的 chunk 包，应用在运行时执行到相应业务逻辑时才去加载执行对应 chunk 代码。 webpack 懒加载主要发生在下图的 JS 拆分出不同的 Chunk 这一过程中。 可见，两者的差别主要在于：

组件库按需加载主要目的就是为了减少项目构建打包产物的大小，提高项目线上首屏渲染速度，减少白屏时间，减少流量消耗。

一般组件库会提供一种引入全部组件和 css 文件的写法，例如：

这种写法经过 webpack 构建之后会将组件库产出的 vant.min.js、index.css 引入并打包至构建产物中，而引入的 vant.min.js 文件是包含组件库全部组件的 js 部分，index.css 包含全部组件的 css 部分。因此，这会导致构建打包产物增大。

Vant 官方文档中推荐使用如下两种方式让 Vant 组件库支持按需加载。

手动引入需要使用到的组件以及其对应的样式文件即可，在 webpack 构件时组件库中其他未被引入的文件不会被打包。

安装 babel-plugin-import 插件

修改 babel 插件配置

在项目代码中按需引入要用到的组件

从上文中手动配置按需加载需要用到的组件中就可以看出，所谓的按需加载就如字面意思一样，指的就是按需引入需要的组件，用专业术语来讲就是：在代码中手动引入需要用到的组件。组件其实就是对一堆 js、css 以及 less 等文件的总称，所以上文中需要手动引入组件对应的样式文件 vant/lib/button/style 。

即，本质就是对源代码进行如下转换

转换为

可以想到，如果每次需要用到新的组件都像这样时都同时手动引入 js、css 或 less 文件岂不是很麻烦，所以为了免去引入写法的繁杂，产生了两种方案：引入全部组件和使用插件自动引入。使用插件自动引入就是插件帮我们把引入组件的写法进行了转换，最后转换成了上文中手动加载方式的写法。

上文已经介绍了使用插件自动按需加载的本质，下面开始进一步地分析该插件底层是如何实现的。

该插件核心逻辑可以概括用图示如下 关键过程包括：词法、语法分析，AST 转换，代码生成。

@babel/core （v7 版本之后）读取项目的源码内容，进行词法、语法分析，然后得到抽象语法树 AST，词法、语法分析过程这里不赘述，抽象语法树 AST 可以简单的理解为是一种树状结构的数据用于描述源码的内容。下图为一段 import 导入语句对应的 AST 结构，一个 AST 由多个节点组成，基本的节点结构类似于如下：

源代码和 AST 对应关系见下图：

上文中提到组件按需加载的本质是对源码的 import 导入写法进行转换，babel-plugin-import 插件也是如此，而转换代码这一过程是在 AST 层面进行并非直接操作源代码。

以下面组件引入的代码为例：

对应的 AST 为（点击查看完整 AST） 转换后代码为：

对应 AST 为（点击查看完整 AST） 转换的过程中对 AST 进行了变更：新增加了对样式文件的导入声明——第一个 ImportDeclaration 节点，对第二个 ImportDeclaration 节点的变量描述符 Identifier 进行了更名等。

对 AST 树进行了转换之后需要根据转后的 AST 生成代码，这一过程由 @babel/generator 完成，过程就是深度优先遍历整个 AST，然后构建可以表示转换后代码的字符串。

根据这个 AST 构建出如下代码：

以上用例 demo 可以在这里 github.com/JohnieXu/de… 查看。

babel.config.js、.babelrc 配置文件的 plugins 选项告诉 babel 在编译 js 文件时候需要使用 babel-plugin-import 插件进行处理，同时配置文件中还指定了插件的参数，参数主要包括：

更多配置参数详见 github.com/ant-design/…

一个 babel 插件其实就是一个返回了 Visitor 对象的函数，其大致结构如下

之所以叫做 Visitor 是因为这里采用了一种访问者模式，Visitor 对象上配置的所有成员方法、成员对象都是用于 babel 处理每个 node 节点时的钩子函数。babel-plugin-import 插件中使用到的钩子函数如下所示，后面注释有各个钩子的执行时机。

babel-plugin-import 插件的 Visitor 对象上还配置了 Program 钩子，其结构如下：

Program 钩子是在 babel 处理一个独立文件（或者叫做模块更合适，node 规范定义一个文件就是一个模块）时执行。这里 enter、exit 是钩子函数另一种写法，分别对应进入、退出钩子，每个钩子函数都可以分别指定进入和退出时指定的钩子函数，不按此方式具体指定则默认为 enter 钩子。

这里 Program 在 enter 时执行的逻辑具体为：

这里提到的插件 Plugin 是指的 babel-plugin-import 独立封装的一个类，主要用来定义各个钩子函数的执行逻辑，与 babel 插件的 Visitor 对象对接，区别在于这里的 Plugin 里面封装了一些可复用的工具方法。其核心方法如下：

转换导入语法需要识别 ES6 模块规范的默认导入、部分导入以及整体导入等语法，主要逻辑包括鉴别是否是部分导入，只有部分导入才表示导入具体组件，转换导入变量名等。

上面代码经过转后的代码如下，默认导入、整体导入等导入语句被去掉，转换成了对应组件的部分导入 ，例如： import Vant from 'vant'。

处理逻辑如下：

在上述第 4 步中 importMethod 方法会根据计算出的参数配置添加对样式文件的导入，其源码实现逻辑如下：

核心还是使用 @babel/helper-module-imports 提供的 addSideEffect 方法添加对样式文件的导入。

在上述转换导入语法步骤中，不管是否配置 transformToDefaultImport 来处理 export default ，都会重命名导入模块的变量描述符 Identifier，因此引用了的导入组件对应的变量都得进行转换。

涉及到 Identifier 的钩子主要有：

上述不同的钩子函数中 path.node 对应的属性稍有不同，但是最终都需要转换 Identifier 的 name 属性。

因此，转换变量引用主要逻辑为：

经过上文的讲解，我们清楚了在使用常见 UI 组件库时引入组件库的其中方式以及区别，也了解了如何配置组件库的按需加载，最后还分析了 babel-plugin-import 插件的实现原理，知道了所谓的组件库按需加载是在 babel 编译 js 阶段进行了代码转换。

上文的讲解对 babel 插件原理、AST 抽象语法树的介绍并不充分，主要考虑到这些并非本文的重点，要想更详细了解的话强烈建议前往阅读参考资料里给出的文章。

既然看到这里了不妨点个赞鼓励下作者呗 :)

作者博客：blog.lessing.online/

公众号：【迪诺笔记】

语雀：www.yuque.com/johniexu

Github：github.com/johniexu