如何利用微信小游戲的分包加載機制突破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 文件


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM