封面插件背景

小游戏首屏启动优化有很多最佳实践，其中一个最佳实践是游戏首包仅绘制一张最简单的静态图，玩家能够在最短的时间内看到游戏元素进而提升游戏的启动留存。不少开发者也在社区分享过自己的最佳实践，如：

cocos微信小游戏启动首屏优化：https://developers.weixin.qq.com/community/develop/article/doc/000664e86b4bf007962c012a256013 

小游戏首屏启动优化：https://developers.weixin.qq.com/community/develop/article/doc/000cee6e568e80f09a9981b0c56413。

这些最佳实践的普遍思路在于不依赖游戏引擎用 WebGL 来绘制一张最简单的静态图，不依赖游戏引擎是基于首包尽可能小的出发点，仅仅绘制一张静态图是因为如果做比较复杂一点的交互需要一个相对完善一点的渲染引擎，代码包体积又会变大。

为了能够既满足启动的最佳实践又能够让封面图交互相对丰富，我们封装了封面图插件。

封面图插件介绍

封面插件将绘制静态图的 WebGL 逻辑封装在插件内，同时为了能够做更加丰富的交互，基础库内置了渲染引擎，基于渲染引擎我们能够做更加丰富的封面图模板，如静态图模板、多图切换模板、进度条模板等，其架构图如下所示：

开发者改造成本

1. 设计游戏启动封面图（依赖于设计资源，如果有图直接使用即可）；

2. 更改游戏初始化流程，将游戏代码都改成子包加载方式，首帧逻辑改为初始化插件并异步加载游戏代码执行真正的游戏初始化（1 -  2天）；

在有封面图资源的前提下，预计1 - 2 天即可完成接入；

封面图插件优势

1. 内置渲染引擎：官方维护，封面图阶段可以做到相对丰富的交互而无需游戏额外下载渲染引擎（基础库静默更新）；

2. 插件优势：不占游戏代码包体积，使用的游戏越多，玩家本地命中插件的概率越大；

3. 大DAU游戏验证：插件已邀请百万DAU级别游戏内测接入，可放心接入；

应用案例1

接入游戏：《贪吃蛇大作战》

接入表现：

1.启动封面图

2.衔接到游戏自己的资源loading界面

3.正式进入游戏

优化效果：

接入封面图插件的版本主要是对首包代码进行拆分，减小启动阶段下载量

接入前：首包3.5M

接入后：首包613KB；封面图展示阶段下载2.1M游戏必要的脚本分包

安卓：优化后总启动耗时3.8s，提升39%；

iOS：优化后启动耗时2.1s，提升44%；

应用案例2

接入游戏：《星途WeGoing》

接入表现：封面图 -> 游戏loading -> 正式进入游戏

数据效果

安卓：优化后总启动耗时 2.3s，提升34%；

iOS：优化后启动耗时 1.6s，提升33%；

接入方式及文档

封面插件文档：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxbd990766293b9dc4&token=440224363&lang=zh_CN

在线申请插件授权：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wxbd990766293b9dc4&token=&lang=zh_CN

联系我们

有任何问题（如游戏改造遇到困难，改造之后启动数据有疑惑）可以添加下面的微信号联系我们。