Unity WebGL包体压缩

最近在开发webgl，踩了很多坑，先来说下包体的问题。

开发完之后发现unity将文件都合并到一个文件了，一共有接近100m。

这对网页端的体验来说是可怕的，因为玩家必须要加载完所有的文件才能进入，这样体验特别差。

于是想着有什么可以压缩首包大小，经过下面的尝试。

（一）无用资源删除

首先先把没用的资源删除，这里可以通过Editor自带的报告进行查看，路径在C:\Users\你的用户名\AppData\Local\Unity\Editor\Editor.log，文件有点大，我找到关键信息复制出来。

发现字体和unity自带的很多素材都打包进去了，unity自带的暂时不清楚怎么删除，所以我这边先不管了，如果有知道的可以告诉我下。

（二）设置项

有一些设置项会影响包体，我按照影响大小排序。

1、压缩设置

Brotli压缩最强：能缩小到20多m。

Gzip实测只能压缩几m。

这里我们设置为Brotli，虽然会牺牲解码性能，但是服务器的流量是很贵的，所以这样值得。

2、Debug Symbols嵌入

这个的作用是在网页端调试用的，如果Off的话，报错或者日志就没有明文信息，比较难调试。

这样开发阶段就Embedded，最后上线关掉。External是符号导出到外部，通过一些方式可以调试，就是比较麻烦。

这个嵌入会占用2m左右，取消后可以节省2m空间。

 

3、代码裁剪 Strip Engine Code

自动将没用的代码裁剪掉，不推荐这个，因为可能会把一些反射调用的代码给裁剪掉，默认是Low发现改成了AB包后，报错找不到代码了。所以这个我改成最小的，目前没问题。

经过测试这个包体减小的有限，顶多就一两兆，不太建议，或者自己通过link.xml管理裁剪。

（三）压缩结果 

经过一番压缩，明显从100M降到了20M了。

（四）改成AssetBundle

一般游戏开发都比较习惯用Resource.Load加载资源以及用Unity的场景管理资源，但是这样导出webgl的话，unity会自动将他们导出成4个文件：

• .wasm
• .data
• loader.js
• framework.js

这样的话，无法把游戏变成非常小的力度动态加载，用户比较要等全部加载完才进入游戏，比较影响体验。经过查找相关资料，和unity官网的文档，发现unity并没有这方面的解决方案，所以只能通过AssetBundle进行处理了。

因为传统的AssetBundle或者Unity的可寻址Addressable都比较麻烦，所以这里我借助开源插件YooAsset，快速完成AB的转换。Hello from YooAsset | YooAsset

处理完就是这样，这里我把每个UI界面都变成一个个Bundle文件，这样用户打开哪个界面就加载就行了，这样也能借助浏览器自己的缓存，自动优化，减少用户对服务器的资源请求。

可以看到下次是显示from disk cache了，这样就是从本地读取了。

 

这一套做完，网页就打开特别流畅了。