Vue3 uni-app 主包 2 MB 危机？1 个插件 10 分钟瘦身

🚨 一声叹息：Vue3 时代 uni-app 官方把「分包优化」砍了！

维度	Vue2（webpack）	Vue3（vite）
官方策略	内置 SplitChunks，自动拆包	⚠️ 直接移除拆包逻辑
结果	主包轻松 < 2 MB	所有依赖一股脑进 common/vendor.js，瞬间爆表
平台红线	微信小程序主包 ≤ 2 MB	上线即拒审

结论：不是 Vue3 不能分包，而是官方没做；不想被 2 MB 卡脖子，就必须装 @uni-ku/bundle-optimizer。

---

🚀 10 分钟 4 步接入

① 安装

pnpm add -D @uni-ku/bundle-optimizer

② 配置 vite（最简）

// vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import optimizer from '@uni-ku/bundle-optimizer'

export default defineConfig({
  plugins: [
    uni(),
    optimizer({ logger: true }) // 日志开，一目了然
  ]
})

③ 打开微信小程序分包开关

// manifest.json
{
  "mp-weixin": {
    "optimization": { "subPackages": true }
  }
}

④ 让 TS 识别新语法

// tsconfig.json
{
  "include": ["async-import.d.ts", "async-component.d.ts"]
}

生成的 .d.ts 可放心加入 .gitignore。

---

🧩 用法 2 例

1. 模块异步跨包调用

const mod = await AsyncImport('@/sub-pkg/utils/encrypt.ts')
mod?.aesEncrypt('hello')

2. 组件异步跨包引用

<script setup>
import Chart from '@/sub-pkg/chart.vue?async'
</script>
<template><Chart /></template>

---

📊 一键验证效果

pnpm build:mp-weixin

打开微信开发者工具 →「构建分析」→ 看主包大小 立减几百 KB 🎉

---

📝 FAQ（收藏备用）

症状	解决
主包体积没变	manifest.json 忘了 "subPackages": true
编辑器报红	把 async-*.d.ts 加进 tsconfig.json
HBuilderX 白屏	根目录缺 vite.config.ts，新建即可
App 端报错	暂不支持，静待后续

---

📚 延伸阅读

• uni-app 官方分包指南
• 插件源码与完整示例