在把Unity项目打包到WebGL平台时,画面一直卡在加载界面,打开F12会看到Uncaught ReferenceError: unityFramework is not defined错误。

image-20210730153831641

我参考了很多文章,其中比较靠谱的是禁用掉打包时的压缩。虽然能运行了,但是构建的大小大了几十MB。(强迫症患者狂喜)

image-20210730152820302

我在UnityAnswers上寻找了一番,发现这并不是个热门问题,初步判断我应该是卡在一些常识性问题上了。

既然提示unityFramework未定义,那么就要找到这个函数原本是声明在哪里。

经过一番定位,发现unityFramework被声明在xxx.framework.js.br文件的第一行。

image-20210730154157626

另外我还注意到一点,通过Unity自带的HTTPServer是能够正常跑起来的,但是换成我自己的服务器上就不行。可能是xxx.framework.js.br文件没有被正常加载。

可奇怪的是,自己服务器这边xxx.framework.js.br也被成功加载了,似乎一切都没问题。

image-20210730154319521

可点进去Preview后,发现内容是乱码的,根据第一行的信息,可以判断这个文件是预先经过brotli压缩过的,但浏览器没有解压就直接读取了,这样里面的js代码当然是无法运行的。

image-20210730154452384

通过对比两边的请求头和响应头,我发现自带的服务器在Headers里会额外附加一个Content-Encoding: br,这个header代表的是body的压缩格式。但自己的服务器并没有这个header。

所以才导致让浏览器误以为接收数据没有压缩过,但实际上数据已经被预压缩过了,浏览器是无法直接读取的。虽然资源加载成功了,但是没有解析/执行成功。

image-20210730154918741

既然找到了问题的源头,解决起来就很容易了:在自己的服务器返回时增加对应的header就可以了。

或者不使用预压缩,也就是将压缩格式设置为禁用,在HTTP服务器上做实时压缩,也是没问题的。