摘要：本篇我們會(huì)基于的官方示例做分析，我在原的基礎(chǔ)上增加了部署的腳本，部署到又拍云和騰訊云。文件資源增加版本號(hào)版本號(hào)的方案跟之前的文章基本一致，這個(gè)流程在版本應(yīng)該可以忽略了。

這篇文章主要是我們團(tuán)隊(duì)在使用Cocos Creator過(guò)程中的一些關(guān)于部署方面的實(shí)踐總結(jié)，標(biāo)題黨了一回，嚴(yán)格來(lái)說(shuō)，應(yīng)該是《快看漫畫(huà)游戲研發(fā)團(tuán)隊(duì)使用Cocos Creator構(gòu)建部署最佳實(shí)踐》，對(duì)于其他團(tuán)隊(duì)可能并不是。

之所以寫(xiě)這篇文章，一是我剛開(kāi)始接觸Cocos Creator的時(shí)候，發(fā)現(xiàn)構(gòu)建部署方面的一些問(wèn)題，針對(duì)性寫(xiě)了3篇優(yōu)化的方案，隨著對(duì)Cocos Creator了解的深入，我發(fā)現(xiàn)了一些更好的替代方法，二是因?yàn)槲覀儓F(tuán)隊(duì)隨著業(yè)務(wù)發(fā)展，又到了缺人的時(shí)候，出來(lái)刷刷臉，發(fā)點(diǎn)招聘廣告：Cocos Creator工程師快到碗里來(lái)。

不過(guò)你不用擔(dān)心，本文不會(huì)只是炒炒冷飯，這次涉及的內(nèi)容覆蓋了構(gòu)建部署的整個(gè)環(huán)節(jié)，如果你剛好把代碼寫(xiě)好了，你應(yīng)該看看本文，它會(huì)告訴你怎么把你的代碼漂亮的部署到線(xiàn)上，并且這里涉及的代碼你都可以通過(guò)github查看。涉及知識(shí)點(diǎn)如下：

如何自定義loading頁(yè)面

圖片部署自動(dòng)化壓縮優(yōu)化

減少loading頁(yè)面出現(xiàn)之前的白屏?xí)r間

代碼混淆與保護(hù)

文件資源增加md5版本號(hào)

cdn緩存

由于我們游戲采用的是1.6版本，所以還保留了md5版本號(hào)的優(yōu)化，新的1.7版本已經(jīng)比較完美支持md5的功能，但由于沒(méi)有在實(shí)踐中使用，所以還是基于1.6版本做一次總結(jié)，本質(zhì)是一樣的。

本篇我們會(huì)基于Cocos Creator的官方示例做分析，我在原demo的基礎(chǔ)上增加了部署的腳本，部署到又拍云和騰訊云。為了展示自定義loading頁(yè)面的功能，我把這個(gè)游戲的loading頁(yè)面改了，如果有問(wèn)題，麻煩官方聯(lián)系我下架。

這個(gè)需求官方其實(shí)是有提供解決方案的，官方文檔-“定制項(xiàng)目構(gòu)建模板”的功能就可以實(shí)現(xiàn)這個(gè)需求，可能是文檔描述得不太清楚，我當(dāng)時(shí)并沒(méi)有把這個(gè)功能跟“自定義加載首頁(yè)”聯(lián)系起來(lái)。

由于這個(gè)構(gòu)建模板功能，我們就可以不用gulp插件輕松實(shí)現(xiàn)自定義首頁(yè)HTML,CSS,JS的功能了。怎么實(shí)現(xiàn)可以訪(fǎng)問(wèn)本文的項(xiàng)目地址查看。

自定義loading頁(yè)面效果：

通過(guò)gulp工具，在部署之前自動(dòng)化處理一遍圖片壓縮流程，在無(wú)損壓縮的情況下，既能保證圖片的輸出質(zhì)量還能減少體積。有團(tuán)隊(duì)會(huì)手動(dòng)采用tinypng或者其他壓縮工具提前壓縮，這樣做也是可以的，但流程不好把控，原則上能自動(dòng)化處理的盡量讓機(jī)器來(lái)做，人是會(huì)累的但機(jī)器不會(huì)，也不會(huì)出錯(cuò)。

