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

解決方法：

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

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

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

也可以將圖片上傳到服務(wù)器上，進(jìn)行外鏈引用， 我們使用的是阿里云oss存儲(chǔ)， 另外也可以通過(guò)圖片托管平臺(tái)對(duì)圖片進(jìn)行托管， 我找到的的圖片托管平臺(tái)：點(diǎn)擊此處；

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

3. 分包加載

官方推出小程序分包加載這一功能，對(duì)于萬(wàn)千小程序開(kāi)發(fā)者來(lái)說(shuō)這無(wú)疑是天大的喜訊，關(guān)于如何分包，微信官方文檔已經(jīng)解釋的十分清楚，在進(jìn)行分包之前建議認(rèn)真閱讀官方文檔。

對(duì)于用戶(hù)來(lái)說(shuō)，小程序的加載流程變成了：

1，首次啟動(dòng)，加載小程序主包，顯示主包內(nèi)的頁(yè)面
2，如果用戶(hù)進(jìn)入了某個(gè)分包的頁(yè)面，再加載這個(gè)對(duì)應(yīng)分包，顯示分包的頁(yè)面

采用分包加載，對(duì)于開(kāi)發(fā)者而言，能使小程序有更大的代碼體積，承載更多的功能和服務(wù)，對(duì)于用戶(hù)而言，可以更快的打開(kāi)小程序，同時(shí)再不影響啟動(dòng)速度的前提下使用更多功能。

分包的劃分：

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

在分包劃分時(shí)，應(yīng)該注意以下事項(xiàng)：

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

分包的配置：（微信客戶(hù)端 6.6.0，基礎(chǔ)庫(kù) 1.7.3 及以上版本開(kāi)始支持。）

當(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

開(kāi)發(fā)者通過(guò)在 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è)小程序所有分包大小不超過(guò) 20M
單個(gè)分包/主包大小不能超過(guò) 2M

低版本兼容：

由微信后臺(tái)編譯來(lái)處理舊版本客戶(hù)端的兼容，后臺(tái)會(huì)編譯兩份代碼包，一份是分包后代碼，另外一份是整包的兼容代碼。 新客戶(hù)端用分包，老客戶(hù)端還是用的整包，完整包會(huì)把各個(gè) subpackage 里面的路徑放到 pages 中。

示例項(xiàng)目：

下載 小程序示例（分包加載版）源碼

接下來(lái)簡(jiǎn)單介紹一下在不同框架中的使用：

1、在uni app中：

uni app通過(guò)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": "首頁(yè)"
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "個(gè)人中心"
      }
    }
  ],
  "subPackages": [{
    "root": "orderPackages",
    "pages": [{
        "path": "pages/goodsDetail/goodsDetail",
        "style": {
          "navigationStyle": "custom"
        }
      },
      {
        "path": "pages/myorder/myorder",
        "style": {
          "navigationBarTitleText": "我的訂單"
        }
      }
    ]
  }]
}

在頁(yè)面中跳轉(zhuǎn)分包頁(yè)面路徑：

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'
        ]
      }
    ]
  }

在頁(yè)面中跳轉(zhuǎn)分包頁(yè)面路徑：

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

以上只羅列了uni app和taro框架分包加載的步驟， 原生小程序分包方法根據(jù)官方文檔即可快速實(shí)現(xiàn)，小程序框架雖多， 大都大同小異，如果后續(xù)有使用其他框架進(jìn)行開(kāi)發(fā)，會(huì)進(jìn)行補(bǔ)充。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-489257.html

到了這里，關(guān)于微信小程序包大小超過(guò)2M的解決方法—分包加載的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！