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