uniapp项目分包优化(项目化开发的重点)

44 篇文章 1 订阅
订阅专栏

1.优化分包要求

目前小程序分包大小有以下限制:

  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M

分包的目的:对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的协同合作。

2.uniapp分包项目目录(新建的项目来说明分包流程)

这是我分包小程序之后的目录结构

1.components:公共组件(供主包引用)
2.subpkg等这些文件的就是分包(我这里之创建了一个分包目录)
3.分包里的components是单个分包自己的组件目录,分包vue页面的引用只能是在自己分包目录下的文件才可以引用
4.pages是主包,里面都是启动页面/TabBar 页面
5.static里放的是公共静态资源,图片类
 

步骤:

1.配置manifest.json

"mp-weixin": {

"optimization":{"subPackages":true}

}

2.配置pages.json


        在pages.json中新建数组"subPackages",数组中包含两个参数:1.root:为子包的根目录,2.pages:子包由哪些页面组成,参数同pages

注意主包和分包是不能再同一目录下,在构建uniapp项目时,可以考虑一下目录结构,以便后期进行分包;

3.分包预载配置(preloadRule)


做这一步主要为了优化速度,不想优化速度的可以跳过这个配置

目的:配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度,提供更好的用户体验。

preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:
 

字段类型必填默认值说明
packagesStringArray进入页面后预下载分包的 root 或 name__APP__ 表示主包。
networkStringwifi在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)

 4.看下分包后的依赖项吧

5.上传后的项目分包大小

6.看一下优化后的界面效果

确实比之前上传文件小很多,而且页面打开速度以及运行优化很多哦

详细可见uniapp官方文档

https://uniapp.dcloud.io/collocation/pages?id=subpackages

