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

近日，前端开发社区里，一则关于Vue3在分包优化方面的策略调整，引发了广泛讨论，众多开发者称，这一变化带来了实质性的上线障碍，致使有严格体积限制的平台，比如小程序等。

内置 SplitChunks 的变迁

在Vue2那个时期，当与webpack进行构建操作的时候，SplitChunks功能作为一种被内置的特性存在着，它能够依照模块之间的引用关系，自动地去拆分代码包。这样的一种机制，保证了主包的体积一直都被控制在一个合理的范围之内，大多数的项目可以十分轻松地就将主包压缩到2MB以下。到了2023年，当Vue3全面地转向Vite构建体系之后，这一项持续了许多年的优化方案就被完全地移除掉了。

官方策略重大转变

Vue核心团队于2023年底正式予以确认，Vite构建工具会不再集成代码拆分逻辑，这般决策表明开发者需自行去处理第三方依赖的分配事宜，虽说官方作出解释称其目的是为维系构建工具的轻量化，然客观上致使大量依赖库被默认打包到单一common文件里 。

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

分包缺失的直接影响

// 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 }) // 日志开，一目了然
  ]
})

经检测发现，微信小程序平台有着要严格执行主包不可以超过2MB的审核标准。实际测试所展示出来的情况是，采用Vue3加上Vite构建而成的项目，其主包体积通常的状况一般呈现出突破限制阈值的态势。在2024年3月所取得的数据能够明确说明的是，那些没有进行手动优化的项目，其主包大小平均达到了3.5MB，这直接造成了使得审核失败的结果。

第三方解决方案兴起

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

当下社区已然出现了诸如@uni-ku/bundle-optimizer等专项的优化工具 ，此方案借助四步配置才能恢复分包能力 ，分别是安装依赖 ，配置vite ，开启小程序分包功能 ，进行类型声明配置 ，实际应用表明 ，接入之后主包的体积能够缩减40%-60% 。

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

具体实施指南

开发者要在vite.config.js里头配置optimizeDeps参数，与此同时于小程序manifest当中启动subPackages选项。要是针对TypeScript项目，还得在tsconfig.json里添加async-*.dts类型声明文件。整件配置过程大概需要10分钟，立即能够在微信开发者工具的构建分析面板去验证效果。

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

常见问题与应对

有部分开发者反馈，在进行配置之后，主包体积并未发生变化，这种情况通常是由于manifest配置存在遗漏所导致的。对于编辑器类型报错的情况，可通过完善tsconfig配置来加以解决，而HBuilderX出现白屏问题，大多是因为缺少vite.config.ts文件所造成的。需要留意的是，当前的方案暂时不支持App端，移动端开发者需要等待后续的更新 。

于技术进展的路途之中，怎样于追寻开发感受与确保项目效能之间寻觅到平衡之处，着实是值得每一个技术团队深入思考的。各位从事开发工作的人员在运用Vue3开展小程序开发之际，均采用了哪些别具一格的优化举措来应对分包方面的难题呢？欢迎在评论区域分享您的实践经历，要是觉得本文对您有所助益，请点赞予以支持并分享给更多的同行 。

pnpm build:mp-weixin