文章目录
🟢一、Uniapp分包
我们无论在使用uniapp开发小程序和微信原生开发在真机调试或发布上线时经常会遇到这个提示,在使用 Uniapp 开发小程序,甚至是进行微信原生开发时,大家想必都遇到过这样的困扰:在真机调试或者发布上线的过程中,频繁收到关于小程序主包体积的提示。这一问题严重影响了小程序的性能和用户体验,亟待解决。
官方优化
微信官方为我们提供了一系列小程序性能优化的建议,这些指南极具参考价值。
- 小程序性能优化指南:详细阐述了小程序性能优化的各个方面,从代码结构到资源加载等多维度给出优化方向,可参考小程序性能优化指南
- 组件启用按需引入:这是减少资源加载的有效手段,能显著优化小程序的启动速度。更多关于按需引入的信息,可查阅组件启用按需引入
1、原因: 通常是由于我们的小程序主包体积过大,由于代码中的静态资源或者图片大小超了200k以及主包的体积超出1.5M而带来的提示
通常,小程序主包体积过大的原因主要有两点:一是代码中的静态资源,尤其是图片,若单个大小超过 200k,会显著增加主包体积;二是整个主包体积一旦超出微信官方规定的 1.5M,就会触发相关提示。这不仅会导致小程序加载缓慢,还可能在某些情况下无法正常上线。
解决
解决方案1:
在项目开发工具中,有两个简单的操作可以暂时缓解主包体积过大的问题。将 “将 JS 编译成 ES5” 和 “上传代码时自动压缩脚本文件” 这两个选项勾选,然后再次进行预览,你会发现相关提示可能不再出现。然而,这只是权宜之计,并不能从根本上解决问题,长期来看,我们还需要采取更有效的措施。
解决方案2- 长久之计:Uniapp 分包策略:
分包是一种将小程序的代码和资源按功能模块进行拆分的技术,能有效减小主包体积,提升小程序的加载性能。在pages.json文件中,我们可以按照以下格式进行分包配置,接下来就详细讲解一下,nuiapp是如何进行分包的
- 在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感兴趣的朋友,请多多关注💖💖💖,咱们一起探讨和努力!!!
👨🔧 个人主页 : 前端初见