如何利用微信小遊戲的分包加載機制突破4M代碼包體積限制

相信你們度過了一個不錯的端午假期，在端午前夕，即6月15日晚上，微信小遊戲宣佈支持分包加載功能，白鷺引擎在端午節後第一天正式支持分包加載機制。在正式向開發者介紹如何使用前，我先爲各位解讀一下我對微信提供這個 API 的理解。

 

如何評論微信小遊戲中新加入的分包加載 API ？

 

首先小標題先來一個標準的知乎體並自問自答。先說結論，我認爲微信小遊戲目前支持了分包加載，並將最大代碼包體積從 4M 提高到 8M，並非鼓勵開發者將包體積提高到8M，偏偏相反是但願開發者將包體積儘量下降。

 

目前微信小遊戲存在的一個問題是，若是開發者的包體積較大（假設4M），遊戲會長時間停留在小遊戲的啓動頁（俗稱白屏），用戶卡在白屏階段分爲如下兩種狀況：

 

• 下載時間過長，這是因爲微信小遊戲的初始包體積較大，而且用戶的網絡較差引發的

• 首次渲染時間過長，這是因爲用戶代碼體積較大，JS引擎首次解析較慢引發的

 

微信小遊戲之因此提供了分包的策略，最主要的目標是但願開發者將包體積儘量下降，將首屏加載的壓力分散到遊戲邏輯中，保證儘快給玩家一個能夠交互的界面，而不是停留在微信小遊戲的啓動頁中。

 

爲此，微信小遊戲本次更新中不單單更新了分包加載，也在管理後臺的運維中心提供了加載性能監控功能，容許開發者針對上述數據數據分析功能，正是但願經過這些數據分析能力幫助開發者更精細化的優化小遊戲的加載效率。

 

 

所以，將微信的本次更新簡單粗暴的理解爲「包體積從4M提高到了8M」是片面的。而且我我的也很不建議開發者直接這樣作，由於目前您仍然要兼容微信不存在分包下載的老版本，若是您將您的遊戲直接放置了8M的分包，就會在用戶首次啓動時必須加載完8M資源才能跳出啓動頁，這也不是很好的用戶體驗。

 

爲此，白鷺引擎的策略是，引入一個 loading.js 的邏輯，並將其與白鷺引擎的核心代碼（以及最簡化的loading資源）打包爲主包，而後在 loading.js 中去動態下載子包，並在下載過程當中藉助已經加載的白鷺引擎爲用戶渲染出 Loading 界面。

 

做爲一位多年前從事 Flash 頁遊開發的開發者，我之因此將微信分包策略與白鷺引擎採用這種方式結合，是由於幾乎全部的 Flash 頁遊都會至少存在兩個 SWF 文件（能夠近似理解爲編譯後的代碼包文件），第一個SWF文件只負責加載邏輯並保持其體積儘量小，而真正的業務邏輯因爲代碼總編譯體積很大，都會放在後續加載。

最後用一張圖概述：

 

 

如何在白鷺引擎中使用分包下載

首先宣佈一個好消息，藉助於白鷺引擎 5.1 版引入的新的自定義構建管線功能，您無需升級白鷺引擎至最新版本，而只是在構建管線中添加一些插件，並調整少許邏輯就能夠完成此改動。

 

考慮到這項功能是引擎工程師利用端午節的這幾天快速實現出來的，咱們決定暫時將這個功能不放在引擎中，而是給開發者提供一個示例項目，開發者應首先在引擎提供的示例項目中將該功能跑通，而後再將其應用於您的正式項目。

步驟一：下載示例項目

您能夠在 

https://github.com/himuil/subPackageDemo 

下載示例項目，該項目能夠直接運行看到效果

該項目使用了Egret 5.2.3 版本，可是您也能夠將 egretProperties.json 中的 engineVersion 和 compilerVersion 調整爲您的引擎版本，咱們支持 5.1 以上的版本。

 

步驟二：將該項目移植進您的遊戲

• 將 scripts/wxgame/subpackage.ts 拷貝進您的項目

• 修改 config.wxgame.ts，將 ManifestPlugin 替換爲 SubPackagePlugin （注意，您須要修改 build 和 publish）

• 修改 config.wxgame.ts 中的 CleanPlugin，將 subpackage 對應的目錄清除

• 將示例項目的 EgretSubpackageLoading.js 拷貝進您的微信小遊戲項目

• 修改微信小遊戲項目的 game.json，參考示例項目，引入 subpackages 屬性

• 修改微信小遊戲項目的 game.js，參考示例項目，重點是添加調用 wx.loadSubPackage 的邏輯

 

步驟三：高級用法

• 您能夠經過修改 SubPackagePlugin 的參數和 game.json 的 subpackage 字段配置多個 subpackage

• 您能夠在遊戲過程運行中，而不是遊戲初始化時加載某個 subpackage，好比您能夠在遊戲啓動時只加載一個登錄頁面，在用戶登錄以後再加載遊戲主邏輯。

• 每一個 subpackage 能夠包含多個 js 文件