uni-app（微信小程序）+ VChart 踩坑记录

March 14, 2025

背景

项目需求是在一个 UniApp 开发的微信小程序中添加仪表盘展示得分。项目之前未集成图表功能，因此需要先进行技术选型。最初考虑 ECharts，查看官网仪表盘示例后，样式不太满意。后来看到字节的 VChart，仪表盘设计更符合预期，决定使用它。

引入 VChart

根据 VChart 微信小程序文档 说明：

微信小程序限制代码包不超过 2MB，而 VChart 当前微信小程序产物已达 1.82MB。文档建议手动引入构建产物以控制包体积。

第一步是手动引入 VChart 并封装自定义组件。文档推荐复制 wx-example 中的 chart 文件夹，将 chart/vchart/index.js 替换为自定义构建产物。由于项目使用 UniApp，查阅 UniApp 自定义组件文档，得知 UniApp 支持小程序自定义组件，微信小程序需放在 wxcomponents 目录下。于是新建该目录，复制 chart 文件夹，准备替换构建产物。

通过 VChart 在线定制，选择仪表盘，环境为微信小程序，打包格式可选 iife、esm 和 cjs，默认 iife。替换后运行报错：

TypeError: Cannot read property 'setEnv' of undefined

调试发现，定制构建产物未正确导出 vglobal 对象。调整导入方式后解决：

CJS：

const VChart = require("./vchart/index").VChart;
const vglobal = VChart.vglobal;

ESM（UniApp 使用 Vite 构建，支持 ESM）：

import * as VChartModule from "./vchart/index";
const VChart = VChartModule.VChart || VChartModule.default;
const vglobal = VChart.vglobal;

过程中顺便复习了模块化知识（IIFE、CJS、ESM）。

部署小程序

引入 VChart 后配置仪表盘，发现无初始动画，用官方的默认构建产物也同样没有动画。暂时搁置这个问题，先完成功能再说。于是提交代码部署，却遇到报错：

CodeError: Error: {"errCode":-1,"errMsg":"inner upload fail with errcode: 80200, errmsg: main package source size 2393KB exceed max limit 2048KB"}

主包大小 2393KB，超出 2MB 限制。检查发现 VChart 构建产物占 1.8MB。尝试分包，但 UniApp 对自定义组件目录有要求，分包不可行。压缩 VChart 产物也无明显效果。在 GitHub 上未找到 UniApp 相关解决方案。

分析 VChart 默认构建包（含折线图、柱状图等），体积仍有 1.3MB。转而测试 ECharts 定制仪表盘产物，仅 478KB。用 ECharts 实现最小 Demo，动画正常，主包体积符合要求，最终完成需求。

收获与总结

  1. 复习了模块化知识：IIFE、CJS 和 ESM 的区别与应用。
  2. 理解了 UniApp 与微信小程序自定义组件的目录要求和机制。
  3. 技术选型时需先评估包体积对小程序的影响，再进行开发。
  4. 业务开发中，优先选择成熟库可减少问题。
back