UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决

1. 背景

在UniApp项目中,为了提升应用性能、优化加载速度、降低首屏资源占用,我们通常会采用 ​​分包(subPackages)​​ 的模式。

  • ​主包(main package)​:包含应用入口、公共页面、全局组件和逻辑,是用户打开小程序 / App 时首先加载的部分;
  • ​分包(subPackage)​ :将一些非首屏、独立功能模块的页面拆分成单独的包,​按需加载​,从而减少主包体积,提升启动速度。

但是在使用过程中出现,不同分包引入同一个npm库,会被重复打入主包中。

官方社区:如何合理的将npm包在多个分包下运行而不会打包进主包?

2. 问题现象

例如,我在pagesLpagesN中均引入了crypto-js

通过微信小程序代码依赖分析:

pagesN引入crypto-js

pagesN去除crypto-js

通过分析可得出,如果分包不引入crypto-js,主包的体积没有变大,如果引入了,会导致体积变大。

3. 如何解决

如何简单快速的解决,就是将pagesN页面直接引入pagesL分包中,去除重复引入。

直接移入分包L

移入到pagesL可以看到主包的体积并没有变大,这算是一个简单的解决方式。

具体解决方式可以参考这篇文章: vue3 uni-app 主包 2 MB 危机?1 个插件 10 分钟瘦身

相关推荐
摆烂工程师8 分钟前
(2025年11月)开发了 ChatGPT 导出聊天记录的插件,ChatGPT Free、Plus、Business、Team 等用户都可用
前端·后端·程序员
gongzemin18 分钟前
使用阿里云ECS部署前端应用
前端·vue.js·后端
用户411800341534119 分钟前
Flutter课题汇报
前端
环信22 分钟前
实战教程|快速上线音视频通话:手把手教你实现呼叫与接听全流程
前端
Dgua23 分钟前
✨TypeScript快速入门第一篇:从基础到 any、unknown、never 的实战解析
前端
海云前端123 分钟前
Vue3 大屏项目投屏功能开发:多显示器适配实践
前端
技术小丁39 分钟前
使用 HTML + JavaScript 实现酒店订房日期选择器(附完整源码)
前端·javascript
hashiqimiya40 分钟前
harmonyos的鸿蒙的跳转页面的部署
开发语言·前端·javascript
向日葵同志443301 小时前
使用@univerjs纯前端渲染excel, 显示图片、链接、样式
前端·react.js·excel
可别3901 小时前
使用Worker打包报错
前端·vue.js