【小程序分包】小程序包大于2M,来这教你分包啊

这篇具有很好参考价值的文章主要介绍了【小程序分包】小程序包大于2M,来这教你分包啊。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

🍊缘由

该大的不大,小程序包超出2M,无法上传发布

前段时间项目迭代时,因版本大升级,导致uniapp打包后小程序后,包体积大于2M。虽然将图片等静态资源压缩,体积大的资源放置cdn,在不懈的努力下,治标不治本,包体积还是不听话的长到2M以上。憋的实在没办法,遂将小程序分包,彻底解除封印,特来跟大家分享下如何将小程序分包,减小主包大小


🎯主要目标

实现2大重点

  1. 如何进行小程序分包
  2. 如个根据分包调整配置文件

🍈猜你想问

如何与狗哥联系进行探讨

关注公众号【JavaDog程序狗】

公众号回复【入群】或者【加入】,便可成为【程序员学习交流摸鱼群】的一员,问题随便问,牛逼随便吹。

此群优势:

  1. 技术交流随时沟通
  2. 任何私活资源免费分享
  3. 实时科技动态抢先知晓
  4. CSDN资源免费下载
  5. 本人一切源码均群内开源,可免费使用
2.踩踩狗哥博客

javadog.net

大家可以在里面留言,随意发挥,有问必答


🍯猜你喜欢

文章推荐

【项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小项目
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【模块分层】还不会SpringBoot项目模块分层?来这手把手教你!
【ChatGPT】手摸手,带你玩转ChatGPT
【ChatGPT】SpringBoot+uniapp+uview2对接OpenAI,带你开发玩转ChatGPT


正文

🍵三个问题

  1. 为什么小程序会有2M的限制?
  1. 用户体验:小程序要求在用户进入小程序前能够快速加载,以提供良好的用户体验。限制小程序的体积可以确保小程序能够在较短的时间内下载和启动,避免用户长时间的等待。
  2. 网络条件:考虑到不同地区和网络条件的差异,限制小程序的体积可以确保在低速网络环境下也能够较快地加载和打开小程序,提供更广泛的用户覆盖。
  3. 设备存储:一些用户使用的设备可能存储空间有限,限制小程序的体积可以确保小程序可以在这些设备上正常安装和运行。
  1. 如何解决包过大问题?
  1. 优化代码,删除掉不用的代码
  2. 图片压缩或者上传服务器
  3. 分包加载
  1. 什么是分包加载?

小程序一般都是由某几个功能组成,通常这几个功能之间是独立的,但会依赖一些公共的逻辑,且这些功能一般会对应某几个独立的页面。那么小程序代码的打包,可以按照功能的划分,拆分成几个分包,当需要用到某个功能时,才加载这个功能对应的分包。


🧀实操分包步骤

1.查看项目结构

通过上方三个问题,我们开始具体分包流程,首先看一下分包前项目结构pages.json配置文件

