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

🚨 Vue3 时代 uni-app 官方把「分包优化」砍了！

🚀 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 例

模块异步跨包调用

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

组件异步跨包引用

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

📊 一键验证效果

pnpm build:mp-weixin

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