Cocos Creator是一個(gè)優(yōu)秀的游戲引擎開發(fā)工具，很多地方都針對(duì)H5游戲做了專門的優(yōu)化，這是我比較喜歡Cocos Creator的一點(diǎn)原因。
其中一個(gè)優(yōu)化點(diǎn)是首頁(yè)的加載速度，開發(fā)組為了加快首頁(yè)的渲染速度，減少白屏?xí)r間，把邏輯代碼和首頁(yè)加載代碼做了徹底分離。首次頁(yè)面加載的只是一個(gè)相當(dāng)于加載器的初始化文件，文件體積特別小，不像某些引擎，一開始就需要加載主邏輯js文件，一開始就給我來(lái)個(gè)上百kb的文件加載，然后才能顯示loading條，白屏?xí)r間當(dāng)然會(huì)延長(zhǎng)不少。
說(shuō)到這里，不得不吐槽一下Cocos的開發(fā)文檔，居然沒(méi)有專門針對(duì)首頁(yè)loading條做任何說(shuō)明，害我研究了半天都不知道怎么定制自己的首頁(yè)loading界面。這里如果有遇到不知道怎么定制首頁(yè)loading界面的同學(xué)，可以看我另一篇的文章：《Cocos Creator—定制H5游戲首頁(yè)loading界面》
話說(shuō)回來(lái)，開發(fā)者雖然專門針對(duì)首頁(yè)加載時(shí)間做了優(yōu)化，但對(duì)于前端頁(yè)面優(yōu)化來(lái)說(shuō)，還是不夠徹底的，我們還有不少優(yōu)化時(shí)間。首先，我們看一下用Cocos Creator構(gòu)建發(fā)布后的mobile-web頁(yè)面請(qǐng)求圖：
在頁(yè)面首次出現(xiàn)之前，需要發(fā)起4個(gè)請(qǐng)求，并且這4個(gè)請(qǐng)求都是小文件，其實(shí)是沒(méi)有必要的，特別是在服務(wù)器端還有g(shù)zip壓縮的情況，更理想的情況是一個(gè)請(qǐng)求就能完成所有的工作。
另外這4個(gè)文件都沒(méi)有經(jīng)過(guò)代碼壓縮，例如html文件：
這里也有不少優(yōu)化空間。
綜上所述，我們有了壓縮合并的方案，這里可以通過(guò)gulp實(shí)現(xiàn)。
有些同學(xué)會(huì)問(wèn)：webpack更酷更流行為什么不用webpack？答：因?yàn)閣ebpack本質(zhì)上是模塊化打包方案，我們這里只是簡(jiǎn)單對(duì)代碼做一些構(gòu)建處理，用gulp更輕量更合適。
gulp安裝請(qǐng)?jiān)L問(wèn)：https://gulpjs.com/
nodejs安裝請(qǐng)?jiān)L問(wèn)：http://nodejs.org/
另外需要安裝gulp相關(guān)插件：gulp-file-inline gulp-htmlmin
思路如下：
- 通過(guò)gulp-file-inline把style-mobile.css，settings.js，main.js inline到html文件，減少請(qǐng)求
- 通過(guò)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));
});
在命令行里面執(zhí)行gulp，大功告成！壓縮后的請(qǐng)求如下圖：
大家可以看到，原來(lái)的4個(gè)請(qǐng)求只剩下build一個(gè)請(qǐng)求了，而且經(jīng)過(guò)服務(wù)器的gizp壓縮，還能縮小到2-3kb的大小，如果配合cdn策略，基本上能讓你的H5游戲首頁(yè)秒開。
完整代碼可以訪問(wèn)：https://github.com/babyzone2004/cocosMd5，這個(gè)示例包含了Cocos Creator圖片壓縮優(yōu)化，減少首次文件請(qǐng)求，html壓縮，動(dòng)態(tài)更新定制loading圖等功能哦。
ps：
我們團(tuán)隊(duì)正在招聘優(yōu)秀的H5游戲開發(fā)工程師，如果你符合以下條件：
- 白鷺引擎/Cocos2d-js/Layabox等H5相關(guān)的開發(fā)經(jīng)驗(yàn)
- 希望快速成長(zhǎng)，不甘平庸
請(qǐng)聯(lián)系我吧：babyzone2004@qq.com
更多信息請(qǐng)戳：https://www.lagou.com/jobs/3083562.html?source=pl&i=pl-5
