3

stats.jsonWebpack 创建的文件是这样放置的，一个或多个modules组成一个 . chunk，一个或多个块组成一个asset.

在此处输入图像描述

我试图通过对构成资产的模块的大小（组成块）求和来计算资产的大小。在下面的代码片段中，您可以假设这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 文件中报告的资产大小绘制计算出的资产大小时，我发现这些图表具有相似的形状。

在此处输入图像描述

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

在此处输入图像描述

我的问题是如何更精确地计算模块中资产的大小，以使计算出的大小与统计文件中报告的大小相匹配。我正在尝试比较两个统计文件，并了解哪些资产的大小发生了变化，以及哪些模块对这些变化贡献了多少。（webpack-bundle-analyzer是一个很棒的工具，但是，我希望创建一份简短的更改报告，而不必花时间分析 UI）

4

0 回答 0