快速定位uni-app打包大文件需直接检查node_modules和unpackage(App)或dist/build(小程序)产出目录,用系统文件排序功能查看前5大JS/CSS/图片;第三方库须按需加载,图片须提前压缩,原生插件需精简ABI和架构。
uni-app 打包后体积太大,怎么快速定位大文件
直接看 node_modules 和 unpackage(app)或 dist/build(小程序)里的实际产出,别猜。hbuilderx 构建后会生成完整资源目录,用系统自带的文件大小排序功能(比如 macos 的「列表视图 + 按大小排序」,windows 资源管理器「查看 → 详细信息 → 大小」列)扫一眼,前 5 个最大的 js/css/图片基本就是元凶。
-
node_modules里占大头的通常是echarts、three.js、pdfjs-dist这类重型库,哪怕只 import 了一两个函数,Webpack 默认也会全量引入 - 小程序的
dist/build/mp-weixin下,注意检查static/里有没有未压缩的 PNG/JPG,一张没处理的截图就可能 2MB+ - App 的
unpackage/res下,js/目录里体积异常大的 chunk 文件(如chunk-vendors.[hash].js)说明第三方库没做按需加载
Vue 组件和第三方库如何真正按需加载
uni-app 基于 Vue,但很多 UI 库(比如 uView、uni-ui)的按需加载不是写个 import { uniBadge } from '@dcloudio/uni-ui' 就完事——得配 babel-plugin-import 或改 webpack 配置,否则编译时仍会打进全量包。
- 对
uView:必须在vue.config.js里加configureWebpack.plugins,启用babel-plugin-import并指定libraryName: 'uview-ui',否则import { uButton } from 'uview-ui'无效 - 对
echarts:别用import * as echarts from 'echarts',改用import * as echarts from 'echarts/lib/echarts'+ 单独引入需要的组件,例如require('echarts/lib/chart/bar') - 自定义组件如果用了
import xxx from '@/components/xxx.vue'且该组件内部又 import 了大型工具库,它会被打到主包,建议拆成异步组件:const Xxx = () => import('@/components/xxx.vue')
图片和静态资源体积爆炸的常见原因
小程序单包限制 2MB(基础库 2.27+ 后放宽到 4MB),App 安装包超 50MB 用户流失率明显上升——而 80% 的冗余来自图片。不是“用了压缩工具”就行,关键看谁在读取原始文件。
- 直接把设计稿 PNG 拖进
static/?微信开发者工具不会自动压缩,构建时原样打包。必须提前用tinypng或sharpCLI 批量处理 - 用
background-image: url('~@/static/xxx.png')?这个写法会让 Webpack 把图片纳入构建流程,触发 base64 内联(小图还好,大图直接塞进 JS),改用url('@/static/xxx.png')让其作为独立资源输出 - 字体文件(
.ttf)动辄 1–2MB,uni-app 默认不支持子集化。真要用自定义字体,先用fontmin提取中文常用字集,再转成woff2
App 端特有的体积陷阱:原生插件和 SDK
App 打包体积比小程序更难控,因为原生插件(uni_modules)和 SDK(如推送、统计、地图)默认是全量集成。HBuilderX 的「模块配置」界面看着方便,但勾选一个「极光推送」,实际打进包的是整个 jpush-android-4.x.x.aar + jpush-ios-4.x.x.framework,不含任何 tree-shaking。
- Android 端:检查
nativeplugins/jpush/android/libs/,删掉不用的 ABI 文件夹(如只上架华为应用市场,可删arm64-v8a以外的armeabi-v7a、x86) - iOS 端:在
nativeplugins/jpush/ios/下,用lipo -info查 framework 架构,删掉模拟器架构(i386、x86_64) - 所有原生插件的
main.js入口,如果只是某页才用,别在main.js里全局Vue.use,改用页面级onLoad时动态require
最麻烦的是调试阶段——开发时开「自定义调试基座」,里面塞了十几个插件,但最终发版用的是「标准基座」,这时候体积对比毫无意义。务必用「发行 → 原生 App-云打包」走真实流程测体积。

















