必须将static目录中的大图、视频、字体及第三方js库移至cdn按需加载,因微信小程序主包硬性限制2mb;图片需配置业务域名、编码参数并替换为完整https url,字体用@font-face引用cdn,第三方sdk动态引入,禁用外链页面逻辑与组件。

uni-app 小程序包体积超 2MB 怎么办
直接结论:不能只靠删代码,得把 static 目录里那些大图、视频、字体、第三方 JS 库挪到 CDN,让小程序运行时按需加载。微信小程序主包强制限制 2MB(含所有 pages、components、static),超出就无法上传。
哪些资源必须外链化
不是所有文件都适合搬走——得看加载时机和使用方式:
-
static下的图片(尤其是 banner、商品图、长图):优先外链,用https://地址赋值给src或background-image - 视频、音频文件:绝对不能放本地,否则一个 MP4 就卡死包体积,改用
video组件的src指向 CDN URL - 字体文件(.ttf/.woff):uni-app 不支持动态加载字体,但可通过 CSS 的
@font-face引用 CDN 地址,前提是平台支持(微信基础库 ≥ 2.21.0) - 第三方 JS SDK(如地图、IM、统计):避免直接
import完整包,改用require动态引入或通过script标签异步加载(注意:H5 可行,小程序需用uni.loadSubNVue或自定义组件桥接) - 不要外链:页面 JS 逻辑、Vue 组件、
store、utils—— 这些必须在编译时打进包,否则运行时报Cannot find module
外链后图片不显示?检查这几个点
常见现象是开发时正常,真机预览白屏或报 403/404,本质是路径或策略没对齐:
- CDN 域名必须在小程序后台「业务域名」中配置,且协议必须为
https,不支持http或 IP - 图片 URL 不能带中文或空格,需
encodeURIComponent编码参数部分(如https://cdn.com/a.jpg?name=张三→name=%E5%BC%A0%E4%B8%89) - 微信小程序对
background-image的 URL 有额外限制:不能含查询参数(?v=1.0),也不能是 base64,得用纯路径 + 合理缓存头 - uni-app 的
static图片引用写法(如../../static/logo.png)不会自动转 CDN,必须手动替换成完整 URL,建议抽成常量或环境变量管理
uni-app 打包时怎么确认哪些文件还在包里
光靠删文件不保险,得看实际产物大小和组成:
- 运行
npm run build:mp-weixin后,打开dist/build/mp-weixin目录,用系统自带的「显示简介」或du -sh *查各文件夹体积 - 重点关注
static/和common/(存放编译后公共 JS)——如果static/还有几百 KB,说明还有资源没搬走 - 用 VS Code 安装插件
File Size,可直观看到每个文件体积;或者用source-map-explorer分析 JS 包构成(需开启build.productionSourceMap = true) - 注意:
node_modules里的图片/字体如果被import进 JS,也会被打进包,得查import语句源头并替换
最易被忽略的是:字体文件虽小,但多个 .woff 加起来可能超 200KB;还有开发者习惯把接口返回的图片 URL 拼错协议(比如后端返回 http://),导致真机拒绝加载。外链不是一配就灵,得逐个验证路径、权限、编码、缓存。











