Clarification on Size Discrepancies Between JSON and Terminal Output

[Marwillus]

Hi,

Thank you for this amazing tool! I’ve noticed a discrepancy when analyzing my app bundle using the visualizer. Specifically, the sizes reported in the generated bundle.json file differ significantly from the sizes displayed in the terminal output during the build process.

For example:

From the terminal output:

dist/client/assets/chunks/chunk-CN2Q8Tw2.js  |  9,744.70 kB  
dist/client/assets/chunks/chunk-CRpnTl9S.js  |  6,505.78 kB  
dist/client/assets/chunks/chunk-C2gsb-kF.js  |  3,232.17 kB  

Used Script: npx vite-bundle-visualizer -o=./analyse/bundle.json -t='raw-data' -c vite.config.ts

From the bundle.json (parsed output):

[
  { "name": "assets/chunks/chunk-CN2Q8Tw2.js", "size": 3,271,992 },
  { "name": "assets/chunks/chunk-CRpnTl9S.js", "size": 2,395,326 },
  { "name": "assets/chunks/chunk-C2gsb-kF.js", "size": 1,361,724 }
]

How the file size was calculated:

const fs = require('fs');

function calculateChildSizes(node, nodeParts) {
  if (!node.children || node.children.length === 0) {
    if (node.uid && nodeParts[node.uid]) {
      return nodeParts[node.uid].renderedLength;
    }
    return 0;
  }

  return node.children.reduce((sum, child) => {
    return sum + calculateChildSizes(child, nodeParts);
  }, 0);
}

function extractSizes(json) {
  const nodeParts = json.nodeParts;
  const results = [];

  function traverse(node) {
    if (node.name) {
      const size = calculateChildSizes(node, nodeParts);
      results.push({ name: node.name, size });
    }
    if (node.children) {
      node.children.forEach(traverse);
    }
  }

  traverse(json.tree);

  const topThree = results.sort((a, b) => b.size - a.size).slice(0, 10);

  console.log('Top 10 Biggest Children:', topThree);
}

const jsonFile = './bundle.json';
const jsonData = JSON.parse(fs.readFileSync(jsonFile, 'utf8'));

extractSizes(jsonData);

Could you explain why these size values differ? Is there a specific compression or transformation process that alters the numbers reported in the JSON compared to the terminal output?

Thank you in advance for your help!

[Marwillus]

I added a minimal reproduction repo

Sizes are still differ from each other

vite build: json: html:

[Zegnat]

This is an upstream thing in rollup-plugin-visualizer, see https://github.com/btd/rollup-plugin-visualizer/issues/96. Have you tested running vite-bundle-visualizer with the --sourcemap flag?