微信小程序大小超限除了分包怎么避免和解決

這篇“微信小程序大小超限除了分包怎么避免和解決”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序大小超限除了分包怎么避免和解決”文章吧。

當(dāng)前微信小程序大小限制以及為什么要限制大?。?/h4>

1??先看一下當(dāng)前微信小程序?qū)τ诖笮》矫娴南嚓P(guān)限制：
       1.不限制分包的數(shù)量；
       2.所有分包的大小不能超過20m；
       3.單個(gè)包的大小不能超過2m；

2??那么為什么微信小程序要對(duì)大小做限制？
       因?yàn)樾〕绦虻脑O(shè)計(jì)初衷就是用完即走，輕量化應(yīng)用。不建議將它當(dāng)成一個(gè)app來設(shè)計(jì)，所以考慮到啟動(dòng)速度等方面所以才對(duì)大小做了限制。

避免和解決大小限制有什么辦法：

知道了上面的相關(guān)限制，那么我們可以從開發(fā)的過程去盡量避免我們的小程序大小超過2m(當(dāng)然是那種商城啥的量級(jí)很大的當(dāng)我沒說)

1.使用第三方庫盡量按需加載

比如說像在項(xiàng)目里面使用echarts,通常我們用到的可能也有幾種圖標(biāo)，所以在安裝的時(shí)候沒必要將echarts全部下載，直接在echarts官網(wǎng)在線定制可以節(jié)省不止一星半點(diǎn)的大小(echarts中國(guó)地圖有問題不推薦使用哦)像我們使用的一些ui庫類似，能按需引入就按需引入不能按需引入我們就換一個(gè)

在這里推薦一些微信小程序常用的UI庫合集

1、官方WeUI組件庫

2、ColorUI

3、Vant Weapp UI

4、iView UI

5、TaroUI

2.壓縮圖片等靜態(tài)文件

項(xiàng)目中肯定會(huì)用到很多的圖片，一張圖片通常情況下設(shè)計(jì)會(huì)給我們二倍圖、三倍圖，讓我們根據(jù)不同的分辨率去展示不同的倍圖。其實(shí)粗暴的方法我們不管什么分辨率都可以都使用三倍圖(不推薦使用哦),然后把圖片無損壓縮一下，一般能減小圖片百分之七十的大小。
3.靜態(tài)資源放云服務(wù)

減少靜態(tài)資源在打包文件里面占用的體積，還可以把項(xiàng)目里面使用的靜態(tài)文件放在OSS上面，可以使用CDN加速還可以減少代碼大小。
??注意：有時(shí)候訪問不了是需要配置防盜鏈，具體怎么配置大佬們自行百度。

4.使用分包

來到我們正統(tǒng)的解決大小限制的方法，先看一下文章剛開頭提出的問題：分包除了能解決大小這個(gè)問題還有什么好處吶？ 要回答這個(gè)問題先了解一下分包到底是怎么樣工作的：在小程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)頁面，當(dāng)用戶進(jìn)入分包內(nèi)某個(gè)頁面時(shí)，客戶端會(huì)把對(duì)應(yīng)分包下載下來，下載完成后再進(jìn)行展示。

那么上面的問題就好回答了: 對(duì)小程序進(jìn)行分包,可以優(yōu)化小程序首次啟動(dòng)的下載時(shí)間,以及在多團(tuán)隊(duì)共同開發(fā)時(shí)可以更好的解耦協(xié)作。

那么我們要分包應(yīng)該怎么做？：下面列舉了我們常用的原生、uniapp、taro的分包寫法，三種開發(fā)方式做分包除了配置文件名稱是不同的，代碼都是一樣，關(guān)鍵的是項(xiàng)目目錄和subpackages字段。

原生：

// 在app.json的subpackages字段聲明項(xiàng)目分包結(jié)構(gòu)
{
  "pages":[			主包
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [	分包	
    {
      "root": "packageA",	
      "pages": [
        "pages/cat",	相對(duì)于root分包的路徑
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    },
    {
        root:分包根目錄
        name:分包別名,分包預(yù)下載時(shí)可以使用
        pages:分包頁面路徑數(shù)組,相對(duì)與分包根目錄
        independent:true|false分包是否是獨(dú)立分包
    }
  ]
}

uniapp：

// 在pages.json的subpackages字段聲明項(xiàng)目分包結(jié)構(gòu)
代碼同原生，關(guān)鍵就是subpackages字段

taro：

// 在src目錄下app.jsx中進(jìn)行配置
代碼同原生，關(guān)鍵就是subpackages字段

以上就是關(guān)于“微信小程序大小超限除了分包怎么避免和解決”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。