Cocos Creator是一個優(yōu)秀的游戲引擎開發(fā)工具烂斋，很多地方都針對H5游戲做了專門的優(yōu)化，這是我比較喜歡Cocos Creator的一點(diǎn)原因张弛。
其中一個優(yōu)化點(diǎn)是首頁的加載速度愉老，開發(fā)組為了加快首頁的渲染速度嚷节，減少白屏?xí)r間，把邏輯代碼和首頁加載代碼做了徹底分離扩所。首次頁面加載的只是一個相當(dāng)于加載器的初始化文件围详，文件體積特別小，不像某些引擎碌奉，一開始就需要加載主邏輯js文件短曾，一開始就給我來個上百kb的文件加載寒砖，然后才能顯示loading條，白屏?xí)r間當(dāng)然會延長不少嫉拐。
話說回來哩都，開發(fā)者雖然專門針對首頁加載時間做了優(yōu)化，但對于前端頁面優(yōu)化來說婉徘，還是不夠徹底的漠嵌，我們還有不少優(yōu)化時間。首先盖呼，我們看一下用Cocos Creator構(gòu)建發(fā)布后的mobile-web頁面請求圖：
在頁面首次出現(xiàn)之前儒鹿，需要發(fā)起4個請求，并且這4個請求都是小文件几晤，其實(shí)是沒有必要的约炎，特別是在服務(wù)器端還有g(shù)zip壓縮的情況，更理想的情況是一個請求就能完成所有的工作蟹瘾。
另外這4個文件都沒有經(jīng)過代碼壓縮圾浅，例如html文件：
這里也有不少優(yōu)化空間。
綜上所述憾朴，我們有了壓縮合并的方案狸捕，這里可以通過gulp實(shí)現(xiàn)。
有些同學(xué)會問：webpack更酷更流行為什么不用webpack众雷？答：因?yàn)閣ebpack本質(zhì)上是模塊化打包方案灸拍，我們這里只是簡單對代碼做一些構(gòu)建處理，用gulp更輕量更合適砾省。
gulp安裝請?jiān)L問：https://gulpjs.com/
nodejs安裝請?jiān)L問：http://nodejs.org/
另外需要安裝gulp相關(guān)插件：gulp-inline-source gulp-htmlmin
思路如下：
通過gulp-file-inline把style-mobile.css鸡岗，settings.js，main.js inline到html文件纯蛾，減少請求
通過gulp-htmlmin把html文件壓縮纤房，減少空格，壓縮代碼量翻诉，減少文件體積
具體步驟：
- 安裝node、gulp
- 找到自己的項(xiàng)目捌刮，在自己的項(xiàng)目下
npm init命令初始化當(dāng)前項(xiàng)目文件夾包管理文件，系統(tǒng)會自動生成package.json文件 - 在當(dāng)前項(xiàng)目下命令安裝插件
npm install gulp-inline-source --save-dev
npm install gulp-htmlmin --save-dev
- 項(xiàng)目文件夾根目錄下創(chuàng)建gulpfile.js文件
const gulp = require('gulp');
const inlinesource = require('gulp-inline-source');
const htmlmin = require('gulp-htmlmin');
const clean = require('del');
gulp.task('inlinesource', function () {
var options = {
compress: false
};
return gulp.src('./build/web-mobile/*.html')
.pipe(inlinesource(options))
.pipe(htmlmin({
collapseWhitespace: true,
minifyJS: true,
minifyCSS: true
}))
.pipe(gulp.dest('./build/web-mobile'));
})
- 找到
build-templates/web-mobile/index.html文件，分別添加注釋
<!-- inline style-mobile.css -->
<link rel="stylesheet" type="text/css" href="style-mobile.css" inline/>
...
<!-- inline src/settings.js -->
<script src="src/settings.js" charset="utf-8" inline></script>
<!-- inline main.js -->
<script src="main.js" charset="utf-8" inline></script>
- 構(gòu)建項(xiàng)目
- 在當(dāng)前項(xiàng)目下督弓，命令行里面執(zhí)行
gulp inlinesource或者在vscode安裝Gulp Task骤竹、Gulp Snippets，然后在vscode-目錄-Gulp Task-gulpfile.js-inlinesource-點(diǎn)擊Gulp Task右邊的綠色三角形即可 - 刪除
build/web-mobile/style-mobile.xxx.css俄认，build/web-mobile/src/settings.xxx.js个少，build/web-mobile/main.xxx.js - 大功告成洪乍！壓縮后的請求如下圖：
大家可以看到，原來的4個請求只剩下build一個請求了夜焦，而且經(jīng)過服務(wù)器的gizp壓縮壳澳，還能縮小到2-3kb的大小，如果配合cdn策略茫经，基本上能讓你的H5游戲首頁秒開巷波。
