注册

uniapp小程序包过大的问题

uniapp小程序包过大的问题


前言


微信小程序为了优化用户体验,将小程序首次加载的数据限制在了2M以内(推荐1.5M),剩下的数据采取分包(懒加载)的方式进行引用。


一 开启分包subPackages


manifest.json文件中添加"optimization" : {"subPackages" : true}来开启分包。


1680316261345.png

然后可以在pages.json中添加subPackages来进行分包页面的配置。


当然,uniapp还贴心的为我们提供了便捷的创建方式:


1680316550191.png

二 静态资源优化


小程序中尽量少使用大背景图片,这样会占据大量包资源。微信小程序推荐使用网络图片资源来减少主包资源。因为某种原因,我把图片放进了主包里,但是要进行图片压缩。这里推荐一个图片压缩网站tintpng


image.png

可以看到图片被压缩了百分之62,并且可以批量处理,就很方便。


三 去除冗余代码


这里你以为我会说提升代码质量巴拉巴拉,其实不然。接下来要说的,才是我要写这篇文章的真正原因!!!


如果你使用uniapp开发微信小程序,并直接在微信开发小程序工具中上传,你会发现你的包会离奇的大


image.png

在代码依赖分析中我们可以发现,一个叫common的文件竟有1.3M多,而这个并非是我自己的文件。


image.png

后来发现这应该是uniapp开发时的编译文件,删掉就可以了。


还有一个方法,在uniapp运行到小程序中,时勾选运行时是否开启代码压缩,此时再看代码其实也可以符合要求了:


image.png

四 通过uniapp上传发布


uniapp也提供了通过cli来进行发布小程序的能力:


image.png

这里需要准备的是appId和微信小程序上传接口的key,并且要配置你上传时所在的网络IP,具体方法


结语


OK,当你看到这里,那么恭喜你,又多活了三分钟~respect!!!


作者:FineYoung
来源:juejin.cn/post/7216845797143969850

0 个评论

要回复文章请先登录注册