0

0

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

青灯夜游

青灯夜游

发布时间:2022-01-04 10:20:49

|

19414人浏览过

|

来源于掘金社区

转载

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

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

    前几天一个刚入行的朋友为微信问我提交小程序代码提示太大了不能上传是什么原因?怎么解决?
    当然分包能解决微信小程序几乎所有的提交大小限制问题,但是我还是让他把提示内容发给我。我一看也就超出了四五百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/

1.png

2、ColorUI

https://github.com/weilanwl/ColorUI

2.png

3、Vant Weapp UI

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

3.png

4、iView UI

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

4.png

牛面
牛面

牛面AI面试,大厂级面试特训平台

下载

5、TaroUI

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

5.png

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

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还是让我虚荣了一下。我觉得这个标志对自己的意义就是督促我在新的一年输出更高质量的文章,让自己真的配得上这个称号,各位大佬我们一块加油。

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

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

相关专题

更多
ECharts是什么
ECharts是什么

ECharts是基于JavaScript的开源可视化库,能够帮助开发者轻松地实现各种复杂的数据可视化效果,提供了丰富的图表类型和交互功能。本专题为大家提供ECharts是什么的相关的文章、下载、课程内容,供大家免费下载体验。

271

2023.08.04

echarts自适应大小设置
echarts自适应大小设置

使用ECharts的自适应大小设置可以使图表能够根据不同屏幕尺寸和设备进行自适应。一种是使用resize事件,在图表容器大小改变时重新渲染图表;另一种是使用CSS样式,通过设置图表容器的宽度和高度为百分比值,使图表容器根据父元素的大小进行自适应。根据实际需求选择合适的方法,可以使图表在不同设备上都能够良好地显示和交互 。

459

2023.09.13

github中文官网入口 github中文版官网网页进入
github中文官网入口 github中文版官网网页进入

github中文官网入口https://docs.github.com/zh/get-started,GitHub 是一种基于云的平台,可在其中存储、共享并与他人一起编写代码。 通过将代码存储在GitHub 上的“存储库”中,你可以: “展示或共享”你的工作。 持续“跟踪和管理”对代码的更改。

158

2026.01.21

微信是谁开发的
微信是谁开发的

微信是由张小龙所带领的腾讯广州研发中心产品团队打造开发的,并不是马化腾开发的,而腾讯公司总裁马化腾是在产品策划的邮件中确定这款产品的名称叫做“微信”的。想了解更多微信相关的内容,可阅读本专题下面的相关文章。

3748

2024.11.05

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2026

2024.08.16

轻量应用服务器和云服务器的区别
轻量应用服务器和云服务器的区别

随着科技的快速发展,越来越多的企业和个人开始依赖于服务器来托管其应用程序和网站。然而,在选择服务器时,很多人对轻量应用服务器和云服务器之间的差异不够了解。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

107

2023.07.27

注册云服务器的作用
注册云服务器的作用

注册云服务器的作用:1、可放置公司网站、电子商务平台、APP和其他应用程序等;2、使用云服务器来存储和共享数据,不仅高度安全,而且可以随时随地在线访问;3、当内存不够时,站长可自行增加,使资源充沛,保障了页面加载速度和优质的用户体验。想了解更多云服务器的相关内容,可以阅读本专题下面的文章。

230

2024.03.13

云服务器的全部用途
云服务器的全部用途

云服务器的用途广泛,包括网站托管、应用程序部署、数据存储和备份、虚拟化和容器化、大数据处理、游戏服务器以及开发测试环境等。想了解更多云服务器的相关内容,可以阅读本专题下面的文章。

453

2024.03.21

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 3.4万人学习

Excel 教程
Excel 教程

共162课时 | 13万人学习

Kotlin 教程
Kotlin 教程

共23课时 | 2.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号