放置Webpack创建的stats.json
文件,使得一个或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
是一个很好的工具,但是我希望创建简短的更改报告,而不必花费时间分析用户界面)