宝子,你知道小程序代码大小超限除了分包还能怎么做吗?

阴雨西湖边

大佬们好,我是季夏廿月(改名了改名了,是nian九哦),专业切图仔。🦞

🌲🌲🌲 前言

    前几天一个刚入行的朋友为微信问我提交小程序代码提示太大了不能上传是什么原因?怎么解决?

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

🍀🍀🍀 正文

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

    1️⃣先看一下当前微信小程序对于大小方面的相关限制:

        1.不限制分包的数量;

        2.所有分包的大小不能超过20m;

        3.单个包的大小不能超过2m;

    2️⃣那么为什么微信小程序要对大小做限制?

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

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

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

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

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

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

1.官方WeUI组件库

2.ColorUI

3.Vant Weapp UI

4.iView UI

5.TaroUI

不能发二维码,大家自己点链接查看

🃒2.压缩图片等静态文件

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

在这里推荐一个图片压缩的地址图片压缩

🃃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字段

💐💐💐 结语

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容