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