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

2024-06-11 03:17:35

小程序开发者们看到这样的错误是不是很头疼？
我来总结一下解决这个问题的方法

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

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

1压缩静态文件大小

举例，一些icon图标、临时的静态图片加起来可能占用了几百KB
推荐一个压缩图片的网址https://tinypng.com/，一次限制20张，一次把它们丢进去，压缩好了再打包下载，替换到你的static文件夹
丢几个图片进去试一下，压缩后节省了78%的空间！点击download all下载全部，会下载一个压缩包，解压后替换到本地文件夹即可。

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。

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

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

原因：

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

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

微信小程序android错误,微信小程序首页数据初始化失败的解决方法
一. 问题描述用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认 ...
开发微信小程序中遇到的坑及解决方法
开发微信小程序中遇到的坑及解决方法参考文章: (1)开发微信小程序中遇到的坑及解决方法 (2)https://www.cnblogs.com/feiye512/p/6070052.html ...
微信小程序访问豆瓣电影api400错误解决方法
微信小程序访问豆瓣电影api400错误解决方法参考文章: (1)微信小程序访问豆瓣电影api400错误解决方法 (2)https://www.cnblogs.com/bubbleStar/p/610 ...
微信小程序，垂直居中问题的经典解决方法
选自<微信小程序开发-入门与实践>,雷磊老师编著在编写CSS过程中,很多时候会面临如何将两个元素居中的问题,对于这种情况,在此书的6.8节中有明确的解释,这里将记录下方法. //post ...
微信小程序图片自适应宽高比例显示解决方法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 解决方案一:写固定宽度,然后使用 image 组件中 mode 属性的 widthFix : 先看效果 ...
微信小程序不能使用wx.getlocation的解决方法
如果不能使用wx.getlocation API可能存在以下几方面问题: 1.没在小程序开发平台申请开通wx.getlocation API: 2.没有在app.json文件中声明配置: " ...
微信小程序map 动态修改markers的解决方法
微信小程序map动态markers的解决方法先上效果图这里演示点击标记点,改变他的气泡背景颜色和字体颜色 1.动态修改数据,需要用到 this.setData(), 2.markers 是一个数组 ...
uniApp开发微信小程序减少包大小
小程序规定每个包不能大于2m超出会导致无法真机调试和打包发布. 说下我目前在用的几个优化的方案 1.uniApp运行时勾选小程序运行压缩代码 (必须) 2.使用分包具体参考uniApp分包文档将不 ...
微信小程序wx.getLocation()报错以及解决方法
问题介绍使用wx.getLocation()来获取当前地理位置的经纬度主要代码如下: wx.getLocation({success: function(res) {//经度let lat = r ...
微信小程序hidden不生效原因及解决方法
下面代码不生效: <template><view hidden="false" class="noObj">本月暂无制定目标计划< ...

最新文章

热门文章