Cocos Creator—優化首頁打開速度

Cocos Creator是一個優秀的游戲引擎開發工具，很多地方都針對H5游戲做了專門的優化，這是我比較喜歡Cocos Creator的一點原因。

其中一個優化點是首頁的加載速度，開發組為了加快首頁的渲染速度，減少白屏時間，把邏輯代碼和首頁加載代碼做了徹底分離。首次頁面加載的只是一個相當於加載器的初始化文件，文件體積特別小，不像某些引擎，一開始就需要加載主邏輯js文件，一開始就給我來個上百kb的文件加載，然后才能顯示loading條，白屏時間當然會延長不少。

說到這里，不得不吐槽一下Cocos的開發文檔，居然沒有專門針對首頁loading條做任何說明，害我研究了半天都不知道怎么定制自己的首頁loading界面。這里如果有遇到不知道怎么定制首頁loading界面的同學，可以看我另一篇的文章：《Cocos Creator—定制H5游戲首頁loading界面》

話說回來，開發者雖然專門針對首頁加載時間做了優化，但對於前端頁面優化來說，還是不夠徹底的，我們還有不少優化時間。首先，我們看一下用Cocos Creator構建發布后的mobile-web頁面請求圖：

[e-mail]

在頁面首次出現之前，需要發起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

思路如下：

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，大功告成！壓縮后的請求如下圖：

cocos-creator-min.png

大家可以看到，原來的4個請求只剩下build一個請求了，而且經過服務器的gizp壓縮，還能縮小到2-3kb的大小，如果配合cdn策略，基本上能讓你的H5游戲首頁秒開。

完整代碼可以訪問：https://github.com/babyzone2004/cocosMd5，這個示例包含了Cocos Creator圖片壓縮優化，減少首次文件請求，html壓縮，動態更新定制loading圖等功能哦。

ps：

我們團隊正在招聘優秀的H5游戲開發工程師，如果你符合以下條件：

1. 白鷺引擎/Cocos2d-js/Layabox等H5相關的開發經驗
2. 希望快速成長，不甘平庸

請聯系我吧：[e-mail]

更多信息請戳：https://www.lagou.com/jobs/3083562.html?source=pl&i=pl-5