pages.json
{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/card/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/device/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/order/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/product/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

2.分析主包大小

微信开发者工具中,查看【详情】进行分析,此处本地代码只有一个主包大小399.8KB

3.参考文档

本文以uniapp为实操介绍案例

小程序官方文档:

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

uniapp 分包文档:

https://uniapp.dcloud.net.cn/collocation/pages.html#subpackages

4. 结构调整

将咱们项目结构按照如下图所示进行拆分

新建subPages_A 和 subPages_B,将pages下不同页面移入进新增的两个包,此处subPages_A的名字只做示例,实际要按照标准命名!

比较下之前项目结构,此处项目会报错,不用担心,稍后修改pages.json


5. 修改pages.json

根据上一步拆分的包路径,进行配置文件的调整,此处注意"subPackages" 要和 "pages" 同级

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"subPackages": [{
		"root": "pages/subPages_A",
		"pages": [{
				"path": "card/index",
				"style": {
					"navigationBarTitleText": "card"
				}
			},
			{
				"path": "device/index",
				"style": {
					"navigationBarTitleText": "device"
				}
			}
		]
	}, {
		"root": "pages/subPages_B",
		"pages": [{
				"path": "order/index",
				"style": {
					"navigationBarTitleText": "order"
				}
			},
			{
				"path": "product/index",
				"style": {
					"navigationBarTitleText": "product"
				}
			}
		]
	}],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

这里的意思是将主包拆成subPages_A和subPages_B两个子包,对比下之前的配置


6. 启动测试

启动后查看微信开发者工具,查看【详情】可看到主包大小降为326.0kb,并且下方还有subPages_A和subPages_B两个子包

比较之前包大小,分包成功!


7. 特别注意

🎯 如果设计代码中路径问题,需要调成最新包结构路径。例如

拆包前跳转到对应设备页面

uni.navigateTo({
	url:'/pages/device/index'
})

拆包后跳转到对应设备页面

uni.navigateTo({
	url:'/pages/subPages_A/device/index'
})

切记如果拆包后所有路径问题需要统一修改,否则则会报错!!!


总结

本文通过实际demo进行uniapp小程序拆包,通过分析项目主包大小,查看官方文档,按照功能划分进行子包拆分,如果还有博友存在疑问或者不理解可以在上方与本狗联系,或者查看本狗发布在上方的代码,希望可以帮到大家。文章来源地址https://www.toymoban.com/news/detail-668185.html

到了这里,关于【小程序分包】小程序包大于2M,来这教你分包啊的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序主包超2M打包发布成功等相关配置

    期望通过每一次分享,让技术的门槛变低,落地更容易。 —— around 作者公司开发了一个小程序,经过几个版本的迭代,大小超过了2M,研发主要使用的组件是uni-app,前面几个版本包大了我们添加了 optimization.subPackages=true 的配置,并给不同功能页面完成了分包,到此解决第一

    2024年02月11日
    浏览(50)
  • 小程序分包(普通分包、独立分包)

    当小程序从普通的分包页面启动的时候,首先需要下载主包 独立分包是不依赖看于主包就可以运行,提升分包的执行速度,一个小程序可以有多个独立分包。 独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通

    2023年04月21日
    浏览(108)
  • 微信小程序独立分包与分包预下载

    官网链接 独立分包配置方法 独立分包使用限制 独立分包中不能依赖主包和其他分包中的内容,包括 js 文件、模板、wxss、自定义组件等; App 只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为 独立分包中暂时不支持使用插件 分包预加载 开发者可以通过在

    2024年02月20日
    浏览(45)
  • 微信小程序(十四)分包和分包预加载

    注释很详细,直接上代码 上一篇 新增内容: 1.分包的配置 2.分包预加载的写法 先说说为什么需要分包: 小程序追求小而快,主包的大小控制是 小程序上线的硬性要求 ,分包有利于小程序 优化加载速度 分包的注意事项: 单个分包大小不能超过2mb 分包不意味着可以无限增加

    2024年01月25日
    浏览(58)
  • 微信小程序Vue+nodejs教室自习室座位预约系统68u2m

    本文从管理员、用户的功能要求出发,教室预约系统小程序中的功能模块主要是实现管理端;首页、个人中心、教室信息管理、教室设备管理、用户管理、教室预约管理、管理员管理、系统管理,微信端;首页、教室信息、教室设备、教室预约、我的功能。经过认真细致的研

    2024年02月05日
    浏览(44)
  • uniapp分包,小程序分包处理 ,小程序发布包体积过大解决方案

    分包就是把一个完整的小程序项目,按照需求划分为不同的子包,构建的时候打包城不同的分包,按需加载 1、 可以减少小程序首次启动的下载时间 2、 可以多人开发中更好的解耦协作 3、 小程序发布主包体积过大 1、 整个小程序,主包加分包不能超过20M,单个包不能超过2M,主包也

    2024年02月04日
    浏览(48)
  • 小程序:使用分包异步化解决一个分包引入另一个分包的组件/函数的问题

    我们一般使用小程序插件的时候,喜欢将其放在分包中,因为插件体积会打包进主包内,很容易造成主包体积超过 2M 从而无法发布,我们暂且叫这个有插件的分包叫分包P,这时候另外两个业务分包XY,想引入这个分包P里的插件(插件里包含了几个组件和一些接口函数)。 方

    2024年02月02日
    浏览(45)
  • uniapp 超过2m无法上传代码!uni-module太大了,小程序无法上传怎么办?

    虽然分包了。但是主包里还有很多uniui的组件,占了2m多,之前一直是点击运行,然后再上传代码。提示的超过2m无法上传。 点击发行,然后上传就可以了。   1、组件按需导入,不用的就删了。 2、图片要压缩一下 3、 主要的页面放在主包里,次要的就放在分包里。 分包方法

    2024年02月02日
    浏览(44)
  • 微信小程序分包,分包与主包页面跳转

    什么是分包 分包指的是把一个完整的小程序项目,按照需求划分为不同的子包, 在构建时打包成不同的分包,用户在使用时按需进行加载。 分包的好处 对小程序进行分包的好处主要有以下两点: ● 可以优化小程序首次启动的下载时间 ● 在多团队共同开发时可以更好的解耦

    2023年04月08日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包