微信小程序按需引入 vant 组件，自动清除项目中未使用的 vant 组件

vant-tree-shaking

微信小程序按需引入 vant 组件，自动清除项目中未使用的 vant 组件，减少代码包大小，避免因未使用到的 vant 组件触发隐私协议提交审核时被拒。

在微信小程序项目中使用

项目内安装 (推荐)

1
npm install -D vant-tree-shaking

需要在 package.json 配置文件中配置 script 脚本命令，例如直接配置自定义命令 vant：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "miniapp",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "vant": "vant-tree-shaking"
  },
  "dependencies": {
    "@vant/weapp": "^1.11.5"
  },
  "devDependencies": {
    "vant-tree-shaking": "^1.0.0"
  }
}

在小程序开发者工具中上传小程序代码前，直接在项目根目录终端中运行命令：

1
npm run vant

成功后会在控制台打印出：vant-tree-shaking success

全局安装

1
npm install -g vant-tree-shaking

在小程序开发者工具中上传小程序代码前，直接在项目根目录终端中运行命令：

1
vant-tree-shaking

成功后会在控制台打印出：vant-tree-shaking success

自定义参数

--vantPath
指定自定义的 vant 组件目录，在小程序开发者工具中选用 TS 新建的项目时，实际开发目录会在 miniprogram 之下，部分框架搭建的小程序项目中，可以通过 --vantPath 参数来指定实际的 vant 组件目录：

方式一：配置在 scripts 脚本中 (推荐)

1
2
3
"scripts": {
  "vant": "vant-tree-shaking --vantPath=miniprogram/miniprogram_npm/@vant/weapp"
}

方式二：直接在命令行中指定，注意脚本别名 vant 根据自己的实际设置修改

1
npm run vant -- --vantPath=miniprogram/miniprogram_npm/@vant/weapp

注意事项

  • 本工具只针对 vant 的 1.x 版本，如果你使用的是老的 0.x 版本，建议先升级到最新的 1.x 版本后再使用。

主要解决的问题

  1. 减少代码包大小
    小程序主包有 2M 的限制，如果我们只用到了几个组件，却打包进了整个组件库，不仅不合理，还占用了小程序的包大小。传统的按需引入方法需要手动删除 miniprogram_npm 目录中未使用的组件，然后再打包上传。每次都这么操作容易出错且费时。

    使用 vant-tree-shaking，通过类似 npm run vant 这样的一条命令，1 秒钟就可以删除未使用的多余组件，实现按需引入。

  2. 未使用到的 vant 组件也会触发隐私协议
    除了减少代码包大小外，vant 的部分组件会自动触发小程序的隐私协议。例如上传组件 uploader 中使用的 wx.chooseImage、wx.chooseMedia、wx.chooseVideo 等 API 会自动触发隐私协议授权。

    即使你的项目没有使用这些组件，上传版本时小程序仍会扫描 miniprogram_npm 目录下的所有文件。只要代码中有相关 API 代码，就会认为你使用了这些组件，强制要求你填写并更新隐私协议。随便填写一个通常会被拒，不能填写“项目中暂未使用”，否则会被要求删除相关代码再提审。