小程序的包被限制在2M以下， 超出的時候點擊預覽， 發現報錯：
Error: 代碼包大小為 3701 kb，上限為 2048 kb，請刪除文件后重試
解決方法：
1. 優化代碼， 刪除掉不用的代碼
2. 圖片壓縮或上傳服務器
一般圖片所占空間較大，盡量不要放在小程序本地文件夾中，如果圖片不多我們也可以對圖片進行壓縮，我經常使用的圖片壓縮平台：點擊這里；
也可以將圖片上傳到服務器上，進行外鏈引用， 我們使用的是阿里雲oss存儲， 另外也可以通過圖片托管平台對圖片進行托管， 我找到的的圖片托管平台：點擊此處；
另外， 通過cli命令創建的uni app項目，可將圖片或字體圖標放入assets文件夾下，通過require引入， 也可減少主包大小
3. 分包加載
官方推出小程序分包加載這一功能，對於萬千小程序開發者來說這無疑是天大的喜訊，關於如何分包，微信官方文檔已經解釋的十分清楚，在進行分包之前建議認真閱讀官方文檔。
對於用戶來說，小程序的加載流程變成了：
1，首次啟動，加載小程序主包，顯示主包內的頁面
2，如果用戶進入了某個分包的頁面，再加載這個對應分包，顯示分包的頁面
采用分包加載，對於開發者而言，能使小程序有更大的代碼體積，承載更多的功能和服務，對於用戶而言，可以更快的打開小程序，同時再不影響啟動速度的前提下使用更多功能。
分包的划分：
在配置前首先需要開發者規划下各個分包需要容納的內容，建議開發者按照功能划分的原則，將同一個功能下的頁面和邏輯放置於同一個目錄下，對於一些跨功能之間的公共邏輯，將其放置於主包下，這樣可以確保在分包引用這部分功能時，這部分的邏輯一定存在。
在分包划分時，應該注意以下事項：
1，避免分包與分包之間引用上的耦合。因為分包的加載是用戶操作觸發的，並不能確保其分包加載時，
另一個分包就一定存在，這個時候可能導致js邏輯異常，某些資源找不到的錯誤；
2，一些公共用到的自定義組件，需要放在主包內；
3，使用小程序自帶的tab切換時，list中的頁面需要放在主包內。
分包的配置：（微信客戶端 6.6.0，基礎庫 1.7.3 及以上版本開始支持。）
當理清了分包的划分后，就可以進行分包的配置了，這一步並不復雜。
假設支持分包的小程序目錄結構如下：
├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils
開發者通過在 app.jsonsubPackages字段聲明項目分包結構：
{ "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ] }
目前小程序分包大小有以下限制：
- 整個小程序所有分包大小不超過 20M
- 單個分包/主包大小不能超過 2M
低版本兼容：
由微信后台編譯來處理舊版本客戶端的兼容，后台會編譯兩份代碼包，一份是分包后代碼，另外一份是整包的兼容代碼。 新客戶端用分包，老客戶端還是用的整包，完整包會把各個 subpackage 里面的路徑放到 pages 中。
示例項目：
接下來簡單介紹一下在不同框架中的使用：
1、在uni app中：
uni app通過cli初始化的小程序目錄結構如下：
├── 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": "個人中心" } } ], "subPackages": [{ "root": "orderPackages", "pages": [{ "path": "pages/goodsDetail/goodsDetail", "style": { "navigationStyle": "custom" } }, { "path": "pages/myorder/myorder", "style": { "navigationBarTitleText": "我的訂單" } } ] }] }
在頁面中跳轉分包頁面路徑：
uni.navigateTo({ url: `/orderPackages/pages/order/order` })
2、在taro中：
taro初始化的小程序目錄結構如下：
├── 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' ] } ] }
在頁面中跳轉分包頁面路徑：
taro.navigateTo({ url: `/orderPackages/pages/order/order` })
以上只羅列了uni app和taro框架分包加載的步驟， 原生小程序分包方法根據官方文檔即可快速實現，小程序框架雖多， 大都大同小異，如果后續有使用其他框架進行開發，會進行補充。