微信小程式分包載入

摘要： 前言 對於一個展示型的小程式而言，勢必會存在著眾多的圖片來展示，而UI設計師給出的圖片大多數都會很大，這樣就會很大程度的佔據程式包的空間，而微信小程式在開發文件中明確指出，小程式的包大小必須限制在2M以內，超過大小，就算在開發者工具中都不能正常預覽。此時，解決問題的辦法大多有三種...

前言

• 對於一個展示型的小程式而言，勢必會存在著眾多的圖片來展示，而UI設計師給出的圖片大多數都會很大，這樣就會很大程度的佔據程式包的空間，而微信小程式在開發文件中明確指出，小程式的包大小必須限制在2M以內，超過大小，就算在開發者工具中都不能正常預覽。此時，解決問題的辦法大多有三種：

  1.將圖片的大小盡可能的壓縮，以保證程式包順利通過微信設定的大小閾值。（這樣會造成圖片的失真，而且並不能真正的解決問題）

  2.將圖片上傳到伺服器，程式碼中載入伺服器的網路圖片。（這不失為一種可靠的解決方案，這也是微信推薦使用網路圖片的一個原因，但是不能保證從伺服器拉取的資源能快速載入，不可控的因素很多）

  3.分包載入（將小程式劃分成不同的子包，在構建時打包成不同的分包，使用者在使用時按需進行載入。）

分包實現

• 首先確定小程式的目錄結構

  

  category.png

  這裡是一個演示的專案目錄結構，新建了兩個目錄名為packageA和packageB的資料夾，以表示分包。在兩個包中可以新建pages頁面目錄和靜態資原始檔（這裡只新建了images資料夾，可根據專案需求自行建立）

• 然後就是app.json的配置檔案

"pages": [
"pages/index/index"//主包的入口
],
"subpackages": [//分包
{
"root": "packageA",
"pages": [
"pages/index/index"
]
},
{
"root": "packageB",
"name": "pack2",
"pages": [
"pages/car/car"
]
}
]

subpackages 欄位定義了程式的分包情況，接收一個 Array 陣列，陣列的每一個元素代表一個包。每個陣列中包含了 root 欄位和 pages 欄位，分別代表當前包的根目錄和當前包下的頁面路徑。

注意事項

• 每一個包裡的靜態資原始檔是相對封閉的，不能相互引用。
• 小程式定義的 tabBar 必須定義在程式的主包內。
• 每個包定義的 root 欄位是獨立的，A包的根目錄不能在B包的子目錄中。
• subpackages 欄位的寫法和 subPackages 是一樣的，沒有過分強調。
• 整個小程式所有分包大小不超過 8M，單個分包/主包大小不能超過 2M

這也是我在專案開發中遇到的坑，開發一半的時候發現程式碼包的大小超出了，在不接受將靜態資原始檔放在開發伺服器上時，找到這樣的一種方法。微信小程式設計的原則是快速，程式碼包太大確實也違背了這一原則。即便是分包載入，也會存在大小限制的問題，所以在開發時還是應當避免這類問題。