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 分钟瘦身

相关推荐
蝎子莱莱爱打怪6 小时前
零基础用AI写App?兄弟😂 醒醒吧,那只是个玩具罢了!
前端·人工智能·后端
用户1306095607236 小时前
elpis里程碑一的阶段性总结
前端
砍材农夫6 小时前
物联网 基于netty控制报文结构(发布与接收)
java·开发语言·前端·javascript·物联网
光影少年6 小时前
react的Context 跨层传值、优缺点、适用场景
前端·react.js·掘金·金石计划
kevinten106 小时前
说实话,我做了个"不务正业"的 AI:专门推荐冷门冒险地
前端
上单带刀不带妹6 小时前
Vue3 中 getCurrentInstance() 与 proxy 详解
前端·javascript·vue.js
Csvn6 小时前
前端 AI 应用:让浏览器运行机器学习模型
前端
妄念鹿6 小时前
记一次Uniapp的input输入框type为number时还能输入非数字
前端·javascript
ricardo19737 小时前
浏览器渲染流水线:从 HTML 到屏幕上的像素
前端·面试
明月_清风7 小时前
2026 前端生存指南:8 个正在重塑你职业生涯的技术趋势
前端·ai编程