微信小程序包大小超過2M的解決方法—分包加載

小程序的包被限制在2M以下, 超出的時(shí)候點(diǎn)擊預(yù)覽户盯, 發(fā)現(xiàn)報(bào)錯(cuò):
Error: 代碼包大小為 3701 kb端壳,上限為 2048 kb拒垃,請刪除文件后重試

解決方法:

  1. 優(yōu)化代碼沼溜, 刪除掉不用的代碼

  2. 圖片壓縮或上傳服務(wù)器

一般圖片所占空間較大,盡量不要放在小程序本地文件夾中,如果圖片不多我們也可以對圖片進(jìn)行壓縮,我經(jīng)常使用的圖片壓縮平臺:點(diǎn)擊這里;

也可以將圖片上傳到服務(wù)器上耕蝉,進(jìn)行外鏈引用, 我們使用的是阿里云oss存儲夜只, 另外也可以通過圖片托管平臺對圖片進(jìn)行托管垒在, 我找到的的圖片托管平臺:點(diǎn)擊此處;

另外扔亥, 通過cli命令創(chuàng)建的uni app項(xiàng)目场躯,可將圖片或字體圖標(biāo)放入assets文件夾下,通過require引入旅挤, 也可減少主包大小

  1. 分包加載

官方推出小程序分包加載這一功能踢关,對于萬千小程序開發(fā)者來說這無疑是天大的喜訊,關(guān)于如何分包粘茄,微信官方文檔已經(jīng)解釋的十分清楚签舞,在進(jìn)行分包之前建議認(rèn)真閱讀官方文檔。

對于用戶來說,小程序的加載流程變成了:

1儒搭,首次啟動撒会,加載小程序主包,顯示主包內(nèi)的頁面
2师妙,如果用戶進(jìn)入了某個(gè)分包的頁面,再加載這個(gè)對應(yīng)分包屹培,顯示分包的頁面

采用分包加載默穴,對于開發(fā)者而言,能使小程序有更大的代碼體積褪秀,承載更多的功能和服務(wù)蓄诽,對于用戶而言,可以更快的打開小程序媒吗,同時(shí)再不影響啟動速度的前提下使用更多功能仑氛。

分包的劃分:

在配置前首先需要開發(fā)者規(guī)劃下各個(gè)分包需要容納的內(nèi)容,建議開發(fā)者按照功能劃分的原則闸英,將同一個(gè)功能下的頁面和邏輯放置于同一個(gè)目錄下锯岖,對于一些跨功能之間的公共邏輯,將其放置于主包下甫何,這樣可以確保在分包引用這部分功能時(shí)出吹,這部分的邏輯一定存在。

在分包劃分時(shí)辙喂,應(yīng)該注意以下事項(xiàng):

1捶牢,避免分包與分包之間引用上的耦合。因?yàn)榉职募虞d是用戶操作觸發(fā)的巍耗,并不能確保其分包加載時(shí)秋麸,
另一個(gè)分包就一定存在,這個(gè)時(shí)候可能導(dǎo)致js邏輯異常炬太,某些資源找不到的錯(cuò)誤灸蟆;
2,一些公共用到的自定義組件亲族,需要放在主包內(nèi)次乓;
3,使用小程序自帶的tab切換時(shí)孽水,list中的頁面需要放在主包內(nèi)票腰。

分包的配置:(微信客戶端 6.6.0,基礎(chǔ)庫 1.7.3 及以上版本開始支持女气。)

當(dāng)理清了分包的劃分后杏慰,就可以進(jìn)行分包的配置了,這一步并不復(fù)雜。

假設(shè)支持分包的小程序目錄結(jié)構(gòu)如下:

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

開發(fā)者通過在 app.jsonsubPackages字段聲明項(xiàng)目分包結(jié)構(gòu):

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

目前小程序分包大小有以下限制:

整個(gè)小程序所有分包大小不超過 20M
單個(gè)分包/主包大小不能超過 2M

低版本兼容:

由微信后臺編譯來處理舊版本客戶端的兼容缘滥,后臺會編譯兩份代碼包轰胁,一份是分包后代碼,另外一份是整包的兼容代碼朝扼。 新客戶端用分包赃阀,老客戶端還是用的整包,完整包會把各個(gè) subpackage 里面的路徑放到 pages 中擎颖。

