小程式超過2M限制的方法——分包載入

背景：

2017.01.09 小程式上線時，微信限制了程式碼包不能超過1MB 大小，（現在是2M了）限制大小是出於對小程式啟動速度的考慮，希望使用者在使用任何一款小程式時，都能獲得一種“秒開”體驗。然而，2MB 的大小也限制了小程式功能的擴充套件，小程式業務的發展可能需要更大的體積。

那麼，能否有一種方案，在增加小程式包大小的同時，也能保持不錯的啟動速度呢？

為了解決這個矛盾點，微信推出了「分包載入」這個技術方案。

分包載入的介紹

大部分小程式都會由某幾個功能組成，通常這幾個功能之間是獨立的，但會依賴一些公共的邏輯，並且這些功能通常會對應某幾個獨立的頁面。那麼小程式程式碼的打包，大可不必一定要打成一個，可以按照功能的劃分，拆分成幾個分包，當需要用到某個功能時，才載入這個功能對應的分包。

對於使用者來說，小程式載入流程變成了：

1.首次啟動時，先下載小程式主包，顯示主包內的頁面；

2.如果使用者進入了某個分包的頁面，再下載這個對應分包，下載完畢後，顯示分包的頁面。

採用分包載入，對開發者而言，能使小程式有更大的程式碼體積，承載更多的功能與服務；而對使用者而言，可以更快地開啟小程式，同時在不影響啟動速度前提下使用更多功能

分包的劃分

在配置前首先需要開發者規劃下各個分包需要容納的內容，我們建議開發者按照功能劃分的的原則，將同一個功能下的頁面和邏輯放置於同一個目錄下，對於一些跨功能之間公共邏輯，將其放置於主包下，這樣可以確保在分包引用這部分功能時，這部分的邏輯一定存在。

在分包劃分時，應該注意以下事項：

1.避免分包與分包之間引用上的耦合。因為分包的載入是由使用者操作觸發的，並不能確保某分包載入時，另外一個分包就一定存在，這個時候可能會導致 JS 邏輯異常的情況，例如報「"xxx.js" is not defined」這樣的錯誤；

2.一些公共用到的自定義元件，需要放在主包內。

分包的配置

當理清了分包的劃分後，就可以進行分包的配置了，這一步並不複雜。

假設支援分包的小程式目錄結構如下：

開發者通過在 app.jsonsubPackages欄位宣告專案分包結構：

分包載入的低版本相容問題

微信 6.6.0 版本開始支援分包載入，而對於低於這個版本的客戶端，我們做了相容處理，開發者不需要對老版本微信客戶端做相容。

對於老版本的客戶端，編譯後臺會將所有的分包打包成一個整包，老版本的客戶端依然按照整包的方式進行載入。

所以在老版本的微信客戶端下，是依然採取整包載入的方式載入的，建議開發者儘量控制程式碼包的大小。

目前小程式分包大小的限制：

• 整個小程式所有分包大小不超過 4M

• 單個分包/主包大小不能超過 2M

隨著時間推移，老版本覆蓋率降低，我們會考慮進一步擴大程式碼包的大小。

分包載入的詳細使用方法、示例專案文件上已有介紹，可檢視介面文件：分包載入