一起聊聊发布H5上的优化呗

Creator 2.x
#1

发布到H5上，最关键的是流畅、流畅、流畅。最近临近发布也做了不少优化尝试，抛砖引玉大家一起聊聊H5的优化吧！
###1. 字体

  • app上字体都是完整的，动不动几Mb上十Mb，这么大放网页上肯定不能接受的，必须压缩。
    推荐使用Fontmin，把游戏内用到的文字以及常用汉字提取出来。
    以我项目为例，压缩后字体文件大约1.5Mb。

  • ps：再提供一个小技巧，正则搜索 [一-龥]+ 可以搜索出所有汉字。
    ###2.图片
    图片压缩估计不少人都知道的网站tinypng，Mac上有个批量压缩替换的工具TinyPNG4Mac。
    我还尝试了都换成webp格式，文件大小压缩简直惊喜，尤其是色彩丰富的tiny效果不怎么好的图片，基本都能压缩50%以上。可惜ios上不支持，白开心一场。
    然后就是牺牲体验来换流畅了，把背景图、特效合图都缩小一半；无透明的基本都换成jpg格式。
    ###3.打开页面速度
    我们的理念是尽量快的看到图片ui，有进度条的加载和没有进度条的加载容忍度上是完全不同的。

  • 缩减引擎js文件
    在Creator 项目>项目设置>模块设置里，去掉未用到的模块。

  • setting.js
    不需要动态加载的图片都尽量不要放到resources文件夹下，构建出来的js还可以用在线工具压缩混淆下

  • project.js
    配置表尽量用json文件而不是js文件

  • 初始场景
    尽量不要引用字体文件，文字能用图片尽量用图片。

抛砖引玉，大家有什么好的建议都拿出来讨论一下吧！

2赞
#2

字体文件大约1.5Mb，这也不少了啊，能用图片就用图片

#3

只是游戏内用到的文字的话肯定不会这么大，可是还有玩家昵称，为此引入了常用的3000汉字一下就这么大了。。

#4

WEB的，用系统字体，不用下载字体的啊，选一个大部分主流都有的字体就行了，原来的才需要打包字体，而且你减掉后的字体根本没法支持聊天的。。。。聊天发的什么文字都无法确定

creator生成的JS文件可以压成gzip，支持自解压的浏览器会自动解压掉，速度飞快，不支持的可以用自己实现的方法解压
，JS文件太大的点还可以分包，这样解压不会占线程太久，可以看进度

#5

前端有没有人用serviceWorker+caches，我在X5文档上看的，实测第二次进入飞快，比普通的浏览器缓存要快，尤其是网不是那么好的时候

#7

除了资源的优化，有什么技术上的优化吗？

#8

用gulp命令压缩代码和图片 这也是个可行的方案

#9

用app把网页”预加载“ 打开的时候文件都在本地了 这样也是飞快。
再问一个问题 网页怎么做到透明啊，我翻看之前的文档 说的是
background-color: transparent;
或者
background-color: #ffffff00;
但是这样都不行，会有网页的白屏。
想要达到的效果是网页运行在app上 能看到网页下层 app上的内容