示例項(xiàng)目:

下載 小程序示例(分包加載版)源碼

接下來簡單介紹一下在不同框架中的使用:

1榛斯、在uni app中:

uni app通過cli初始化的小程序目錄結(jié)構(gòu)如下:

 ├── src
    ├── main.js
    ├── App.vue
    ├── pages.json
    ├── manifest.json
    ├── orderPackages
    │   └── pages
    │       ├── goodsDetail
    │       └── myorder
    ├── pages
    │   ├── index
    │   └── user
    └── utils

需在pages.json中配置 subPackages 字段::

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首頁"
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "個(gè)人中心"
      }
    }
  ],
  "subPackages": [{
    "root": "orderPackages",
    "pages": [{
        "path": "pages/goodsDetail/goodsDetail",
        "style": {
          "navigationStyle": "custom"
        }
      },
      {
        "path": "pages/myorder/myorder",
        "style": {
          "navigationBarTitleText": "我的訂單"
        }
      }
    ]
  }]
}

在頁面中跳轉(zhuǎn)分包頁面路徑:

uni.navigateTo({
     url: `/orderPackages/pages/order/order`
})
2、在taro中:

taro初始化的小程序目錄結(jié)構(gòu)如下:

├── src
    ├── app.js
    ├── app.scss
    ├── index.html
    ├── packageA
    │   └── pages
    │       ├── goodsDetail
    │       └── myorder
    ├── pages
    │   ├── index
    │   └── user
    └── utils

需在app.js中配置 subPackages 字段:

config = {
    pages: [
      'pages/index/index',
      'pages/user/user'
    ],
    subPackages: [
      {
        'root': 'packageA',
        'pages': [
          'pages/goodsDetail/goodsDetail',
          'pages/myorder/myorder'
        ]
      }
    ]
  }

在頁面中跳轉(zhuǎn)分包頁面路徑:

taro.navigateTo({
     url: `/orderPackages/pages/order/order`
})

以上只羅列了uni app和taro框架分包加載的步驟搂捧, 原生小程序分包方法根據(jù)官方文檔即可快速實(shí)現(xiàn)驮俗,小程序框架雖多, 大都大同小異允跑,如果后續(xù)有使用其他框架進(jìn)行開發(fā)王凑,會進(jìn)行補(bǔ)充。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末聋丝,一起剝皮案震驚了整個(gè)濱河市索烹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌弱睦,老刑警劉巖术荤,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異每篷,居然都是意外死亡瓣戚,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門焦读,熙熙樓的掌柜王于貴愁眉苦臉地迎上來子库,“玉大人,你說我怎么就攤上這事矗晃÷匦幔” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵张症,是天一觀的道長仓技。 經(jīng)常有香客問我,道長俗他,這世上最難降的妖魔是什么脖捻? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮兆衅,結(jié)果婚禮上地沮,老公的妹妹穿的比我還像新娘嗜浮。我一直安慰自己,他們只是感情好摩疑,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布危融。 她就那樣靜靜地躺著,像睡著了一般雷袋。 火紅的嫁衣襯著肌膚如雪吉殃。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天楷怒,我揣著相機(jī)與錄音蛋勺,去河邊找鬼。 笑死率寡,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的倚搬。 我是一名探鬼主播冶共,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼每界!你這毒婦竟也來了捅僵?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤眨层,失蹤者是張志新(化名)和其女友劉穎庙楚,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體趴樱,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡馒闷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了叁征。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片纳账。...
    茶點(diǎn)故事閱讀 40,872評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖捺疼,靈堂內(nèi)的尸體忽然破棺而出疏虫,到底是詐尸還是另有隱情,我是刑警寧澤啤呼,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布卧秘,位于F島的核電站,受9級特大地震影響官扣,放射性物質(zhì)發(fā)生泄漏翅敌。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一惕蹄、第九天 我趴在偏房一處隱蔽的房頂上張望哼御。 院中可真熱鬧坯临,春花似錦、人聲如沸恋昼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽液肌。三九已至挟炬,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間嗦哆,已是汗流浹背谤祖。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留老速,地道東北人粥喜。 一個(gè)月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像橘券,于是被迫代替她去往敵國和親额湘。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容