uniapp下微信小程序超过2MB大小限制的解决方法

uniapp下微信小程序超过2MB大小限制的解决方法_第1张图片
小程序开发者们看到这样的错误是不是很头疼?
我来总结一下解决这个问题的 方法

微信小程序超过2MB大小限制

    • 1压缩静态文件大小
    • 2缩减大量重复的css代码
    • 3注释掉pages.json某些代码
    • 4程序分包
    • 5不要在uni.scss中引用样式!

1压缩静态文件大小

举例,一些icon图标、临时的静态图片加起来可能占用了几百KB
推荐一个压缩图片的网址https://tinypng.com/,一次限制20张,一次把它们丢进去,压缩好了再打包下载,替换到你的static文件夹
uniapp下微信小程序超过2MB大小限制的解决方法_第2张图片丢几个图片进去试一下,压缩后节省了78%的空间!点击download all下载全部,会下载一个压缩包,解压后替换到本地文件夹即可。uniapp下微信小程序超过2MB大小限制的解决方法_第3张图片

2缩减大量重复的css代码

view中style重复过多的用class(当然这样也就减少个几KB~几十KB),每个页面都有重复的class就在全局css文件里写样式

3注释掉pages.json某些代码

某些页面如果急着手机调试,但是还是超过2MB,可以先在pages.json里面注释掉几个页面再重新编译

4程序分包

比如在uniapp中小程序项目的文件夹的页面本来是存在/pages下的,现在要把它们分包成/pagesA和/pagesB
自己去微信小程序文档或者uniapp文档看吧https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html。
uniapp下微信小程序超过2MB大小限制的解决方法_第4张图片

5不要在uni.scss中引用样式!

如果你在uni.scss中引用了某个样式库,把它注释掉试试
在这里插入图片描述有个项目引用了样式库,但是发现并没有用到它,当我把一些静态文件清理掉的时候,发现突然编译大小减少了600KB,从原来的2081KB编程1469KB,绝了!

原因:

uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中,造成微信程序包太大,
故uni.scss只建议放scss变量名相关样式,其他的样式可以通过main.js或者App.vue引入

你可能感兴趣的:(微信小程序,小程序,微信,css,uni-app)