What makes Sonda accurate?
TL;DR
It's the source maps.
Would you use a measurement tool if you knew it provided inaccurate results? Of course not. You need reliable and accurate information.
That’s why one of the key features of Sonda is its accuracy. But what makes Sonda accurate? The answer is straightforward, but first, let's examine why other bundle analyzers often provided inaccurate results in the past.
Why are (some) other bundle analyzers inaccurate?
If you’ve used other bundle analyzers, you may have noticed results that were significantly off, often showing bundle sizes much larger than they actually were on disk. Why does this happen?
Web bundlers like webpack and Rollup have various hooks that allow plugins to access or modify data at different stages of the bundling process. It’s crucial for these plugins to execute at the correct stages; otherwise, they could interfere with or break other plugins.
Consider two plugins: one that transforms code (e.g., TypeScript or JSX to JavaScript) and another that minifies and optimizes the code. The transformation plugin must run before the minification plugin because the latter cannot process TypeScript. Thanks to the hook system, plugins can specify their execution stages, ensuring the correct order in most cases.
The problem with relying on hooks
Some bundle analyzers attempt to gather data directly from the bundler through these hooks. However, critical bundling steps like tree-shaking, minification, and obfuscation occur at the final stages. Analyzers using intermediate data from the hook system often fail to capture these final transformations, leading to inaccurate results that overestimate bundle sizes.
How does Sonda solve this problem?
Since the data from bundlers is often incomplete until the final stages, Sonda takes a different approach. Instead of relying solely on the hook system, it waits for the bundler to finish its job and then analyzes the source maps.
Source maps trace parts of the final bundle back to the original code. These maps, generated by the bundler, allow browsers to display the original code in developer tools, even if the runtime code is minified.
By analyzing source maps, Sonda can accurately determine how much each file contributes to the final bundle. This method ensures that the reported sizes closely match the actual bundle on disk.
Does Sonda use the hook system?
Yes, but only for additional context. Sonda uses the hook system to gather non-critical information, such as:
- A list of parsed source files and their sizes
- Module format types (ESM, CJS, etc.)
- Lists of imports
This supplementary data helps provide more context for debugging but is not essential for accuracy.
Positive side effect of relying on source maps
An unintended benefit of relying primarily on source maps is that Sonda minimizes dependence on specific bundler internals. This design makes Sonda compatible with almost any bundler since all major bundlers can generate source maps.
As a result, Sonda works seamlessly with Vite, Rollup, Rolldown, esbuild, webpack, Rspack, and even more bundlers supported in the future.