1、微信小程序自带的组件很少，稍微复杂一点的效果和页面布局都做不出来。

2、第三方组件库可以实现复杂的效果和页面布局，但是它们要占用手机空间。而且经常出现的情况是，一个组件库提供了100个组件，我为了使用里面的一个组件，必须把整个库全都引用进来，实际上剩下的99个我完全没用到。

（Java也是一样，Apache Commons StringUtils提供了200多个方法，我们一般只用到一两个，但是整个commons-lang3-3.8.1.jar包肯定要全部引入，不可能说我只引入两个方法。）

3、微信小程序打包后的发布大小不能超过2048KB（2017年初小程序刚推出的时候不能超过1024KB，后来增加到2048KB）。因为小程序占用的空间都会算在微信APP头上，如果每个小程序的体积都无限增大， 微信APP占用巨大的手机空间，会把手机撑爆的。

2048KB，说大不大，毕竟手机上随便一个APP大小都有100多MB，说小又不小，因为这些占用的空间大多都是node_modules安装第三方模块占用的，我做过的项目中自己写的代码和node_modules体积的比例可高达1比500。也就是说，光是小程序本身的代码是不会超过2048KB的，真正占用空间的是第三方模块、第三方组件。我引用了两个组件库之后，小程序的发布大小超过了2700KB。这个时候要怎么减小体积呢？

项目中有SVG，PNG，JPG格式的文件，加起来287KB。一开始我先把图片删了，把这部分空间省下来再说。后面空间够用了，又恢复回去了。

Weui-miniprogram是一个由微信官方团队开发的组件库，但不是小程序开发环境自带的，需要另外引入，类似于Java和Java EE，JQuery和JQuery UI，淘宝和支付宝的关系（淘宝和支付宝都是同一个公司开发的，但是你光安装淘宝，不安装支付宝，你也支付不了）。

小程序开发环境本身不包括它，我们有三种方法可以把它引入到项目中。

这是百度搜到的第一条结果，也是前端安装任何组件所首先想到的方法，用npm install或者yarn add命令安装。这里的命令为：

这样会在node_modules中增加weui-miniprogram，weui-miniprogram/src，weui-miniprogram/miniprogram_dist目录。它们加起来是1.92MB。小程序允许的打包大小是2MB。好家伙，引入你这个组件库，留给我自己的空间只剩0.08MB了。所以肯定不能这样引入。

微信小程序的每个页面固定会有js, json, wxml, wxss四个文件。js是页面逻辑，wxml是HTML，wxss是样式，这三个都很好理解，就是HTML+JS+CSS嘛，连实习生都知道（呃……）。还有一个json是干嘛用的呢？json就是用来引入第三方组件的。在json文件里面定义一个叫做usingComponents的属性，把这个页面要引入的组件写在里面。比如我的json文件可以这样写，

这样就引入了三个组件。然后在wxml文件里面我可以把组件直接当标签写，比如我可以写，

注意我在引入的时候，写了一个项目下的相对路径，也就是说我的小程序项目下面必须有

/miniprogram_npm/weui-miniprogram/miniprogram_dist

这么一个路径。只要使用上面所说的方法进行npm install，把node_modules里面的miniprogram_dist复制过来就行。这个意思相当于你用Maven下载了一个jar包，但是你又不想用Maven管理依赖，于是你把jar包拷到项目目录里面，手工添加依赖，摆脱Maven（NPM）这个麻烦的东西。

用node_modules安装的时候，组件库有src和dist两个目录，src里面的全部是ts（TypeScript）文件，dist里面的全部是js文件。ts和js文件的关系相当于java和class文件的关系，java文件要编译成class文件才能运行。对于小程序打包和运行来说，ts文件是源码，运行不了，是没有用处的。所以我们把整个src目录都删掉，只保留dist目录，也就是名为miniprogram_dist的目录。这样占用的空间是：505KB。

腾讯的官方文档说，通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。也就是说505KB的空间都可以完全节省下来。

具体写法是在小程序根目录的app.json文件中，加上这段属性，

用这种方式引入的组件库只有kbone和weui两种，别的库都不行。这个道理类似于Windows自带.NET Framework，但是不会自带别的乱七八糟的DLL吧。

这样引入了以后，在单个json里面不需要再写usingComponents，小程序项目目录下也不需要包含Weui组件库的任何文件，即weui-miniprogram、miniprogram_dist目录都可以删掉。

这里最坑的一点是，在组件库的GitHub官网上，没有提到useExtendedLib这种引入方法。可见同一款软件如果有两个官网（腾讯的开发者文档，GitHub项目首页），那么其中任何一个官网都不应该相信，两个都是Fake News。他们编写文档的人肯定是这样想的，“我已经把这个事情写在官网上了，别人看不到我也没办法了。什么？还有另一个官网？？ 我去……”。

上文介绍了Weui组件库的三种引入方法。除了Weui之外，还有一个著名的微信小程序组件库叫做Vant。Vant是有赞前端团队维护的基于Vue 2.0的组件库（不对，其实Vant是韩国的一个彩妆品牌）。上面说组件库有3种引入方法，第3种只适用于kbone和weui，所以到了Vant这里，有2种引入方法。

还来npm install？还没被node_modules坑够吗？不用试都知道，只要带上node_modules这个玩意，肯定要占用很大的空间。

事实上我们不仅不采用npm install，甚至npm的那个标志性配置文件package.json，我们项目里压根就没有。这相当于一个Java项目没有pom.xml，气死Maven和NPM的创始人。“没有NPM，我也过得很好。”

看来只剩下唯一的一个选择 —— json引入了。和上文说的方法一样，在页面的json文件中这样写，

并且把Vant组件库的dist目录复制到json文件所指定的路径下即可。

然后就可以直接把组件当成标签用了。

再强调一遍，这个方法的核心思想是，我们依赖了第三方库，但我们不采用NPM管理依赖。我们是把库文件直接放在项目目录下面，直接引用到那个路径，就像以前直接把jquery.js放在项目目录下直接引入一样。这样可以完全避开NPM以及node_modules这两个麻烦的东西。

Vant组件库光是dist目录，不包括源码的话，大小是344KB，而上面的Weui组件库我们已经让它不占用空间了，这样我们的整个小程序打包可以很轻松控制在2048KB以内。