Cocos Creator 资源加载流程剖析【四】——额外流程（MD5 PIPE)

当我们将游戏构建发布到web平台时，勾选Md5 Cache选项可以开启MD5 Pipe，它的作用是给构建后的资源加上md5后缀，避免浏览器的缓存导致部分资源不是最新，因为使用了md5后缀后，当资源内容发生变化时，资源的名字就不一样了，缓存就会失效。

比如6e056173-d285-473c-b206-40a7fff5386e.json，在开启了MD5 Cache选项之后再构建会生成6e056173-d285-473c-b206-40a7fff5386e.a548e.json，在文件后缀.json前加上了一个简化的md5——a548e。

开启 MD5 PIPE

勾选了Md5 Cache选项后进行构建，生成的web-mobile/src/settings.xxx.js文件中会设置一个全局变量_CCSettings，该变量中有一个md5AssetsMap字段记录所有资源文件的简化md5。

    md5AssetsMap: {
        "08/08ddbd1c9.json": "ade93",
        "6e/6e056173-d285-473c-b206-40a7fff5386e.json": "a548e",
        "assets/6e/6e056173-d285-473c-b206-40a7fff5386e.png": "68270"
    }

在Creator生成的main.xxx.js中会获取_CCSettings变量进行处理，一个关键的地方就是cc.AssetLibrary.init，将settings.md5AssetsMap传入AssetLibrary。

cc.AssetLibrary.init({
    libraryPath: 'res/import',
    rawAssetsBase: 'res/raw-',
    rawAssets: settings.rawAssets,
    packedAssets: settings.packedAssets,
    md5AssetsMap: settings.md5AssetsMap
});

在cc.AssetLibrary.init中，根据md5AssetsMap变量决定是否创建MD5Pipe，将md5Pipe插入到cc.loader.assetLoader之后。

    var md5AssetsMap = options.md5AssetsMap;
    if (md5AssetsMap) {
        var md5Pipe = new MD5Pipe(md5AssetsMap, _libraryBase, _rawAssetsBase);
        cc.loader.insertPipeAfter(cc.loader.assetLoader, md5Pipe);
        cc.loader.md5Pipe = md5Pipe;
    }

在一些核心模块中，我们可以看到直接使用url时，都会检测是否存在cc.loader.md5Pipe，有则调用其transformURL对url进行处理，比如CCVideoPlayer.js，这些处理属于不走Pipeline的路径处理，属于这些组件的内部逻辑。

    _updateVideoSource: function () {
        var sgNode = this._sgNode;
        let url = '';
        if (this.resourceType === ResourceType.REMOTE) {
            url = this.remoteURL;
        }
        else if (this._clip) {
            url = this._clip.nativeUrl || '';
        }
        if (url && cc.loader.md5Pipe) {
            url = cc.loader.md5Pipe.transformURL(url);
        }
        sgNode.setURL(url);
    },

MD5 PIPE的实现

Md5 Pipe的实现非常简单（位于load-pipeline下的md5-pipe.js），它只对res/import或res/raw-开头的url进行处理，根据md5AssetsMap对应的精简md5值，重新组装url。

MD5Pipe.prototype.transformURL = function (url, hashPatchInFolder) {
    var index = url.indexOf('?');
    var key = url;
    if (index !== -1) {
        key = url.substr(0, index);
    }
    // 如果是以libraryBase开头'res/import'，去掉这个前缀
    if (key.startsWith(this.libraryBase)) {
        key = key.slice(this.libraryBase.length);
    // 如果是以rawAssetsBase开头'res/raw-'，也去掉这个前缀
    } else if (key.startsWith(this.rawAssetsBase)) {
        key = key.slice(this.rawAssetsBase.length);
    } else {
    // 其他情况不处理，比如是一个完整的http链接
        return url;
    }
    
    // 取出该资源对应的精简md5
    let hashValue = this.md5AssetsMap[key];
    if (hashValue) {
        // 如果hashPatchInFolder为true则将这个md5组装到目录下
        // JSB下的Spine、Label都有使用hashPatchInFolder
        if (hashPatchInFolder) {
            var dirname = cc.path.dirname(url);
            var basename = cc.path.basename(url);
            url = `${dirname}.${hashValue}/${basename}`;
        } else {
        // 正常情况是将精简md5插入到文件扩展名之前
            var matched = false;
            url = url.replace(ExtnameRegex, (function(match, p1) {
                matched = true;
                return "." + hashValue + p1;
            }));
            if (!matched) {
                url = url + "." + hashValue
            }
        }
    }
    return url;
};