原文网址：https://www.youyong.top/article/11599ef9bc5a1
Cocos Creator是一个优秀的游戏引擎开发工具，很多地方都针对H5做了专门的优化，这是我比较喜欢Cocos Creator的一点原因。
其中一个优化点是首页的加载速度，开发组为了加快首页的渲染速度，减少白屏时间，把逻辑代码和首页加载代码做了彻底分离。首次页面加载的只是一个相当于加载器的初始化文件，文件体积特别小，不像其他引擎，一开始就需要加载主逻辑JS文件，动不动就来个上百KB的文件加载，然后才能显示loading条，白屏时间当然会延长不少。
原文网址：https://www.youyong.top/article/11599ef9bc5a1
说到这里，不得不吐槽一下Cocos的开发文档，居然没有专门针对首页 loading条 做任何说明，害我研究了半天都不知道怎么定制自己的首页loading界面。这里如果有遇到不知道怎么定制首页loading界面的同学，可以看我另一篇的文章：《Cocos Creator—定制H5游戏首页loading界面》
话说回来，开发者虽然专门针对首页加载时间做了优化，但对于前端页面优化来说，还是不够彻底的，我们还有不少优化时间。首先，我们看一下用Cocos Creator构建发布后的mobile-web页面请求图：
在页面首次出现之前，需要发起4个请求，并且这4个请求都是小文件，其实是没有必要的，特别是在服务器端还有gzip压缩的情况，更理想的情况是一个请求就能完成所有的工作。
另外这4个文件都没有经过代码压缩
例如html文件：
这里也有不少优化空间。
综上所述，我们有了压缩合并的方案，这里可以通过gulp实现。
有些同学会问：webpack更酷更流行为什么不用webpack？
答：因为webpack本质上是模块化打包方案，我们这里只是简单对代码做一些构建处理，用gulp更轻量更合适。
gulp安装请访问：https://gulpjs.com/
nodejs安装请访问：http://nodejs.org/
安装gulp相关插件：gulp-file-inline gulp-htmlmin
思路如下：
通过gulp-file-inline把style-mobile.css，settings.js，main.js inline到html文件，减少请求
通过gulp-htmlmin把html文件压缩，减少空格，压缩代码量，减少文件体积
gulpfile文件代码：
在命令行里面执行gulp，大功告成！压缩后的请求如下图：
大家可以看到，原来的4个请求只剩下build一个请求了，而且经过服务器的gizp压缩，还能缩小到2-3KB，如果配合CDN策略，基本能让你的H5游戏首页秒开。
完整代码可以戳「这里」访问，这个示例包含了Cocos Creator图片压缩优化、减少首次文件请求、html压缩、动态更新、定制loading图等功能哦。
共 0 条留言
教程：Cocos Creator如何给资源打上MD5版本号？
教程｜如何在Cocos Creator v1.5中集成 Pomelo？
看 Nantas手把手为你详解 v1.5资源导入导出工作流程
教程｜如何在Cocos Creator 中完美使用 protobuf.js
Cocos Creator 开源游戏集合贴 （源码 视频 在线统统有）
iPhone X 跌破发行价，苏宁200亿入股恒大 | 财经日日评
资深黄牛现身说法：iPhone X价格秒变不停，就像炒股一样
低内存占用、无广告、功能强大又唯美的本地播放器 - Potplayer
从零开始手把手带你全面认识 网易的游戏服务端框架 Pomelo
Cocos Creator v1.6支持Camera剔除功能！
手机扫一扫
分享文章