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

這篇文章主要是我們團隊在使用Cocos Creator過程中的一些關于部署方面的實踐總結，標題黨了一回，嚴格來說，應該是《快看漫畫游戲研發團隊使用Cocos Creator構建部署最佳實踐》，對于其他團隊可能并不是。

之所以寫這篇文章，一是我剛開始接觸Cocos Creator的時候，發現構建部署方面的一些問題，針對性寫了3篇優化的方案，隨著對Cocos Creator了解的深入，我發現了一些更好的替代方法，二是因為我們團隊隨著業務發展，又到了缺人的時候，出來刷刷臉，發點招聘廣告：Cocos Creator工程師快到碗里來。

不過你不用擔心，本文不會只是炒炒冷飯，這次涉及的內容覆蓋了構建部署的整個環節，如果你剛好把代碼寫好了，你應該看看本文，它會告訴你怎么把你的代碼漂亮的部署到線上，并且這里涉及的代碼你都可以通過github查看。涉及知識點如下：

如何自定義loading頁面

圖片部署自動化壓縮優化

減少loading頁面出現之前的白屏時間

代碼混淆與保護

文件資源增加md5版本號

cdn緩存

由于我們游戲采用的是1.6版本，所以還保留了md5版本號的優化，新的1.7版本已經比較完美支持md5的功能，但由于沒有在實踐中使用，所以還是基于1.6版本做一次總結，本質是一樣的。

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

這個需求官方其實是有提供解決方案的，官方文檔-“定制項目構建模板”的功能就可以實現這個需求，可能是文檔描述得不太清楚，我當時并沒有把這個功能跟“自定義加載首頁”聯系起來。

由于這個構建模板功能，我們就可以不用gulp插件輕松實現自定義首頁HTML,CSS,JS的功能了。怎么實現可以訪問本文的項目地址查看。

自定義loading頁面效果：

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

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);
});`

通過gulp-htmlmin插件，把首屏的js，css文件合并到首頁html文件，能有效減少網絡不穩定情況下進入游戲白屏的時間。

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));
});

通過合并操作，首屏loading頁面只需要加載index.html文件，在304情況下白屏時間只有142ms！

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

gulp-javascript-obfuscator插件可以對代碼進行可讀性混淆，禁止開啟chrome調試，域名綁定等功能，能很大程度保護自己的代碼，這個插件還有其他很強大的功能，有興趣可以訪問github了解。但我不建議開啟太多功能，畢竟對性能還是有一定影響。

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));
});

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

混淆前：

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"]);

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

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);

開啟debugProtection功能:

打開chrome調試工具就會觸發無限循環的dubugger，讓chrome調試工具無法使用，增大破解難度。為了方便大家查看學習demo，線上版本我關閉了這個選項。

開啟disableConsoleOutput功能：

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

版本號的方案跟之前的文章基本一致，這個流程在1.7版本應該可以忽略了。

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));
});

通過md5+強緩存，第二次加載基本是毫秒級，瞬開。

116個請求的頁面，只需要109ms就能渲染出loading頁面，完全加載所有資源只需要1.25s：

最后是把代碼部署到cdn，現在的云服務都提供cdn分發的功能，通過簡單配置，我相信你能折騰出來的，所以不再贅述。

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

首次訪問

在Wifi網絡下，回源方案耗時6-10s，cdn分發方案耗時3-6s。

第二次訪問

由于增加了強緩存，無論是cdn還是回源，第二次訪問時間都在1-2s之間。

這個項目本身存在先天不足，例如圖片沒有合并，導致首次請求有116個，加載速度肯定會受影響。但通過cdn緩存方案，也能基本保證快速加載。

又拍cdn方案：

騰訊回源方案：

代碼我已經部署到了又拍云和騰訊云，大家可以點擊訪問感受加載速度。

直接回源的部署方案，點擊訪問

采用cdn等優化方案，點擊訪問

cdn是比較好的優化首次訪問網絡速度的方案，但cdn也不是必然比源站快，大家測試時發現回源更快也不必驚訝，本質上cdn節點就是距離你更近的代理服務器，但也有很多情況導致cdn緩慢，所以部署后還要通過工具多測試各個cdn節點的狀況。

游戲優化肯定不僅僅這幾條，有很多優化要根據實際情況實際分析。但這6點實踐，應該可以解決論壇經常提到的緩存刷新，加載速度等部署相關的問題。

資源md5+cdn+強緩存 能解決80%H5游戲加載速度的問題，特別是第二次訪問，2秒打開輕輕松松，基本已經成為web前端優化的工業標準方案。但現在很多線上的H5游戲還有很多走url參數+時間戳/md5的老方案，這種方案有很多弊端。希望通過本文，大家都能在自己的游戲內把資源md5+cdn+強緩存的方案貫徹執行起來。其實很簡單，特別是Cocos Creator1.7版本后就更方便了。H5游戲的優勢就是即點即玩，如果這點都做不到，就沒什么優勢了。

說了這么多，你可能覺得實踐起來很麻煩，業務太多沒時間搞這些。

沒關系，本文買一送一，既然你看到這里，說明你也是有緣之人，我把代碼倉庫也贈送給你，例子源碼我放在了github cocos-fly上，有需要大家可以上去下載。

把gulpfile.js和releash.sh扒下來，只需要執行命令：sh releash，就可以一鍵構建出可發布的代碼。

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