2018-10-26

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