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

相关推荐
不一样的少年_3 分钟前
产品催: 1 天优化 Vue 官网 SEO?我用这个插件半天搞定(不重构 Nuxt)
前端·javascript·vue.js
-dcr5 分钟前
50.智能体
前端·javascript·人工智能·ai·easyui
行者9614 分钟前
Flutter跨平台开发适配OpenHarmony:进度条组件的深度实践
开发语言·前端·flutter·harmonyos·鸿蒙
云和数据.ChenGuang15 分钟前
Uvicorn 是 **Python 生态中用于运行异步 Web 应用的 ASGI 服务器**
服务器·前端·人工智能·python·机器学习
IT_陈寒17 分钟前
SpringBoot 3.0实战:这5个新特性让你的开发效率提升50%
前端·人工智能·后端
遗憾随她而去.26 分钟前
Webpack 面试题
前端·webpack·node.js
我要敲一万行27 分钟前
前端文件上传
前端·javascript
恋猫de小郭29 分钟前
Tailwind 因为 AI 的裁员“闹剧”结束,而 AI 对开源项目的影响才刚刚开始
前端·flutter·ai编程
要加油哦~29 分钟前
算法 | 整理数据结构 | 算法题中,JS 容器的选择
前端·javascript·算法
一只小bit29 分钟前
Qt 重要控件:多元素控件、容器类控件及布局管理器
前端·c++·qt