Cocos Creator—优化首页打开速度

Cocos Creator是一个优秀的游戏引擎开发工具，不少地方都针对H5游戏作了专门的优化，这是我比较喜欢Cocos Creator的一点缘由。

其中一个优化点是首页的加载速度，开发组为了加快首页的渲染速度，减小白屏时间，把逻辑代码和首页加载代码作了完全分离。首次页面加载的只是一个至关于加载器的初始化文件，文件体积特别小，不像某些引擎，一开始就须要加载主逻辑js文件，一开始就给我来个上百kb的文件加载，而后才能显示loading条，白屏时间固然会延长很多。

说到这里，不得不吐槽一下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

思路以下：

1. 经过gulp-file-inline把style-mobile.css，settings.js，main.js inline到html文件，减小请求

2. 经过gulp-htmlmin把html文件压缩，减小空格，压缩代码量，减小文件体积

gulpfile文件代码：

var gulp = require('gulp');
var fileInline = require('gulp-file-inline');
var htmlmin = require('gulp-htmlmin');

gulp.task('htmlmin', function(cb) {
  gulp.src('./build/web-mobile/*.html')
  .pipe(fileInline())
  .pipe(htmlmin({
      collapseWhitespace:true,
      removeComments: true
  }))
  .pipe(gulp.dest('./build/web-mobile/')
  .on('end', cb));
});

在命令行里面执行gulp，大功告成！压缩后的请求以下图：

你们能够看到，原来的4个请求只剩下build一个请求了，并且通过服务器的gizp压缩，还能缩小到2-3kb的大小，若是配合cdn策略，基本上能让你的H5游戏首页秒开。

完整代码能够访问：https://github.com/babyzone20...，这个示例包含了Cocos Creator图片压缩优化，减小首次文件请求，html压缩，动态更新定制loading图等功能哦。

ps：

咱们团队正在招聘优秀的H5游戏开发工程师，若是你符合如下条件：

1. 白鹭引擎/Cocos2d-js/Layabox等H5相关的开发经验

2. 但愿快速成长，不甘平庸

请联系我吧：babyzone2004@qq.com

更多信息请戳：https://www.lagou.com/jobs/30...