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

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

解決方法：

優(yōu)化代碼沼溜，刪除掉不用的代碼
圖片壓縮或上傳服務(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引入旅挤，也可減少主包大小

分包加載

官方推出小程序分包加載這一功能踢关，對于萬千小程序開發(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'
        ]
      }
    ]
  }