# 按需加载

考虑到小程序对体积大小的限制，而且开发者在使用组件库的时候并不会使用到全部组件，如果全部组件都打包上去，会增大项目的体积，对开发者来说是一个很不友好的事情。所以我们需要过滤掉没有使用到的组件，就是实现按需加载。常见的按需加载方式就是开发者使用到那个组件就把该组件拷贝复制到项目中，但是我们并不推荐这种做法，因为组件内部可能还会使用到其他组件，这时候你需要把使用到的组件也同样拷贝过来，这样无形中就会增大工作量。所以我们编写了一个node脚本，用来实现按需加载。开发者使用npm安装或者通过 git 下载安装组件库后，通过开发者工具在上传前的钩子函数，运行我们的编写的node脚本文件，即可实现按需加载

# 实现原理

读取项目根目录下的app.json文件，通过pages字段得到所有注册的页面，通过usingComponents字段可以得到所有全局注册的组件
读取每一个页面的.json文件，通过usingComponents字段可得到页面所使用到的组件
将全局注册的组件和页面注册的组件进行去重合并，得到一个新的集合
通过读取去重合并后的组件集合，读取每个组件的.json文件，然后递归获取每个组件内部使用的组件
这个时候，就可以获取到每个页面中所使用到的组件和组件内部所使用到的组件
通过开发者指定目录的lin-wx-ui组件进行差集对比，拿到所有没有使用到的组件
把没使用到的组件写进project.config.json文件的packOptions字段中ignore字段
按需加载结束

# 使用

在项目根目录下新建一个 lin-wx-ui.config.json 文件，通过 lib 字段指定 lin-wx-ui 组件的存放目录
```
{
  "lib": "path/to/dist"
}
```
在微信开发者工具配置文件 project.config.json 文件里写入以下代码：
```
"scripts": {
  "beforeUpload": "node path/to/dist/common/load.js"
}
```

到此已经完成了按需加载功能，在每次上传之前会触发 按需加载 功能，无用的组件将不会被上传

← 安装快速上手 →