优化H5 mobile游戏的启动速度

发布 H5 Mobile 游戏,已进行过“功能裁剪”,部署到cdn,启动黑屏要 超过 5秒,才会显示出splash的icon。
如何优化游戏的启动速度,缩短黑屏时间,让用户更快的看到游戏首屏呢?

我已经做的

  • 功能裁剪
  • 打包设置:剔除asm.js 模块
  • 图片压缩
  • 部署到cdn 支持gzip
  • 合并js css 并直接放进index.html里
    PS:[只合并了style.css、polyfills.bundle.js、system.bundle.js这3个文件]

尚未做的

  • 想合并import-map、index.js、cc.js _virtual_cc_xxx.js。但因为运行后报错,没合并成功
  • spine.asm.js spine.js spine.wasm.js 系列的js
  • 分包? 感觉这个和分包没什么关系就没做尝试
  • 自己实现splash? 感觉与减少黑屏时间没有联系

引发的问题

  • 即便上述都做了,提升了启动速度,但每次打包后都要手动执行这些迁移工作吗?

对于优化启动速度,缩短黑屏时间。大佬们都有什么高见?

1赞
  1. cdn速度一般?
  2. 你合并js到index不是会拖累加载吗?

怎麽不按自定构流程写打包脚本?这様就不需要每次手动处理了

1赞

这个零散的加载很多小文件,不如都整到index.html里,
还有页面的gzip ,实际文本类型的压缩还是很棒的。_virtual这种2M的js,实际才495K.
我见过index.html 3M多的。很丝滑快速的。
在开发者工具的network 都使用Fast 3G 模式,依然很优秀。

自己实现splash,并且实现loading去加载引擎的index文件,就有关系了,splash显示的也就快了

1赞

大佬有demo吗? :sweat_smile:

你只要找个网页工具, 把splash转base64
然后直接在html里 <img scr="base64内容">, 或者css内加载splash的连接改为base64就行了

嗯 自己加splash 的确可以解决黑屏过长的问题

但如何解决加载js过慢的问题呢?

把你最慢的js下载路径复制下载,放到你index.html去下载,提前下

这个我有心得。
先说一下我这边的项目情况,是在安卓app中开了一个webView去跑一个url游戏网页。
每次构建发布时使用的是引擎自带的一键构建发布,将其打包成一个web-mobile(自定义构建流程的方案 没有看懂 :sob:)
image

然后我自己写了一个gulp。
image
大概就是版本号自增,将闪屏图拷贝到项目中,修改index启动文件,压缩json ,将几个小脚本,css内联进html,压缩js。
至于你说的不想要黑屏,为什么不在index搞一个图盖在游戏的GameCanvas上 然后在项目onLoad里面去隐藏这个图
image