站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?

时间:2022-01-04 [网络编程]作者:访客 浏览:66 次

小程序大小超限除了分包还能怎么做?有什么办法能避免大小超过限制的情况?下面本篇文章给大家介绍一下避免和解决大小限制的方法,希望对大家有所帮助!

小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?  2

前几天一个刚入行的朋友为微信问我提交小程序代码提示太大了不能上传是什么原因?怎么解决?
当然分包能解决微信小程序几乎所有的提交大小限制问题,但是我还是让他把提示内容发给我。我一看也就超出了四五百kb,用分包那不是大材小用就让他把静态资源压缩一下就搞定了,但是后面我想想分包除了能解决大小这个问题还有什么好处呐?还有什么办法能避免大小超过限制的情况?

正文

当前微信小程序大小限制以及为什么要限制大小:

1️⃣先看一下当前微信小程序对于大小方面的相关限制:
1.不限制分包的数量;
2.所有分包的大小不能超过20m;
3.单个包的大小不能超过2m;

2️⃣那么为什么微信小程序要对大小做限制?
因为小程序的设计初衷就是用完即走,轻量化应用。不建议将它当成一个app来设计,所以考虑到启动速度等方面所以才对大小做了限制。

避免和解决大小限制有什么办法:

知道了上面的相关限制,那么我们可以从开发的过程去尽量避免我们的小程序大小超过2m(当然是那种商城啥的量级很大的当我没说)

1.使用第三方库尽量按需加载

比如说像在项目里面使用echarts,通常我们用到的可能也有几种图标,所以在安装的时候没必要将echarts全部下载,直接在echarts网在线定制可以节省不止一星半点的大小(echarts中国地图有问题不推荐使用哦)像我们使用的一些ui库类似,能按需引入就按需引入不能按需引入我们就换一个

在这里推荐一些微信小程序常用的UI库合集

1、网WeUI组件库

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?  2

2、ColorUI

https://github.com/weilanwl/ColorUI

小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?  2

3、Vant Weapp UI

https://youzan.github.io/vant-weapp/#/intro

小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?  2

4、iView UI

https://weapp.iviewui.com/docs/guide/start

小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?  2

5、TaroUI

https://taro-ui.jd.com/#/docs/introduction

小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?  2

擦,怎么调整图片大小这个

2.压缩图片等静态文件

项目中肯定会用到很多的图片,一张图片通常情况下设计会给我们二倍图、三倍图,让我们根据不同的分辨率去展示不同的倍图。其实粗暴的方法我们不管什么分辨率都可以都使用三倍图(不推荐使用哦),然后把图片无损压缩一下,一般能减小图片百分之七十的大小。
在这里推荐一个图片压缩的地址(https://tinypng.com/)

3.静态资源放云服务

减少静态资源在打包文件里面占用的体积,还可以把项目里面使用的静态文件放在OSS上面,可以使用CDN加速还可以减少代码大小。如果要自己弄云服务器放静态资源,建议薅七牛云的羊毛。
注册一个七牛云账号->找到所有产品中的对象存储->上传图片->复制链接
⚠️注意:有时候访问不了是需要配置防盗链,具体怎么配置大佬们自行百度。

4.使用分包

来到我们正统的解决大小限制的方法,先看一下文章刚开头提出的问题:分包除了能解决大小这个问题还有什么好处呐? 要回答这个问题先了解一下分包到底是怎么样工作的:在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。

那么上面的问题就好回答了: 对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。

那么我们要分包应该怎么做?:下面列举了我们常用的原生、uniapp、taro的分包写法,三种开发方式做分包除了配置文件名称是不同的,代码都是一样,关键的是项目目录和subpackages字段。

原生

// 在app.json的subpackages字段声明项目分包结构
{
  "pages":[			主包
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [	分包	
    {
      "root": "packageA",	
      "pages": [
        "pages/cat",	相对于root分包的路径
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    },
    {
        root:分包根目录
        name:分包别名,分包预下载时可以使用
        pages:分包页面路径数组,相对与分包根目录
        independent:true|false分包是否是独立分包
    }
  ]
}

uniapp

// 在pages.json的subpackages字段声明项目分包结构
代码同原生,关键就是subpackages字段

taro

// 在src目录下app.jsx中进行配置
代码同原生,关键就是subpackages字段

结语

微信小程序分包其实是一个很简单的操作,不过还有一个分包异步化,预下载、独立分包等知识还是需要各位大佬再用到的时候自己多研究。

最后说一下,前段时间参加了这个年度人气排行,其实我也知道这个榜单并不能代表什么,但是最后结果出来排54还是让我虚荣了一下。我觉得这个标志对自己的意义就是督促我在新的一年输出更高质量的文章,让自己真的配得上这个称号,各位大佬我们一块加油。

最后祝各位大佬学习进步,事业有成!

【相关学习推荐:小程序开发教程】

以上就是小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?的详细内容,更多请关注站长家园其它相关文章!

本文标签:

转载请注明来源:小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?

本文永久链接地址:https://www.adminjie.com/post/7209.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 数据链路层中的数据块常被称为什么

      数据链路层中的数据块常被称为什么

      数据链路层中的数据块常被称为“帧”,帧是数据链路层的传送单位。为了使传输中发生差错后只将有错的有限数据进行重发,数据链路层将比特流组合成以太帧为单位传送;每个帧...

    • docker连接mysql报错2003怎么办

      docker连接mysql报错2003怎么办

      解决方法:1、进入到docker的mysql容器中,并且利用“GRANTALLON.TO‘root’@’%’;”给用户进行授权;2、刷新权限后利用“A...

    • docker哪个版本内置swarm

      docker哪个版本内置swarm

      从“docker1.12.0”版本开始内置swarm;swarm是用于管理docker集群的平台,采用go语言完成的开发,从“1.12.0”版本开始,“Doc...

    • 计算机的软件系统分为几类

      计算机的软件系统分为几类

      计算机的软件系统可分为2类:1、系统软件,是指控制和协调计算机及外部设备,支持应用软件开发和运行的系统,是无需用户干预的各种程序的集合,主要功能是调度,监控和维...

    • docker exec是什么意思

      docker exec是什么意思

      在docker中,exec是一个命令,表达的意思是在一个运行状态下的容器里执行命令;利用该命令能让在容器里和宿主机上一样执行命令,当参数设置为“-d”时,表示在...

    热门文章