Sonda

Sonda is a universal visualizer and analyzer for JavaScript and CSS bundles. It analyzes the source maps and shows the size of each module after tree-shaking and minification to get the most accurate report.

Sonda works with the following bundlers:

• Vite
• Rollup
• esbuild
• webpack
• Rspack

Installation

Start by installing the package:

npm install sonda --save-dev

Then register the bundler-specific plugin and enable the source maps. Remember to use Sonda in development mode only.

// vite.config.js

import { defineConfig } from 'vite';
import { SondaRollupPlugin } from 'sonda';

export default defineConfig( {
  plugins: [
    SondaRollupPlugin(),
  ],
  build: {
    sourcemap: true
  }
} );

// rollup.config.js

import { defineConfig } from 'rollup';
import { SondaRollupPlugin } from 'sonda';

export default defineConfig( {
  output: {
    // Other options are skipped for brevity
    sourcemap: true,
  },
  plugins: [
    SondaRollupPlugin(),
  ]
} );

commonjs( {
  sourceMap: true,
} ),
styles( {
  mode: 'extract',
  sourceMap: true,
} )

import { build } from 'esbuild';
import { SondaEsbuildPlugin } from 'sonda';

build( {
  sourcemap: true,
  plugins: [
    SondaEsbuildPlugin()
  ]
} );

// webpack.config.js

const { SondaWebpackPlugin } = require( 'sonda' );

module.exports = {
  devtool: 'source-map',
  plugins: [
    new SondaWebpackPlugin(),
  ],
};

// rspack.config.js

import { SondaWebpackPlugin } from 'sonda';

export default {
  devtool: 'source-map',
  plugins: [
    new SondaWebpackPlugin(),
  ],
};

Options

Each plugin accepts an optional configuration object with the following options. Example:

SondaRollupPlugin( {
  format: 'html',
  filename: 'sonda-report.html',
  open: true,
  detailed: true,
  gzip: true,
  brotli: true,
} )

format

• Type: string
• Default: 'html'

Determines the output format of the report. The following formats are supported:

• 'html' - HTML file with treemap
• 'json' - JSON file

filename

• Type: string
• Default: 'sonda-report.html' or 'sonda-report.json' depending on the format option

Determines the path of the generated report. The values can be either a filename, a relative path, or an absolute path.

By default, the report is saved in the current working directory.

open

• Type: boolean
• Default: true

Determines whether to open the report in the default program for given file extension (.html or .json depending on the format option) after the build.

detailed

• Type: boolean
• Default: false

Determines whether to read the source maps of imported modules.

By default, external dependencies that are bundled into a single file appear as a single asset in the report. When this option is enabled, the report will instead include the source files of the imported modules, if they have source maps.

Enabling this option will increase the time needed to generate the report and reduce the accuracy of estimated GZIP and Brotli sizes for individual files.

sources

• Type: boolean
• Default: false

Determines whether to include the source maps of the assets in the report to visualize which parts of the code contribute to the final bundle size.

⚠️ Enabling this option will significantly increase the report size and include it in the source code of the assets. If you work with proprietary code, be cautious when sharing the report. ⚠️

gzip

• Type: boolean
• Default: false

Determines whether to calculate the sizes of assets after compression with GZIP.

The report will include estimated compressed sizes for each file within an asset. However, unlike the compressed size of the entire asset, these individual file estimates are approximate and should be used as a general reference.

Enabling this option will increase the time needed to generate the report.

brotli

• Type: boolean
• Default: false

Determines whether to calculate the sizes of assets after compression with Brotli.

The report will include estimated compressed sizes for each file within an asset. However, unlike the compressed size of the entire asset, these individual file estimates are approximate and should be used as a general reference.

Enabling this option will increase the time needed to generate the report.