uniapp分包流程
qq_50852155的博客
07-20 343
"selectedIconPath": "static/tabBar/home-active.png", //选中时的图片路径。"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages。"pagePath": "pages/index/index", //页面路径,必须在 pages 中先定义。"path": "pages/index/index", //配置页面路径。
uniapp和小程序如何分包,详细步骤手把手(图解)
热门推荐
陈新科的博客
09-01 3万+
一、小程序分包 每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。 在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示 目前小程序分包大小有以下限制: 整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的
uni-app 性能优化
最新发布
m0_54829066的博客
09-03 473
uni-app 开发中,性能优化是确保应用流畅运行、提升用户体验的关键。通过以上的优化措施,可以显著提升 uni-app 应用的性能,为用户提供更流畅的使用体验。希望这个案例展示对您有所帮助,您在实际开发中可以根据具体项目的特点进行针对性的性能优化。通过根据屏幕尺寸动态获取合适大小的图片 URL,减少了图片加载的时间和流量消耗。来处理异步请求,使代码更清晰易读,并且能够更好地处理错误。优化前分别发送了两个独立的网络请求,优化后使用。同时发送两个请求,提高了请求效率。在上述优化前的代码中,使用。
uniapp和小程序如何分包,详细步骤手把手(图解)_uni分包
2401_84296945的博客
04-28 5021
在pages.json中新建数组"subPackages",数组中包含两个参数:1.root:为子包的根目录,2.pages:子包由哪些页面组成,参数同pages;配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度。app分包,同样支持preloadRule,但网络规则无效。做这一步主要为了优化速度,不想优化速度的可以跳过这个配置。在对应平台的配置(manifest.json)下添加。大纲路线、讲解视频,并且后续会持续更新**
uniapp中使用分包
yuansusu_的博客
04-25 3957
最后我们可以查看当前的主包和分包的体积,在微信开发者小程序的右上角的 详情-基本信息-本地代码-代码依赖中看到关系图,可以看到分包的体积节省了100多k,如果在详情将静态文件细分的情况,可以更少的减少主包的体积。做为小程序的首页,那么他能跳转的二级页面都放在一个分包中来加载(如下图的目录结构),这样不会加载多余的分包,也能提高加载分包的速度。在使用分包的配置后,我们会有主包和分包两个目录,这里主包和分包其实是有联系的,一般我们将主包中的页面,如。在构建小程序分包项目时,构建会输出一个或多个分包
uniapp分包
王二的博客
10-30 1228
在 src 目录下创建一个名为 subpackages 的文件夹,用于存放分包的代码。
32个uniapp项目源码 涵盖商城团购等
05-10
IT之家小程序版客户端(使用 Mpvue 开发,兼容 Web)ithome-lite-master.zip mpvue 仿网易严选mpvue-shop-master.zip mpvue-音乐播放器mpvue-music-master.zip mpvue性能测试与体验miniweibo-master.zip mpvue改造...
uniapp框架-仿CNode社区项目源码-uni-app项目源码-vue语法格式.zip
05-21
UniApp开发前景分析:专业视角引领未来 随着移动互联网的迅猛发展,跨平台应用开发框架UniApp以其独特的优势,展现出广阔的开发前景。 UniApp基于Vue.js,采用一次编写、多端运行的设计理念,极大降低了开发成本和...
-基于网易云音乐-doItMusic的uniapp项目2.0
11-12
使用网易云音乐接口,基于uniapp多端开发;音乐播放、进度、缓存进度条监听,视频播放、上下滑动切换、加载相关同类型视频。去除音乐播放界面的图片旋转效果(uniapp 动画api好像很消耗性能)。添加原生app视频播放...
uniapp subpackages demo分包
04-22
6. **性能监控**:在实际应用中,可通过微信小程序的性能监控工具或uni-app自带的统计分析工具,持续跟踪和优化分包的效果,确保最佳用户体验。 7. **更新策略**:分包策略还影响了应用的更新逻辑。主包更新时,...
uniapp框架-uniapp聊天实例,支持图片,语音,表情-uni-app项目源码-vue语法格式.zip
05-21
UniApp开发前景分析:专业视角引领未来 随着移动互联网的迅猛发展,跨平台应用开发框架UniApp以其独特的优势,展现出广阔的开发前景。 UniApp基于Vue.js,采用一次编写、多端运行的设计理念,极大降低了开发成本和...
uniapp分包demo
11-03
uniapp多页面配置效果,项目代码subPackages 里的pages的路径是 root 下的相对路径,不是全路径。 微信、百度小程序每个分包的大小是2M,总体积一共不能超过8M。 支付宝小程序每个分包的大小是2M,总体积一共不能超过4M。 分包下支持独立的 static 目录,用来对静态资源进行分包uni-app内支持对微信小程序、QQ小程序、百度小程序分包优化,即将静态资源或者js文件放入分包内不占用主包大小。详情请参考:关于分包优化的说明 针对vendor.js过大的情况可以使用运行时压缩代码 HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码
uniapp小程序如何分包?完整详细步骤教给你【小白教程】
Leijiang0504的博客
02-15 1万+
首先我们为什么要分包? ​ 好像是规定小程序不能超过2M,一旦超过就需要分包,我这里是公众号项目,想转成小程序用的是uniapp框架做的,本身这个项目肯定是大于2M,我们在不删减项目的同时需要改成小程序的话,就需要分包,我理解的是,分包就是把财产分给自己的兄弟,但是又属于自己的大家庭,就想下面这样 上面给大家看了分包目录,下面教大家如何快速分包,改成小程序需要的大小内存 首先是分包的大小 微信小程序每个分包的大小是2M,总体积一共不能超过16M。 uni-app内支持对微信小程序、QQ小.
一文教你Uniapp和小程序如何优雅分包
weixin_45734165的博客
08-20 490
js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。分包里的components是单个分包自己的组件目录,分包vue页面的引用只能是在自己page_xxxx分包目录下才可以引用。配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度。
UNI-APP 分包使用(详解与实战)
码海扬帆:前端探索之旅的博客
03-02 1986
4、在pages.json中创建"subPackages"数组,数组中包含两个参数:1.root:为子包的根目录,2.pages:子包由哪些页面组成(参数同pages);js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用。自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息。
uniapp----分包
一个努力不被优化的程序员
08-11 5784
分包开发一、什么是分包开发?有很多小伙伴一听分包开发认为就是多建几个文件夹,到时候引用就行了,说对对,但也不对,慢慢看下去就知道原因了:首先是官网的介绍:可能说的不是特别清晰,大概意思就是:创建文件,并在min.js中添加路径,并添加下载事件分包对于中、大型项目开发来说是非常有必要的,因为2MB根本做不了什么好看的项目,所以分包开发这个技术一定要会,可以不用但一定要知道怎么解决超出限制问题喜欢的小伙伴可以点个关注后续还会继续发布关于uniapp优化的文章。
uniapp项目如何分包
gcyaozuodashen的博客
03-16 3142
uniapp分包
uniapp和小程序如何分包,详细步骤手把手(图解,前端高级开发岗必问知识点
2401_83621095的博客
03-19 2802
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。分包里的components是单个分包自己的组件目录,分包vue页面的引用只能是在自己page_zhaoshang分包目录下才可以引用。最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。
××项目软件开发计划书模板
“软件项目开发计划书模板,适用于外包项目,包含参与人员、项目目标、定义、参考资料、...在实际操作中,应根据项目的特性和需求,将模版内容具体,填充进项目的实际信息,以生成一份完整、针对性的软件开发计划书。
写文章

热门文章

  • vue3实现el-table表格单选功能以及默认选中某一行数据以及多选 9805
  • uniapp横竖屏切换(小程序端与APP或H5端) 8247
  • uniapp切换路由监听导航跳转(在监听网络状态时非常常用) 7970
  • unipush2.0实现APP消息推送(1) 7127
  • uniapp开发小程序解析经纬度获取当前位置信息(腾讯地图二) 7114

分类专栏

  • Vue2.0 3篇
  • uniapp 44篇
  • uniapp图表
  • Lgb-x库 1篇
  • Npm包 1篇
  • Vue3.0 7篇
  • uniPush2.0 3篇
  • uniapp接入地图 4篇
  • vue 39篇
  • js处理数据 7篇
  • git小乌龟教程 1篇
  • antvF2 2篇

最新评论

  • unipush2.0实现APP消息推送(1)

    yw19980808: 你好,请问消息推送成功后安卓端app右上角为什么不会自动创建角标

  • Vue3切换路由白屏刷新后才显示页面内容

    m0_72302311: 绝了 为什么template下不能有注释啊

  • unipush2.0实现APP消息推送(1)

    爱池鱼的酱酱仔: 透传和云函数里面方法是两码事,你看unipus2文档有个参数

  • unipush2.0实现APP消息推送(1)

    ChurinHe: 请问uni-cloud-push扩展库的sendMessage方法,可以实现透传消息推送吗

  • uniapp实现表格冻结

    不爱学习的小码农: 请我问一下我表头这样写宽度定死了对不齐你有这种问题吗

最新文章

  • lgb-x库不做重复轮子,只做业务场景常用组件及方法
  • vue2以及vue3基于el-table实现表格正则校验功能
  • npm上传自己的包以及发布过程遇到的问题
2024年9篇
2023年61篇
2022年21篇

目录

目录

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱池鱼的酱酱仔

您的鼓励是我前进的动力哦~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或 充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值

深圳坪山网站建设公司网站的响应时间怎么优化网站推广优化zd乚云速捷网站排名优化工具免费咨询中小企业网站优化技巧天津网站优化公司价格荔湾企业网站优化推广报价网站反推优化红桥区网站关键词优化哪家便宜云浮网站首页关键词优化推广网站结构优化的目的网站优化日常南通网站优化推广方法电器建材网站seo优化效果网站排名优化先询火25星推网站的优化方案网站运营的优化分析贾汪区网站优化报价青岛市网站优化推广沈阳网站SEO优化价格重庆网站优化搜狗网站优化推广照明网站seo优化联系方式庆元网站优化怎样优化网站关键词古城网站优化价格沈阳网站推广优化要多少钱固原网站优化哪里有滕州seo网站优化平泉县网站seo优化排名壹起航如何优化网站关键词香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

深圳坪山网站建设公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化