首包直降70%，游戏分包最佳实践(视频+图文)

最新推荐文章于 2024-11-11 08:49:27 发布

晓衡的成长日记

最新推荐文章于 2024-11-11 08:49:27 发布

阅读量295

点赞数

文章标签：游戏

原文链接：https://mp.weixin.qq.com/s?__biz=MzA5MjEwOTI4Ng==&mid=2247600015&idx=1&sn=7a40f79131be645ef3a5ed1c194d3422&chksm=9186c50c8c3dab620981dba5ac82576b70dd5506d6a91a5a1bf29f9efd1d2db9be57f82a198e&scene=126&sessionid=0

版权

本公众号由以下老铁赞助，感谢他们❗️

昨天在群里，有群友对自己的小游戏加载速度不满，花钱买来的用户，超过50%还没进游戏就流失了，心疼不已！

慢一秒就7%的首日用户流失，16M的资源包，仅靠引擎分离是远远不够的。

正好前两天，麒麟子刚刚制作了一条 Cocos 微信小游戏分包视频，结合之前的图文教程再好不过了。还不会小游戏分包的朋友，一定要学起来，这可是钱啊！

Error: 系统错误，错误码：80051,source
size 9424KB exceed max limit 4MB

相信 90% 的朋友第一次发布小游戏时，都会遇上首包限制的问题。社区中有非常多关于如何减少首包大小的文章，但在 Cocos Creator 3.8 版本发布之后，引擎自带分包功能已经非常强大，在不改动引擎机制的情况下，就足以应对常见项目需求。

今天我们就以 Cocos Creator 自带的 Hello World 为例，一步步实现包体优化，最终效果如下：

项目	优化后	优化前
总包大小	3.73MB	9.22MB
主包大小	2.14MB	9.22MB
分包大小	1.59MB	9.22MB
cocos-js	1.68MB	3.95MB
包数量	2	1

具体情况可以点开下图查看：

接下来，我们从新建项目开始，一步步优化。

1.引擎裁剪
2.分包设置
3.资源引用剔除
4.大文件排查
5.WASM 分离

一、新建项目

新建项目面板，版本选择 Cocos Creator 3.8.2（建议用最新版本），模板选择 “Hello World”，即可创建带有素材的测试项目。
不做任何修改，发布到微信小游戏
用微信开发者工具打开，选择“代码依赖分析”，可以看到如下数据

我们可以看到它只有一个主包，总包大小已经 9.22 MB了，不做处理肯定是不行的。

二、引擎裁剪

定位到主菜单 -> 项目 -> 项目设置 -> 功能裁剪。

可以看到这里面提供了许多可选项。我们移除 WebGL 2.0、视频、Webview、Marionette 动画系统、基础几何体、地形、光照探针、2D 物理系统、2D 粒子系统、Tiled 地图、Spine 动画、Dragon Bones、WebSocket。

WebSocket 是针对原生平台的选项，小游戏和 Web 平台可以都去掉，不影响 WebSocket 使用

以上移模块除后，就是一个常见 3D 项目所需的基础模块了。

“
实际上，在这个例子中，音频、缓动系统、3D 物理系统、3D 粒子系统 因为并没有使用，都是可以移除的。但我们作为测试，尽可能保留大部分项目都需要用到的模块，才能符合商业项目需求。
”

总的来说就是：把不需要的模块都移除掉。

再次发布到微信小游戏，可以看到下面的结果：

项目	优化后	优化前
总包大小	7.61MB	9.22MB
主包大小	7.61MB	9.22MB
cocos-js	2.46 MB	3.95MB

一般的项目，都会带有许多游戏素材，光是裁剪肯定是不够的。接下来，我们通过分包设置，将游戏内容从主包里分离。

三、分包设置

3.1 调整目录

新建一个 game 文件夹，然后把所有其它文件都拖进去，最终目录结构如下：

拖进去后，如果发现 material 和 model 文件夹有残留，直接删除即可。

3.2 设置分包

选中 game 目录，做以下操作：

在右边的属性面板中，选择配置为 Bundle
点击“编辑”按钮，打开 Bundle 配置面板
勾选“单独配置”
微信小游戏一栏选择“小游戏分包”
点击“保存”

这样一来，分包就设置好了。

3.3 制作加载场景

分包不会自动加载，因此，我们需要制作一个场景用于加载。

在 assets 目录下新建场景起名为 "start"
在 assets 目录下新建一个脚本起名为 "Start"
在 Start.ts 中编写如下代码

assetManager.loadBundle("game",(err,bundle:AssetManager.Bundle)=>{
    director.loadScene("main");
});

在 start 场景中，新建一个空节点，起名为 Start
将 Start.ts 组件挂上去
在 start 场景上放一个小 Logo，以避免什么都没有显示

最终的项目目录和画面可能如下：

在构建面板，将刚刚新建的 start 场景选择为启动场景，再次打包，可以在微信小游戏开发工具中看到如下数据：

项目	优化后	优化前
总包大小	9.94MB	7.61MB
主包大小	4.02MB	7.61MB
分包大小	5.92MB	-
cocos-js	2.47 MB	2.46MB

可以看到，在优化后，虽然主包下降了，但总包大小上升了。

这里就得提到一个隐含的重要知识点了。Cocos Creator 有以下几种包：

类型	优先级	用途	资源引用方式
internal	21	内置资源	仅打包已使用资源
resources	8	内置 bundle	打包所有资源
main	7	主包	仅打包已使用资源
bundle	1+	普通分包	打包所有资源