uniapp分包及优化

最新推荐文章于 2025-07-17 15:48:40 发布
原创 最新推荐文章于 2025-07-17 15:48:40 发布 · 6.5k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了uniApp分包的必要性和限制，重点分享了分包处理的经验，包括哪些内容应放入主包，如何在`pages.json`中配置分包，以及微信小程序中查看分包是否成功的步骤。此外，还提及了uniApp的分包优化更新，但作者对其中的具体作用尚不清楚，期待读者交流探讨。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 最近第一次做uniapp,遇到分包问题,查了一些资料,询问一些朋友,倒是得到了解决,下面分享一下自己分包处理中的一些经验,哪儿需要补充或者有问题欢迎指出

    关于uniapp分包的说明,在开发小程序中,我们称主目录下的pages和static为主包,想要真机调试主包或者分包的大小不能超过2M,超过就会导致调试时打不开,所以我们要尽可能的减少主包体积和静态资源图片的存放,而哪些是必须出现在主包里的内容呢:

1.底部导航栏的配置项页面
2.主包所依赖的插件
3.主包依赖的图片(在做静态页时,图片太大可以放服务器上,等着联调了再换)

下面附带一张各小程序允许分包大小图:
在这里插入图片描述
项目目录展示
在这里插入图片描述
接下来在pages.json中配置在这里插入图片描述
subPackages是分包配置关键词,root是子包根目录,下面的pages就跟和底部导航栏的pages一样了,
接下来可在微信小程序中查看自己是否分包成功
在这里插入图片描述
运行成功之后,点击右侧详情,主包: 1472.8kb,下面

最低0.47元/天 解锁文章

200万优质内容无限畅学
uniapp编译微信小程序主包过大无法上传进行分包优化步骤
前端叶荨，随手记
11-24 2508
1. 首先是在uniapp项目中的**manifest.json**文件中找到**源码视图**，进去之后在微信小程序相关**mp-weixin**之下进行开启分包优化的相关配置： 2. 开始新建项目目录，新建一个跟pages同等级的文件夹，然后把想要分包的文件**先复制**一份到新建的目录下，然后开始在**pages.json**中进行配置在**pages.json**中添加**subPackages分包加载配置**，此配置为小程序的分包加载机**subPackages**节点接收一个数组，数组每一项都
uniapp从入门到放弃——第三章：打包优化
to_prototy的博客
08-03 1118
uni-app开发微信小程序打包文件过大导致无法上传优化方案
uniapp小程序的分包处理
weixin_45781661的博客
09-03 508
uniapp小程序的分包处理 首先在manifest.json中加入如下配置 "optimization" : { "subPackages" : true }, 然后把需要分出去的页面写在这个分包里面 "subPackages": [{ "root": "pagesA", "pages": [{ "path": "list/list", "style": { ...} }] }, {
uniapp微信小程序 在主包中引入使用分包组件
最新发布
liang04273的博客
07-17 373
本文介绍了小程序开发中主包引入分包组件的配置方法。关键步骤包括：1.在页面JSON配置的style中添加componentPlaceholder占位符，名称需与模板一致；2.在pages.json中配置usingComponents声明组件路径，key值需与调用名称匹配；3.通过preloadRule设置预加载规则，可指定网络条件和需要预加载的分包。特别强调各处的组件名称必须保持一致，包括占位符名称、组件调用名和路径配置。这些配置能优化小程序的分包加载机制，提升用户体验。
uni-app 小程序主包、分包优化方案
xuelang532777032的博客
03-20 4126
七、你还得考虑到，之前你改动小程序之前，某些被移动到分包的页面被分享出去之后，别人点你分享的路径进来发现找不到路由，这时候有小伙伴会卡到uni_modules ，因为比如你之前用的 HBuilder插件商城的依赖，怎么移动到子包呢？什么时候预加载，看下图红框框，那个就是主包的tabBar，tabBar页面是不建议放分包的，只能在主包。这个分包了，你运行成功的时候就会出来如下图，咱开发环境的时候会加载多次，正式线上环境在跑的时候就一次的！好，如果博主这2两张图是你要的效果，来，说说具体操作方案。
大道至简-前端性能优化之uniapp
大道至简
09-06 789
13、css方面，要知道哪些属性是有继承效果的，像字体、字体颜色、文字大小都是继承的，不要写那些没有意义的重复代码。9、请不要滥用本地存储，局部页面之间的传参用url，如果用本地存储传递数据要命名规范和按需销毁。3、图片请压缩后使用，避免大图，必要时可以考虑雪碧图或svg，简单代码能实现的就不要图片。8、关于用户体验，巧用渐变动画，注重页面细节，图片可用懒加载，更多可看uview-ui。2、减少高频动画和监听，减少对象数量，避免接口调用频繁，善用数据缓存。再提供几个时间相关工具类。
前端学习（2347）：创建新页面和配置
歌谣的博客
10-04 923
pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/message/message", "style" : { "navigationBarTitleText": "信息页", "navigationBarBackgroundColor": "#7FFF00", "h5":{ ..
uniapp和小程序如何分包，详细步骤手把手（图解）
热门推荐
陈新科的博客
09-01 3万+
一、小程序分包 每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示 目前小程序分包大小有以下限制： 整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的
小程序分包
LoveZJC96的博客
03-14 743
1.为什么要分包 每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示 目前小程序分包大小有以下限制： 单个分包/主包大小不能超过 2M 不能超过9个包 2.分包步骤 1.先开启分包，如下图： 2.1.1找到manifest.json 2.1.
uniapp分包
王二的博客
10-30 1433
在 src 目录下创建一个名为 subpackages 的文件夹，用于存放分包的代码。
uniapp分包demo
11-03
uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化，即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明 针对vendor.js过大的情况可以使用运行时压缩代码 HBuilderX创建的...
uniapp分包配置，页面配置
11-29
在开发大型的uni-app项目时，分包配置是提高应用性能和...通过以上配置，我们可以有效地管理和优化uni-app项目的性能，提供更好的用户体验。在实际开发中，应根据项目需求灵活运用这些配置，达到最佳的分包和导航效果。
探索UniApp分包
每天都要努力学习哦~~
09-01 1621
UniApp分包是一种将应用代码划分为多个包的技术。通常，一个UniApp项目包含了所有页面和组件的代码，这可能导致应用体积庞大，加载时间长，影响用户体验。分包技术的核心思想是将不同部分的代码划分为不同的包，按需加载，从而提高应用性能。
uniapp分包技术与配置优化指南
以上内容详细阐述了uniapp分包配置的相关知识点，包括分包的路径配置规则、大小限制、静态资源管理、分包优化策略以及在不同开发阶段的代码压缩选择。开发者在实施分包策略时，应当充分理解这些知识点，合理规划和...
uniapp 微信小程序端关于分包优化的说明
weixin_46337813的博客
07-02 893
文档地址：https://uniapp.dcloud.io/collocation/manifest?id=mp-weixin 关于分包优化的说明 在对应平台的配置下添加"optimization":{"subPackages":true}开启分包优化 目前只支持mp-weixin、mp-qq、mp-baidu、mp-toutiao的分包优化 分包优化具体逻辑： 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用 js文..
关于uniapp小程序的分包问题
coding...
02-28 3762
由于使用插件默认会导入到uni_modules文件夹下，根目录下的uni_modules和components下的文件打包时会全部默认打包到主包中，那么这些插件和公共组件也需要分包处理，分包需要的插件可以放置到分包的目录下，分包下创建components文件，放入分包页面所用到的公共组件。对于uni_modules中的插件，如果是页面单独使用，那么可以放在对应分包里的页面文件下单独引入即可。如果分包公共使用的放在分包下的components文件夹下引入使用即可。分包也可以分多个，按照实际情况分包即可。
uniapp分包优化，包括分包路由跳转规则
11-24 3465
分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。以达到优化小程序响应速度的目的。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值