The stats.json
file created by Webpack, is laid down such that, one or modules
make up a chunk
, and one or more chunks make up an asset
.
I am trying to compute the size of the asset by summing the sizes of the modules that (make up the chunks that) make up the asset. In the snippet below, you may assume that jsonContents
is the entire webpack stats.json file, chunkToModulesDict
is a dictionary that says what are the modules that make up a chunk, and moduleSizeDict
is a dictionary of module names with their corresponding sizes.
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;
}
I observe that the size of the asset reported in the stats file does not tally with the size of the asset computed as stated above. However, on plotting the computed asset sizes against the asset sizes reported in the stats.json file, I see that the graphs have a similar shape.
I verified my hypothesis that the computed and reported values are highly correlated.
My question is How can I compute the sizes of the assets from the modules with more precision, such that the sizes computed numerically matches with the size reported in the stats file. I am trying to compare two stats files, and understand what assets got changed in size, and which modules contributed how much to those changes. (webpack-bundle-analyzer
is a great tool, however, I am looking to create a short report of the changes and not have to spend time analyzing the UI)