Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarification on Size Discrepancies Between JSON and Terminal Output #24

Open
Marwillus opened this issue Dec 3, 2024 · 2 comments
Open

Comments

@Marwillus
Copy link

Marwillus commented Dec 3, 2024

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
Copy link
Author

Marwillus commented Dec 19, 2024

I added a minimal reproduction repo

Sizes are still differ from each other

vite build:
image
json:
image
html:
image

@Zegnat
Copy link

Zegnat commented Jan 9, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants