uni-app打包体积优化 uni-app如何减小App或小程序包大小-uni-app-PHP中文网

快速定位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 或 sharp CLI 批量处理
用 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