Uniapp分包处理,一次性教会你解决错误码:80051


🟢一、Uniapp分包

我们无论在使用uniapp开发小程序和微信原生开发在真机调试或发布上线时经常会遇到这个提示,在使用 Uniapp 开发小程序,甚至是进行微信原生开发时,大家想必都遇到过这样的困扰:在真机调试或者发布上线的过程中,频繁收到关于小程序主包体积的提示。这一问题严重影响了小程序的性能和用户体验,亟待解决。

官方优化

微信官方为我们提供了一系列小程序性能优化的建议,这些指南极具参考价值。

  • 小程序性能优化指南:详细阐述了小程序性能优化的各个方面,从代码结构到资源加载等多维度给出优化方向,可参考小程序性能优化指南
  • 组件启用按需引入:这是减少资源加载的有效手段,能显著优化小程序的启动速度。更多关于按需引入的信息,可查阅组件启用按需引入

1、原因: 通常是由于我们的小程序主包体积过大,由于代码中的静态资源或者图片大小超了200k以及主包的体积超出1.5M而带来的提示

通常,小程序主包体积过大的原因主要有两点:一是代码中的静态资源,尤其是图片,若单个大小超过 200k,会显著增加主包体积;二是整个主包体积一旦超出微信官方规定的 1.5M,就会触发相关提示。这不仅会导致小程序加载缓慢,还可能在某些情况下无法正常上线。

解决

本文章采用知识+最全,风格通俗,内容干货,帮助我们提升JavaScript编程的格局,提高复杂代码的设计和开发能。

解决方案1:

在项目开发工具中,有两个简单的操作可以暂时缓解主包体积过大的问题。将 “将 JS 编译成 ES5” 和 “上传代码时自动压缩脚本文件” 这两个选项勾选,然后再次进行预览,你会发现相关提示可能不再出现。然而,这只是权宜之计,并不能从根本上解决问题,长期来看,我们还需要采取更有效的措施。

在这里插入图片描述

解决方案2- 长久之计:Uniapp 分包策略:

分包是一种将小程序的代码和资源按功能模块进行拆分的技术,能有效减小主包体积,提升小程序的加载性能。在pages.json文件中,我们可以按照以下格式进行分包配置,接下来就详细讲解一下,nuiapp是如何进行分包的

  1. 在pages.json中添加subPackages分包配置
	// 这里是小程序分包模块,具体需不需要分包,自行判定……
	"subPackages": [
		//    {
		//     "root": "pages/goods-record", //分包根目录 文件夹名
		//     "pages": [
		//         {
		//             "path": "index",  // 分包页面路径,相对与分包根目录
		//             "style": {
		//                 "navigationBarTitleText": "进货记录",
		//                 "navigationStyle": "custom",
		//                 "navigationBarTextStyle": "white"
		//             }
		//         }
		//     ]
		// }
	],

接下来我就对MyPages进行一下分包
注意:主包和分包是不能再同一目录下,在构建uniapp项目时,可以考虑一下目录结构
在这里插入图片描述

	// 这里是小程序分包模块,具体需不需要分包,自行判定……
	 "subPackages": [
	 	   {
	 	    "root": "MyPages", //分包根目录 文件夹名
	 	    "pages": [
	 	        {
	 	            "path": "My/index",  // 分包页面路径,相对与分包根目录
	 	            "style": {
	 	                "navigationBarTitleText": "我的",
	 	                "navigationStyle": "custom",
	 	                "navigationBarTextStyle": "white"
	 	            }
	 	        }
	 	    ]
	 	}
	 ],

✒️总结

在小程序开发过程中,解决主包体积过大问题对于提升小程序性能和用户体验至关重要。通过合理运用官方优化指南,尤其是采用 Uniapp 分包策略,我们能够有效地应对这一挑战。希望本文能为广大开发者提供有益的参考,助力大家打造更高效、流畅的小程序。如果这篇文章对你有所帮助,不妨点个赞鼓励一下。若你对前端开发或者 Python 感兴趣,欢迎持续关注我的个人主页前端初见,让我们一起探讨技术,共同进步。如果这篇【文章】有帮助到你💖,希望可以给我点个赞👍,创作不易,如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖,咱们一起探讨和努力!!!
👨‍🔧 个人主页 : 前端初见

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

前端初见

打赏一下,解锁更多有趣内容

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

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

打赏作者

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

抵扣说明:

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

余额充值