V7投稿|微信小游戏分包最佳实践

boyue · 2024年05月9日 03:50

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+	普通分包	打包所有资源