<神功大成>用zip加速web小游戏打开

  • Creator 版本: <-- 2.4.10 -->

项目背景: 公司的小游戏项目是运行在手机app开的webView控件下,用户普遍是手机性能较差,网络较差。游戏相对较简单,构建后的web包也是相对较小,构建后约6m~10m

立项原因: 期望用户首次打开能快速打开游戏,二次打开能更快进入游戏。

项目调查: web启动的时候有很多零散的json png js文件,所以就想全部放在一个文件里面(zip想法由来)。刷帖子的时候看到过把所有的文件全打到html里面(superHtml),我下了这个插件打了一个html试了一下,结果用户手机直接奔溃,打不开这么大的html。没有办法只能另辟蹊径。

目前效果:


实现流程:
(写了一点nodeJs脚本处理构建后的webMobile,打包项目后手动运行一下,就可以达到目录下的效果,不处理就和之前一样)
1.将assets这个目录手动处理成一个压缩包。

2.在index.html中加载这个压缩包

3.修改2.4.10的引擎源码(这里是加载脚本的,其他的加载Json png mp3的类似,由于目前的游戏没有用到其他类型资源,所以也只是处理了这个几个地方的加载)

4.这样子还不够彻底,再用gulp把打包后的css 以及html里面的脚本引用直接内联到html中

5.神功大成,一套操作下来,这个网页就只剩下入口html和资源assets这两个文件了 :wink: :wink:

参考文献:
使用 Zip 加速 CocosWeb 加载
Bundle加速插件】 Bundle Zipper 【需要H5加载加速、PWA的请进

22赞

six six 这样操作完首次打开速度能提升多少呀

叼叼叼,恭喜帮主神功大成

2.4.10的引擎中就修改了这两个文件
asset-manager.zip (7.6 KB)

index.html文件的修改
入口文件.zip (38.3 KB)

处理构建完成后的工具(把这个里面的路径修改成自己的就行 path12和copyPath12 这两个)
gulpTool.zip (46.9 KB)

所有的都给兄弟们了 一滴都没有了

3赞

假如你的网络请求比较多的话 优化还是比较明显的,我们项目之前第一次打开12s,用这种办法现在第一次打开6s。
但是zip的办法第二次打开是比正常构建下的要慢一点点的,不过利大于弊

感谢大哥分享,没处理过这个 请教下为什么第二次要慢一点啊 首次进不是已经解压过了吗

可以可以,拿来吧

有一个可以把web变成一个 html的文件的 工具.你用这个会不会更好一些呢?

laya2.0没有包管理,我自己做的包管理就是用zip解决的 :joy:

正常你打开一个网页,这里我们去打开网络面板观察请求资源情况。请求一次后浏览器就缓存了这个网页的资源(这里你可以禁用缓存),你第二次打开网页就很快了,因为加载文件是读取的浏览器缓存。
所有就算你是很多碎文件

这样单个html文件就很大了,可能10m左右, 有的手机打不开这么大的网页

懂了 意思是 zip的方式是没有缓存的 每次都是解压 所有后面会比正常构建的慢一点

可以考虑判断用户手机能用IndexedDB的话, 把zip解压后的重要文件如cocos2d-js-min.js, main bundle里的index.js 缓存到IndexedDB中, 那様第二次打开时判断zip包md5是否一致, 若果一致直接启动游戏, 速度可以很快。

秒开 指的是1秒内打开,你这优化半天还要6秒

好大哥!感谢

利用 浏览器的 sw 技术,可以将zip 解压缓存到 浏览器的 cache 里面,只是你们通过app 内置 web view 打开的,这个不一定支持…

这个就很干了, 废话不多, 点赞点赞

main.js里面for (var i = 0; i < bundleRoot.length; i++) {
cc.assetManager.loadBundle(bundleRoot[i], cb);
},loadBundle是不是也需要修改呀,不然无法加载内置bundle的资源

@582142510

我的这个版本是2.4.10。不需要修改loadBundle上层接口,是修改的download.js里面的脚本。
内置资源,外置资源一样的。我不是发了修改引擎源码的压缩包吗,把里面的几处修改同步过去就行。然后按照我的办法,在index.html里面去加载压缩包