Cocos Creator 打包WebMobile，实现资源代码分离，部署 cdn

前言

CDN优势

大型Web应用对速度的追求并没有止步于仅仅利用浏览器缓存，因为浏览器缓存始终只是为了提升二次访问的速度，对于首次访问的加速，我们需要从网络层面进行优化，最常见的手段就是CDN（Content Delivery Network，内容分发网络）加速。CDN通过分布式方案，通过空间换时间的方法，用冗余的空间换取时间，是典型的分布式实例。

其核心就在于用户和网站服务器的物理距离以及传输速度，CDN通过缓存机制简单粗暴地缩短用户和访问内容的距离，以达到加速访问的效果。通过将静态资源缓存到离用户很近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的带宽消耗，降低负载。

正文

v2.4 以下

如果打包WebMobile 后结构如下

main文件改之前

window.boot = function () { 
    var settings = window._CCSettings;
	...
    // init assets
    cc.AssetLibrary.init({
        libraryPath: 'res/import',
        rawAssetsBase: 'res/raw-',
        rawAssets: settings.rawAssets,
        packedAssets: settings.packedAssets,
        md5AssetsMap: settings.md5AssetsMap,
        subpackages: settings.subpackages
    });

    cc.game.run(option, onStart);
};

main文件改之后

window.boot = function () {
    var remote_url = "https://<your cdn domain>/<publishConfig.baseDir>/<versionFolder>/";
    var settings = window._CCSettings;
	...
    // init assets
    cc.AssetLibrary.init({
        libraryPath: remote_url + 'res/import',
        rawAssetsBase: remote_url + 'res/raw-',
        rawAssets: settings.rawAssets,
        packedAssets: settings.packedAssets,
        md5AssetsMap: settings.md5AssetsMap,
        subpackages: settings.subpackages
    });

    cc.game.run(option, onStart);
};

v2.4

Cocos Creator 从 v2.4 开始，推出了 Asset Bundle 功能，支持 代码、资源 和 场景 的分包加载。结构做出了相应改变，但是只要我们细心查找 一定能发现 cc.assetManager.loadBundle 加载资源使用的，接下来我们就从此入手。

如果打包WebMobile 后结构如下

main文件修改之前

window.boot = function () {
	...
    var bundleRoot = [INTERNAL];
    settings.hasResourcesBundle && bundleRoot.push(RESOURCES);

    var count = 0;
    function cb (err) {
        if (err) return console.error(err.message, err.stack);
        count++;
        if (count === bundleRoot.length + 1) {
            cc.assetManager.loadBundle(MAIN, function (err) {
                if (!err) cc.game.run(option, onStart);
            });
        }
    }

    cc.assetManager.loadScript(settings.jsList.map(function (x) { return 'src/' + x;}), cb);

    for (var i = 0; i < bundleRoot.length; i++) {
	    cc.assetManager.loadBundle(bundleRoot[i], cb);
    }
	...
}

main文件修改之后

// CDN 路径
var remote_url="https://<your cdn domain>/<publishConfig.baseDir>/<versionFolder>/assets/";

window.boot = function () {
	...
    var bundleRoot = [INTERNAL];
    settings.hasResourcesBundle && bundleRoot.push(RESOURCES);

    var count = 0;
    function cb (err) {
        if (err) return console.error(err.message, err.stack);
        count++;
        if (count === bundleRoot.length + 1) {
            console.log('main 地址：' + MAIN);
            cc.assetManager.loadBundle(remote_url + MAIN, function (err) {
                if (!err) cc.game.run(option, onStart);
            });
        }
    }

    cc.assetManager.loadScript(settings.jsList.map(function (x) { return 'src/' + x;}), cb);

    // for (var i = 0; i < bundleRoot.length; i++) {
    //     cc.assetManager.loadBundle(bundleRoot[i], cb);
    // }

    for (var i = 0; i < bundleRoot.length; i++) {
        console.log('其他地址：' + bundleRoot[i]);
        cc.assetManager.loadBundle(remote_url+bundleRoot[i], cb);
    }
	...
}

附

若阅读上述后还是没看明白，建议到Cocos Creator官方地址进行查看。官方还给出了
通过自定义构建模板功能修改 main.js 中的代码，简附

// ...

let bundleRoot = [];
// 加入 internal bundle 的 URL 地址
bundleRoot.push('http://myserver.com/assets/internal');
// 如果有 resources bundle, 则加入 resources bundle 的 URL 地址
bundleRoot.push('http://myserver.com/assets/resources');
// 加入 main bundle 的 URL 地址
bundleRoot.push('http://myserver.com/assets/main');

var count = 0;
function cb (err) {
    if (err) {
        return console.error(err.message, err.stack);
    }
    count++;
    if (count === bundleRoot.length + 1) {
        cc.game.run(option, onStart);
    }
}

cc.assetManager.loadScript(settings.jsList.map(x => 'src/' + x), cb);

for (let i = 0; i < bundleRoot.length; i++) {
    cc.assetManager.loadBundle(bundleRoot[i], cb);
}