小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议

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

在小程序中使用 vant 组件库主要有以下两种方式:

  • 下载源代码包放入项目中,可以自己删掉没用到的组件,不过后期只能自己手动更新,会不太好维护
  • 通过 npm 的方式安装管理依赖,后期更新可以直接交给 npm 来管理,方便维护
    1.jpg

正常项目中我们可能都会选择 npm 的方式,但是这种方式 vant 和小程序并不支持像我们一般的前端项目中的按需引入,小程序开发工具构建 npm 时会把整个 vant 的组件编译到 miniprogram_npm 目录中,即使我们在项目中没有通过 usingComponents 申明引用的组件也会被打包进代码包中。

减少代码包大小

因为小程序主包有 2M 的限制,如果我们本身只用到了几个组件,最终却打包进了整个组件库,这样不仅不合理也额外占用了咱小程序的包大小。想要按需引入的办法只能自己手动去把 miniprogram_npm 目录中没用到的组件删掉,然后再打包上传。不过每次我们提交版本都要这样去操作的话,不光容易出错也很费时间,这里我们就可以借助 node 和 npm 的 script 脚本来自动处理。

大体思路就是,先直接用 node 去自动扫描读取项目中所有 json 文件 中的 usingComponents,找出项目中实际有用到的 vant 组件,然后再去 miniprogram_npm/@vant/weapp 目录下将没有用到的多余组件删除掉就行了,最后直接把相关代码放到项目中的 script 脚本中操作,这样通过类似 npm run vant 这样一条命令 1 秒钟就可以删除掉未使用到的多余组件,实现了按需引入了。

未使用到的 vant 组件也会触发隐私协议

除了减少代码包大小这一项外,其实还有一个更大的痛点,vant 的部分组件会自动触发小程序的隐私协议,比如上传组件 uploader 中用到的:收集你选中的照片或视频信息(wx.chooseImage、wx.chooseMedia、wx.chooseVideo)、收集你选中的文件(wx.chooseMessageFile),这类 api 会自动触发隐私协议授权。

即使你的项目中压根没使用这类组件,上传版本提审的时候小程序还是会自动扫描你 miniprogram_npm 目录下的所有文件,只要代码中有相关的 api 代码就会认为你用到了,然后霸道地强制要求你填写和更新相关隐私说明,随便瞎填一个 99% 会被拒,也不能填写项目中未使用,这样那你自己说未使用就会让你先去把项目中相关的代码删掉再来提审。

vant-tree-shaking

为了方便使用,脚本代码已经封装成了一个 npm 包 vant-tree-shaking(https://www.npmjs.com/package/vant-tree-shaking )上传到了 npm 公共仓库中,大家可以直接通过 npm 来下载使用:

全局安装

npm install -g vant-tree-shaking

在小程序开发者工具中上传小程序代码前,直接在项目根目录终端中运行命令:vant-tree-shaking,成功后会在控制台打印出:vant-tree-shaking success。

本地安装

npm install -D vant-tree-shaking

需要自己在 package.json 配置文件中配置 script 脚本命令,如直接配置自定义命令 vant:

{
  "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"
  }
}

在小程序开发者工具中上传小程序代码前,直接在项目根目录终端中运行命令:npm run vant,成功后会在控制台打印出:vant-tree-shaking success。

核心代码

主要用到了 node 的 fs、path 这两个模块,来处理文件、目录读取删除和路径的处理,其实也很简单,完整的源码可以参考 github 仓库(https://github.com/cafehaus/vant-tree-shaking ),有什么使用问题或建议也欢迎大家积极反馈。

// 1、扫描项目中的所有 json 文件,找出项目中使用到的所有 vant 组件
function readFile(filePath) {
   
   
  if (!filePath || !fs.existsSync(filePath)) return

  if (fs.statSync(filePath).isDirectory()) {
   
   
    let files = fs.readdirSync(filePath) || []
        files.map(m => {
   
   
      if (!IGNORE_DIRS.includes(m)) {
   
   
        let curPath = path.join(filePath, m)
        readFile(curPath)
      }
        })
  } else {
   
   
    getUsingComponents(filePath, vantSet)
  }
}

// 2、项目中使用到的 vant 组件依赖的其他 vant 组件
function readVantDir() {
   
   
  const files = fs.readdirSync(VANT_PATH) || []
  files.map(m => {
   
   
    if (!COMMON_DIRS.includes(m) && vantSet.has(`van-${
     
     m}`)) {
   
   
      const curPath = path.join(VANT_PATH, m, 'index.json')
      getUsingComponents(curPath, dependentSet)
    }
  })

  // 3、删除未使用到 vant 组件目录
  const usedVant = new Set([...vantSet, ...dependentSet])
  for (let i = files.length - 1; i >= 0; i--) {
   
   
    const cur = files[i]
    if (!COMMON_DIRS.includes(cur) && !usedVant.has(`van-${
     
     cur}`)) {
   
   
      const curPath = path.join(VANT_PATH, cur)
      deleteDir(curPath)
    }
  }
  console.log('vant-tree-shaking success')
}

/**
 * 读取 json 文件中的 usingComponents 属性值
 * @param {*} filePath 路径
 * @param {*} setList 存符合条件的 vant 组件名的列表
 */
function getUsingComponents(filePath, setList) {
   
   
  if (!filePath || !fs.existsSync(filePath) || !isJsonFile(filePath)) return

  try {
   
   
    const data = fs.readFileSync(filePath, 'utf8')
    const json = JSON.parse(data)
    const usingComponents = json.usingComponents || {
   
   }
    for (const key in usingComponents) {
   
   
      if (key.startsWith('van-')) {
   
   
        setList.add(key)
      }
    }
  } catch (err) {
   
   
    console.error(err)
  }
}

1.png

实际测试的一个项目,其中只使用到了 vant 的自定义导航栏 van-nav-bar 组件,没有按需引入时整个代码包大小 544KB,按需引入之后只有 156KB。除了代码包减少了以外,也不用再担心其他未使用到的组件默认触发隐私协议而被拒审了。

相关文章
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
13 5
|
19天前
|
小程序 开发者
注册小程序账号&安装开发者工具
该内容是一份指南,描述了如何注册并激活微信小程序账号的步骤。首先,访问网址后点击“前往注册”。接着,按照提示依次填写个人信息。完成注册后,检查邮件进行激活。选择主体类型为个人,并填写相关主体信息。之后,使用微信扫描二维码验证。成功后,获取小程序的App ID并保存。下载并安装微信开发者工具,扫码登录。最后,通过开发者工具创建新的小程序项目,填写项目信息,包括之前获取的App ID,选择不使用云服务,然后点击新建以开始项目。
22 0
|
23天前
|
消息中间件 小程序 网络性能优化
蓝易云 - 直播小程序源码有用的协议知识:MQTT协
在直播小程序源码中,MQTT协议可以用于实现实时消息推送,如弹幕、聊天消息、礼物信息等。通过使用MQTT协议,可以确保消息的实时性和可靠性,从而提高用户体验。
54 0
|
1月前
|
小程序
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
60 3
|
1月前
|
小程序 开发者
解决微信小程序因为包太大无法上传:uniapp分包
解决微信小程序因为包太大无法上传:uniapp分包
|
缓存 JavaScript 前端开发
NPM:nodejs官方包管理工具的简介、安装、使用方法之详细攻略
NPM:nodejs官方包管理工具的简介、安装、使用方法之详细攻略
NPM:nodejs官方包管理工具的简介、安装、使用方法之详细攻略
|
1月前
|
网络安全 计算机视觉
【node】 npm install 报错:code 128
【node】 npm install 报错:code 128
48 1
|
1月前
|
JavaScript Linux 数据安全/隐私保护
node内网安装npm私服以及依赖包上传发布verdaccio
node内网安装npm私服以及依赖包上传发布verdaccio
175 1
|
1月前
|
JavaScript 内存技术
node与npm版本对应关系以及使用nvm管理node版本
node与npm版本对应关系以及使用nvm管理node版本
880 0
|
1月前
|
JavaScript
npm install没问题,但npm run dev的时候报Node Sass version 6.0.1 is incompatible with ^4.0.0 ^5.0.0
npm install没问题,但npm run dev的时候报Node Sass version 6.0.1 is incompatible with ^4.0.0 ^5.0.0
20 0

推荐镜像

更多