Cocos Creator—優化首頁打開速度

Cocos Creator是一個優秀的遊戲引擎開發工具，不少地方都針對H5遊戲作了專門的優化，這是我比較喜歡Cocos Creator的一點緣由。

其中一個優化點是首頁的加載速度，開發組爲了加快首頁的渲染速度，減小白屏時間，把邏輯代碼和首頁加載代碼作了完全分離。首次頁面加載的只是一個至關於加載器的初始化文件，文件體積特別小，不像某些引擎，一開始就須要加載主邏輯js文件，一開始就給我來個上百kb的文件加載，而後才能顯示loading條，白屏時間固然會延長很多。

說到這裏，不得不吐槽一下Cocos的開發文檔，竟然沒有專門針對首頁loading條作任何說明，害我研究了半天都不知道怎麼定製本身的首頁loading界面。這裏若是有遇到不知道怎麼定製首頁loading界面的同窗，能夠看我另外一篇的文章：《Cocos Creator—定製H5遊戲首頁loading界面》

話說回來，開發者雖然專門針對首頁加載時間作了優化，但對於前端頁面優化來講，仍是不夠完全的，咱們還有很多優化時間。首先，咱們看一下用Cocos Creator構建發佈後的mobile-web頁面請求圖：

WX20170728-210429@2x.png

在頁面首次出現以前，須要發起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. 但願快速成長，不甘平庸

請聯繫我吧：babyzone2004@qq.com

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