从Webpack统计文件中的模块大小计算资产大小

时间:2019-01-11 17:57:47

标签: webpack tree-shaking webpack-bundle-analyzer webpack-bundle

放置Webpack创建的stats.json文件,使得一个或modules组成一个chunk,一个或多个块组成一个asset

enter image description here

我正在尝试通过对构成资产的模块(组成块)的模块大小求和来计算资产的大小。在下面的代码段中,您可以假设jsonContents是整个webpack stats.json文件,chunkToModulesDict是一个字典,其中说明组成块的模块是什么,而moduleSizeDict是模块名称及其相应大小的字典。

function createAssetSizeDictWithoutDuplicates(jsonContents, chunkToModulesDict, moduleSizeDict){
    var assets = jsonContents.assets;
    var assetsSize = [];

    for(i = 0;i<assets.length;i++){
        var asset = assets[i];
        var size = 0;

        var modulesUsedByAsset = [];

        var chunksUsedByAsset = asset.chunks;
        for(j=0;j<chunksUsedByAsset.length;j++){
            var chunkId = chunksUsedByAsset[j];

            for(k=0;k<chunkToModulesDict[chunkId].length;k++){
                if(modulesUsedByAsset.indexOf(chunkToModulesDict[chunkId][k]) < 0){
                    modulesUsedByAsset.push(chunkToModulesDict[chunkId][k]);
                    size += moduleSizeDict[chunkToModulesDict[chunkId][k]];
                }   
            }
        }

        assetsSize[i] = size;
    }

    return assetsSize;
}

我发现统计文件中报告的资产大小与如上所述计算的资产大小不一致。但是,在根据stats.json文件中报告的资产大小绘制计算的资产大小时,我看到这些图形具有相似的形状。

enter image description here

我证实了我的假设,即计算值和报告值高度相关。

enter image description here

我的问题是如何从模块中更精确地计算资产的大小,以使计算出的大小在数值上与统计文件中报告的大小匹配。我正在尝试比较两个统计文件,并了解哪些资产的大小发生了变化,哪些模块对这些变化做出了很大贡献。webpack-bundle-analyzer是一个很好的工具,但是我希望创建简短的更改报告,而不必花费时间分析用户界面)

0 个答案:

没有答案