小程式大小超限除了分包還能怎麼做？如何避免和解決大小限制？

小程式大小超限除了分包還能怎麼做？有什麼辦法能避免大小超過限制的情況？以下這篇文章為大家介紹避免和解決大小限制的方法，希望對大家有幫助！

    前幾天一個剛入行的朋友為微信問我提交小程式碼提示太大了不能上傳是什麼原因？怎麼解決？
    當然分包能解決微信小程式幾乎所有的提交大小限制問題，但我還是請他把提示內容寄給我。我一看也就超出了四五百kb，用分包那不是大材小用就讓他把靜態資源壓縮一下就搞定了，但是後面我想想分包除了能解決大小這個問題還有什麼好處吶？還有什麼辦法能避免大小超過限制的情況？

正文：

#當前微信小程式大小限制以及為什麼要限制大小：

    1️⃣先看一下目前微信小程式對大小上的相關限制：
        1.不限制相關限制的數量；
        2.所有分包的大小不能超過20m；#o# ;

    2️⃣那麼為什麼微信小程式要限制大小？

        因為小程式的設計初衷就是用完即走，輕量化應用。不建議將它當成一個app來設計，所以考慮到啟動速度等方面所以才對大小做了限制。

避免並解決大小限制有什麼辦法：

    知道了​​上述的相關限制，那麼我們可以從發展的過程中盡量避免我們的小程式大小超過2m(當然是那種商城啥的量級很大的當我沒說)

#1.使用第三方函式庫盡量按需載入

#    比如說像在專案裡面使用

echarts,通常我們用到的可能也有幾種圖標，所以在安裝的時候沒必要將echarts全部下載，直接在echarts官網在線定制可以節省不只一星半點的大小(echarts中國地圖有問題不推薦使用哦)像我們使用的一些ui庫類似，能按需引入就按需引入不能按需引入我們就換一個

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

1、官方WeUI元件庫

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

#2、ColorUI

https://github.com/weilanwl/ ColorUI

3、Vant Weapp UI

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

4、iView UI

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

5、TaroUI

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

擦，怎麼調整圖片大小這個

#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還是讓我虛榮了一下。我覺得這個標誌對自己的意義就是督促我在新的一年輸出更高品質的文章，讓自己真的配得上這個稱號，各位大佬我們一塊加油。

    最後祝福各位大佬學習進步，事業有成！

【相關學習推薦：小程式開發教學】

以上是小程式大小超限除了分包還能怎麼做？如何避免和解決大小限制？的詳細內容。更多資訊請關注PHP中文網其他相關文章！