组件库

组件库按需加载原理

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

目前按需加载有两种方式实现。

1. 手动加载

以 vant 为例子：

import Button from "vant/lib/button";
import "vant/lib/button/style";

2. 自动加载：

（1） 使用 babel-plugin-import 插件来自动按需引入

babel-plugin-import 是 ant-design 团队出的一个 babel 插件，主要用于模块的按需加载。其原理就是将直接引入的方式通过 babel 转化成按需引入的方式。如果 css 也需要按需加载，也会注入 css 引用代码。

babel-plugin-import 插件的核心原理如图：

参数主要包括：

{
  "libraryName": "vant", // 组件库名称，对应 import 语法中的包名
  "libraryDirectory": "lib", // 编译之后各个组件单元所在文件夹名称
  "style": true, // 是否引入组件对应样式文件，也可以传入 less 来引入 less 文件
  "styleLibraryDirectory": "", // 编译之后引入的组件样式文件所在文件夹名称
  "camel2DashComponentName": false, // 是否将驼峰命名的导入变量转换为对应的横线连接命名的文件名
  "customName": (name, file) => { return `vant/lib/${name}` }, // 自定义编译之后引入的组件名
  "customStyleName": (name, file) => { return `vant/lib/css/${name}` }, // 自定义编译之后引入样式文件的名称
}

（2） 提供 es module 版本，开启 tree shaking

这个方法只针对于 js， 对于样式的按需加载仍需要手动引入。 当然 babel-plugin-import 和 tree shaking 也可以并存使用。但大部分情况并存使用与单独使用体积差距不是很大。

Webpack 怎么知道有没有 ES module 或 CommonJS module，其实通过组件库 package.json 中相关字段判断出来的：

CommonJS module：package.json 的 main:"lib/index.js"

ES module：package.json 的 module:"es/index.js"

组件升级

---

参考：组件库按需加载原理分析 (opens new window)