微信小程序分包的超詳細步驟

Posted on by

前言

微信小程序開發過程中，隨著業務不斷迭代，程序包的體積越來越大，使用分包加載是開發者必須面對的問題。

正常情況下，小程序首次啟動時，會將整個代碼包下載下來，所以如果代碼包過大，會影響小程序首次啟動時間，因此微信官方對小程序代碼包做瞭大小限制。

一、為什麼要使用分包？

1.小程序要求開發過程中壓縮包的體積不能大於2M，否則無法提交發佈

2.對小程序進行分包，可以優化小程序首次啟動下載時間，因為分包後主包的體積小瞭，加載更快，提高瞭用戶體驗

3.將小程序劃分成不同的子包，在構建時打包成不同的分包，用戶在使用是按需加載，提升瞭程序性能

提示：小程序啟動時，默認會下載主包並啟動主包內的頁面，當用戶進入分包內的某個頁面時，客戶端會把對應的分包下載下來。

說明：合理使用分包可以較好地優化小程序的加載時間，提升用戶體驗。

二、分包大小查看

在微信開發工具->詳情->基本信息面板中即可查看項目及分包信息，如果不采用分包，小程序總大小不能超過2MB，如果采用分包，總大小可以達到20MB，每個包不能超過2MB

三、如何使用分包？

首先根據項目需求規劃目錄結構，想需要分包的代碼放在獨立的目錄中，如下圖

跳轉到分包的路由   wx.navigateTo({ url: '/pagesA/pages/activitys/design/index' })

【註意事項】

1.tabBar 裡配置的路徑必須放在主包裡

2.使用 subpackages 進行分包路徑聲明，subpackages 配置路徑外的目錄會被打包到主包中

3.不同的分包之間的資源不能相互引用，但都可引用主包中的資源

【引用原則】

packageA 無法 require packageB JS 文件，但可以 require 主包、packageA 內的 JS 文件；使用 分包異步化 時不受此條限制

packageA 無法 import packageB 的 template，但可以 require 主包、packageA 內的 template

packageA 無法使用 packageB 的資源，但可以使用主包、packageA 內的資源

四、獨立分包

獨立分包是小程序中一種特殊類型的分包，可以獨立於主包和其他分包運行。從獨立分包中頁面進入小程序時，不需要下載主包。當用戶進入普通分包或主包內頁面時，主包才會被下載。

開發者可以按需將某些具有一定功能獨立性的頁面配置到獨立分包中。當小程序從普通的分包頁面啟動時，需要首先下載主包；而獨立分包不依賴主包即可運行，可以很大程度上提升分包頁面的啟動速度。

說明：一個小程序中可以有多個獨立分包。

開發者通過在app.json的subpackages字段中對應的分包配置項中定義independent字段聲明對應分包為獨立分包(上圖已備註)

【限制】

1.獨立分包中不能依賴主包和其他分包中的內容，包括 js 文件、template、wxss、自定義組件、插件等（使用 分包異步化 時 js 文件、自定義組件、插件不受此條限制）

2.主包中的 app.wxss 對獨立分包無效，應避免在獨立分包頁面中使用 app.wxss 中的樣式

3.App 隻能在主包內定義，獨立分包中不能定義 App，會造成無法預期的行為

4.獨立分包中暫時不支持使用插件

五、分包預下載

開發者可以通過配置，在進入小程序某個頁面時，由框架自動預下載可能需要的分包，提升進入後續分包頁面時的啟動速度。對於獨立分包，也可以預下載主包。

註意：分包預下載目前隻支持通過配置方式使用，暫不支持通過調用 API 完成

【限制】

1.同一個分包中的頁面享有共同的預下載大小限額2MB，限額會在工具中打包時校驗

2.如，頁面 A 和 B 都在同一個分包中，A 中預下載總大小 0.5M 的分包，B中最多隻能預下載總大小 1.5M 的分包

總結

到此這篇關於微信小程序分包的文章就介紹到這瞭,更多相關微信小程序分包內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：