Cocos Creator是一个优秀的游戏引擎开发工具，很多地方都针对H5游戏做了专门的优化，这是我比较喜欢Cocos Creator的一点原因。
其中一个优化点是首页的加载速度，开发组为了加快首页的渲染速度，减少白屏时间，把逻辑代码和首页加载代码做了彻底分离。首次页面加载的只是一个相当于加载器的初始化文件，文件体积特别小，不像某些引擎，一开始就需要加载主逻辑js文件，一开始就给我来个上百kb的文件加载，然后才能显示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-inline-source gulp-htmlmin
思路如下：
通过gulp-file-inline把style-mobile.css，settings.js，main.js inline到html文件，减少请求
通过gulp-htmlmin把html文件压缩，减少空格，压缩代码量，减少文件体积
具体步骤：
npm install gulp-inline-source --save-dev
npm install gulp-htmlmin --save-dev
- 项目文件夹根目录下创建gulpfile.js文件
const gulp = require('gulp');
const inlinesource = require('gulp-inline-source');
const htmlmin = require('gulp-htmlmin');
const clean = require('del');
gulp.task('inlinesource', function () {
var options = {
compress: false
};
return gulp.src('./build/web-mobile/*.html')
.pipe(inlinesource(options))
.pipe(htmlmin({
collapseWhitespace: true,
minifyJS: true,
minifyCSS: true
}))
.pipe(gulp.dest('./build/web-mobile'));
})
- 找到
build-templates/web-mobile/index.html文件，分别添加注释
<!-- inline style-mobile.css -->
<link rel="stylesheet" type="text/css" href="style-mobile.css" inline/>
...
<!-- inline src/settings.js -->
<script src="src/settings.js" charset="utf-8" inline></script>
<!-- inline main.js -->
<script src="main.js" charset="utf-8" inline></script>
- 构建项目
- 在当前项目下，命令行里面执行
gulp inlinesource或者在vscode安装Gulp Task、Gulp Snippets，然后在vscode-目录-Gulp Task-gulpfile.js-inlinesource-点击Gulp Task右边的绿色三角形即可 - 删除
build/web-mobile/style-mobile.xxx.css，build/web-mobile/src/settings.xxx.js，build/web-mobile/main.xxx.js - 大功告成！压缩后的请求如下图：
大家可以看到，原来的4个请求只剩下build一个请求了，而且经过服务器的gizp压缩，还能缩小到2-3kb的大小，如果配合cdn策略，基本上能让你的H5游戏首页秒开。