var imagemin = require("gulp-imagemin");
gulp.task("imagemin", function (cb) {
    gulp.src(["./build/web-mobile/**/*.png"])
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5})
        ]))
        .pipe(gulp.dest("./build/web-mobile/"))
        .on("end", cb);
});`

通過(guò)gulp-htmlmin插件，把首屏的js，css文件合并到首頁(yè)html文件，能有效減少網(wǎng)絡(luò)不穩(wěn)定情況下進(jìn)入游戲白屏的時(shí)間。

var htmlmin = require("gulp-htmlmin");
gulp.task("htmlmin", ["imagemin"], function (cb) {
    gulp.src("./build/web-mobile/*.html")
        .pipe(fileInline())
        .pipe(htmlmin({
            collapseWhitespace: true,
            removeComments: true,
            minifyCSS: true
        }))
        .pipe(gulp.dest("./build/web-mobile/")
            .on("end", cb));
});

通過(guò)合并操作，首屏loading頁(yè)面只需要加載index.html文件，在304情況下白屏?xí)r間只有142ms！

Cocos Creator引擎build后會(huì)對(duì)代碼進(jìn)行壓縮優(yōu)化，但通過(guò)強(qiáng)大的chrome工具格式化代碼后，還是能輕松閱讀代碼的整體邏輯，在競(jìng)爭(zhēng)激烈的游戲行業(yè)，代碼保護(hù)力度是不足夠的。由于代碼暴露在前端，H5游戲不存在加密可言，但我們可以做一些工作，增加游戲被破解盜竊的難度。

gulp-javascript-obfuscator插件可以對(duì)代碼進(jìn)行可讀性混淆，禁止開(kāi)啟chrome調(diào)試，域名綁定等功能，能很大程度保護(hù)自己的代碼，這個(gè)插件還有其他很強(qiáng)大的功能，有興趣可以訪(fǎng)問(wèn)github了解。但我不建議開(kāi)啟太多功能，畢竟對(duì)性能還是有一定影響。

var javascriptObfuscator = require("gulp-javascript-obfuscator");
gulp.task("obfuscator", ["htmlmin"], function (cb) {
    gulp.src(["./build/web-mobile/project.js"])
        .pipe(javascriptObfuscator({
            compact: true,
            domainLock: [".zz-game.com"],
            mangle: true,
            rotateStringArray: true,
            selfDefending: true,
            stringArray: true,
            target: "browser"
        }))
        .pipe(gulp.dest("./build/web-mobile")
            .on("end", cb));
});

我采用了最輕量的混淆方案，混淆前后對(duì)比：

混淆前：

TabCtrl: [function(t, e, i) {
        "use strict";
        cc._RF.push(e, "62208XJq9ZC2oNDeQGcbCab", "TabCtrl"),
        cc.Class({
            extends: cc.Component,
            properties: {
                idx: 0,
                icon: cc.Sprite,
                arrow: cc.Node,
                anim: cc.Animation
            },
            init: function(t) {
                this.sidebar = t.sidebar,
                this.idx = t.idx,
                this.icon.spriteFrame = t.iconSF,
                this.node.on("touchstart", this.onPressed.bind(this), this.node),
                this.arrow.scale = cc.p(0, 0)
            }
        }),
        cc._RF.pop()
    }
    , {}]
}, {}, ["ItemList", "ItemTemplate", "BackPackUI", "ButtonScaler", "ChargeUI", "EnergyCounter", "HeroSlot", "HomeUI", "PanelTransition", "ShopUI", "SubBtnsUI", "MainMenu", "MenuSidebar", "TabCtrl"]);

混淆后：

"l": [function(b, a, c) {
        "use strict";
        cc[_0xc008("0x12")][_0xc008("0x13")](a, _0xc008("0x98"), "l"),
        cc["T"]({
            "S": cc["U"],
            "O": {
                "idx": 0x0,
                "icon": cc[_0xc008("0x3e")],
                "arrow": cc["Node"],
                "anim": cc["Animation"]
            },
            "_": function(a) {
                this[_0xc008("0x68")] = a[_0xc008("0x68")],
                this["idx"] = a[_0xc008("0x7b")],
                this[_0xc008("0x66")][_0xc008("0x47")] = a[_0xc008("0x65")],
                this[_0xc008("0x1b")]["on"](_0xc008("0x99"), this[_0xc008("0x9a")][_0xc008("0x5e")](this), this[_0xc008("0x1b")]),
                this[_0xc008("0x9b")][_0xc008("0x9c")] = cc["p"](0x0, 0x0);
            }
        }),
        cc[_0xc008("0x12")][_0xc008("0x20")]();
    }
    , {}]
}, {}, ["i", "d", "f", "c", "j", "b", "h", "n", "a", "m", "g", "k", "e", "l"]);

在不影響性能的前提下，稍微做一些代碼保護(hù)，還是不錯(cuò)的。如果你想讓代碼更惡心一點(diǎn)也是可以的：

a.DFsJp;
        cc[a[_0xc91c("0x43a")](_0x490d30, a[_0xc91c("0x43b")])][a[_0xc91c("0x43c")](_0x490d30, _0xc91c("0xe5"))](b, a[_0xc91c("0x43c")](_0x490d30, a["x68x6dx41x4cx54"]), "x6c"),
        cc["x54"]({
            "S": cc["x55"],
            "O": {
                "idx": 0x0,
                "icon": cc[_0x490d30(_0xc91c("0x249"))],
                "arrow": cc["x4ex6fx64x65"],
                "anim": cc[a[_0xc91c("0x43d")]]
            },
            "_": function(b) {
                this[a[_0xc91c("0x43e")](_0x490d30, _0xc91c("0x31c"))] = b[a[_0xc91c("0x43e")](_0x490d30, "x30x78x36x38")],
                this[a[_0xc91c("0x43f")]] = b[_0x490d30(a[_0xc91c("0x440")])],
                this[_0x490d30(a[_0xc91c("0x441")])][_0x490d30(a["x6bx77x71x63x72"])] = b[_0x490d30(a[_0xc91c("0x442")])],
                this[_0x490d30(_0xc91c("0x1c0"))]["x6fx6e"](a[_0xc91c("0x43e")](_0x490d30, a[_0xc91c("0x443")]), this[a["x45x79x7ax47x44"](_0x490d30, a["x6ax64x44x61x6e"])][_0x490d30(_0xc91c("0x2e0"))](this), this[a[_0xc91c("0x444")](_0x490d30, _0xc91c("0x1c0"))]),
                this[a[_0xc91c("0x445")](_0x490d30, _0xc91c("0x446"))][a[_0xc91c("0x445")](_0x490d30, a[_0xc91c("0x447")])] = cc["x70"](0x0, 0x0);

開(kāi)啟debugProtection功能:

打開(kāi)chrome調(diào)試工具就會(huì)觸發(fā)無(wú)限循環(huán)的dubugger，讓chrome調(diào)試工具無(wú)法使用，增大破解難度。為了方便大家查看學(xué)習(xí)demo，線(xiàn)上版本我關(guān)閉了這個(gè)選項(xiàng)。

開(kāi)啟disableConsoleOutput功能：

禁止console.log功能，很多混淆代碼，通過(guò)斷點(diǎn)+console.log，可以方便把翻譯后的代碼輸出，開(kāi)啟disableConsoleOutput，同樣增加調(diào)試難度。為了把我們的廣告無(wú)處不在，我同樣把它關(guān)了。JavaScript obfuscator還有其他不錯(cuò)的功能，這里不再展開(kāi)。

版本號(hào)的方案跟之前的文章基本一致，這個(gè)流程在1.7版本應(yīng)該可以忽略了。

gulp.task("resRev", ["obfuscator"], function (cb) {
    gulp.src(["./build/web-mobile/**/*.js", "./build/web-mobile/*.png"])
        .pipe(rev())
        .pipe(gulp.dest("./build/web-mobile/"))
        .pipe(rev.manifest())
        .pipe(gulp.dest("./build/web-mobile/")
            .on("end", cb));
});
gulp.task("default", ["resRev"], function (cb) {
    del(["./build/web-mobile/src"]);
    gulp.src(["./build/web-mobile/*.json", "./build/web-mobile/index.html"])
        .pipe(revCollector())
        .pipe(gulp.dest("./build/web-mobile/"));
    gulp.src(["./build/web-mobile/*.json", "./build/web-mobile/main*.js"])
        .pipe(revCollector({
            replaceReved: true
        }))
        .pipe(gulp.dest("./build/web-mobile/")
            .on("end", cb));
});

通過(guò)md5+強(qiáng)緩存，第二次加載基本是毫秒級(jí)，瞬開(kāi)。

116個(gè)請(qǐng)求的頁(yè)面，只需要109ms就能渲染出loading頁(yè)面，完全加載所有資源只需要1.25s：

最后是把代碼部署到cdn，現(xiàn)在的云服務(wù)都提供cdn分發(fā)的功能，通過(guò)簡(jiǎn)單配置，我相信你能折騰出來(lái)的，所以不再贅述。

這里主要做不同方案的演示，我部署了兩個(gè)方案：直接回源和cdn分發(fā)。

首次訪(fǎng)問(wèn)

在Wifi網(wǎng)絡(luò)下，回源方案耗時(shí)6-10s，cdn分發(fā)方案耗時(shí)3-6s。

第二次訪(fǎng)問(wèn)

由于增加了強(qiáng)緩存，無(wú)論是cdn還是回源，第二次訪(fǎng)問(wèn)時(shí)間都在1-2s之間。

這個(gè)項(xiàng)目本身存在先天不足，例如圖片沒(méi)有合并，導(dǎo)致首次請(qǐng)求有116個(gè)，加載速度肯定會(huì)受影響。但通過(guò)cdn緩存方案，也能基本保證快速加載。

又拍cdn方案：

騰訊回源方案：

代碼我已經(jīng)部署到了又拍云和騰訊云，大家可以點(diǎn)擊訪(fǎng)問(wèn)感受加載速度。

直接回源的部署方案，點(diǎn)擊訪(fǎng)問(wèn)

采用cdn等優(yōu)化方案，點(diǎn)擊訪(fǎng)問(wèn)

cdn是比較好的優(yōu)化首次訪(fǎng)問(wèn)網(wǎng)絡(luò)速度的方案，但cdn也不是必然比源站快，大家測(cè)試時(shí)發(fā)現(xiàn)回源更快也不必驚訝，本質(zhì)上cdn節(jié)點(diǎn)就是距離你更近的代理服務(wù)器，但也有很多情況導(dǎo)致cdn緩慢，所以部署后還要通過(guò)工具多測(cè)試各個(gè)cdn節(jié)點(diǎn)的狀況。

游戲優(yōu)化肯定不僅僅這幾條，有很多優(yōu)化要根據(jù)實(shí)際情況實(shí)際分析。但這6點(diǎn)實(shí)踐，應(yīng)該可以解決論壇經(jīng)常提到的緩存刷新，加載速度等部署相關(guān)的問(wèn)題。

資源md5+cdn+強(qiáng)緩存 能解決80%H5游戲加載速度的問(wèn)題，特別是第二次訪(fǎng)問(wèn)，2秒打開(kāi)輕輕松松，基本已經(jīng)成為web前端優(yōu)化的工業(yè)標(biāo)準(zhǔn)方案。但現(xiàn)在很多線(xiàn)上的H5游戲還有很多走url參數(shù)+時(shí)間戳/md5的老方案，這種方案有很多弊端。希望通過(guò)本文，大家都能在自己的游戲內(nèi)把資源md5+cdn+強(qiáng)緩存的方案貫徹執(zhí)行起來(lái)。其實(shí)很簡(jiǎn)單，特別是Cocos Creator1.7版本后就更方便了。H5游戲的優(yōu)勢(shì)就是即點(diǎn)即玩，如果這點(diǎn)都做不到，就沒(méi)什么優(yōu)勢(shì)了。

說(shuō)了這么多，你可能覺(jué)得實(shí)踐起來(lái)很麻煩，業(yè)務(wù)太多沒(méi)時(shí)間搞這些。

沒(méi)關(guān)系，本文買(mǎi)一送一，既然你看到這里，說(shuō)明你也是有緣之人，我把代碼倉(cāng)庫(kù)也贈(zèng)送給你，例子源碼我放在了github cocos-fly上，有需要大家可以上去下載。

把gulpfile.js和releash.sh扒下來(lái)，只需要執(zhí)行命令：sh releash，就可以一鍵構(gòu)建出可發(fā)布的代碼。

線(xiàn)上示例+源碼+教程一條龍，還不趕緊引入自己的項(xiàng)目？。