【闲聊】关于包体大小

我们公司是做一般的H5游戏,不是微信小游戏的。
目前的专案差不多进入尾声了
就想着做一些优化工作
常见的优化手段都做了
有一些不是那么熟悉的就没碰了
而且觉得帮助不大
像我之前有发问想要优化启动载入速度
因为场景中会所有引用到的资源
都会被打包进main这个系统预设的AB包
就变成我启动时所有的资源都需要在初始阶段被加载
有人提到通过prefab
但我觉得这个方案也不算太好
因为在实例化的过程其实也是很吃效能的

我现在正在做包体优化
想探讨的是怎样的包体算过大需要优化
如果本身包体不大那还需要采取常规的一些优化手段吗?
除了常见的手段还有哪些优化空间呢?
我目前大概做这些了
resource非必要不要放东西
移除不必要的引擎模块
tinyPNG

未使用tinypng处理前
build后web-mobile资料夹大小14.1MB
使用tinypng处理后
build后web-mobile资料夹大小13.3 MB

小的有点少哇 我爬文人都说可以小50%~70%
那我这个压缩幅度是还挺少

我用的tinypng是通过gulp操作的

var gulp = require("gulp");
var tinypng = require('gulp-tinypng-compress');

gulp.task('tinypng', function () {
    return gulp.src('./build/web-mobile/**/*.{png,jpg,jpeg}')
        .pipe(tinypng({
            key: 'XXXXXXXXXXXXXXXXXXXXX',
            sigFile: './build/.tinypng-sigs',
            log: true
        }))
        .pipe(gulp.dest("./build/web-mobile/"));
});

還請各路大神賜教

1赞

我感觉你在写长短句诗句

1赞

排版比较随意松散,还请见谅:sweat_smile:

十来兆没啥优化的

这是有什么判定的标准吗?
怎样算过大
包体越小那我启动的速度也会快一些吧

文件越少H5启动也越快,但是这个体量再优化也看不出什么,要不试试除开启动页和加载条之外的所有图片都丢远程,启动之后再加载

1赞

1.图片使用外置的打图集工具,最次使用引擎自带的
2.图片尽量减少像素点,图越小越好,避免使用png
3.spine使用二进制压缩spine

代码层面
1.主场景只留一点需要的东西,别的都动态加载
2.使用更优的压图工具

别的我再想想

2赞

我也是做web游戏 不过我所有需要动态的资源都放resource了 感觉打开挺快的呀 web包体11m左右
cdn还没有在国内

启动场景越简单越好,分好模块bundle动态按需加载

2赞

bundle可以远程加载

1赞

麻烦修改一下帖子吧 你的 tinypng 的key 泄漏了

1赞

玩家感知层面就是要你加载快。
1、分包。启动场景包、框架包、登录包、配置表包、主脚本包、主资源包、子模块包。
2、预加载。比如登录界面(玩家没点击登录前,可以有后台预加载模块);
3、按需加载和缓存策略。
落地和细节还是要得靠自己研究了

1赞

这种在构建时去压缩图片。 我认为是路走偏了。 这些素材应该在制作的时候 。 就压缩好。 每次构建还要压缩图片。 想想就难受。。。。

你小子!!!

制作的时候就压好 你用了自动合图 打图集的时候还是会变大不少 8位的图又给你打成32位了

1赞

你小子…

  • json/txt/plist/xml之类文本,按bundle合并所有json,再pako下,包体立竿见影。
  • 图片之类,能合图尽量合图尽可能减少文件数,不建议tinypng(压小了无效果,压大了UI看不得),转webp更优。
  • 控制首批界面的http文件请求次数,在UI出现时200以下
  • 服务器开启gzip/brotli
1赞