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

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

// vite.config.js

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

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

Rollup

// 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(),
  ]
} );

Some Rollup plugins may not support source maps by default. Check their documentation to enable them. Examples for @rollup/plugin-commonjs and rollup-plugin-styles are shown below.

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

esbuild

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

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

Unlike for other bundlers, the esbuild plugin relies not only on source maps but also on the metafile. The plugin should automatically enable the metafile option for you, but if you get the error, be sure to enable it manually (metafile: true).

webpack

// webpack.config.js

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

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

Internally, Sonda changes the default webpack configuration to output absolute paths in the source maps instead of using the webpack:// protocol (devtoolModuleFilenameTemplate: '[absolute-resource-path]').

Rspack

// rspack.config.js

import { SondaWebpackPlugin } from 'sonda';

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

Internally, Sonda changes the default Rspack configuration to output absolute paths in the source maps instead of using the webpack:// protocol (devtoolModuleFilenameTemplate: '[absolute-resource-path]').

Options

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

SondaRollupPlugin( {
  format: 'html',
  open: true,
  detailed: true,
  gzip: true,
  brotli: true,
} )

format

• Type: string
• Default: 'html'

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

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

open

• Type: boolean
• Default: true

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

Whether to read the source maps of imported modules.

By default, external dependencies that are bundled into a single file are shown as a single asset in the report. However, when investigating tree-shaking issues, it can be useful to see individual source files of the dependencies.

Enabling this options will read the source maps of imported modules and show individual files that make up these bundles.

Enabling this option will increase the time it takes to generate the report and decrease the accuracy of the estimated GZIP and Brotli sizes of individual files.

gzip

• Type: boolean
• Default: false

Whether to calculate the sizes of assets after compression with GZIP.

The report will also include the estimated compressed sizes of the individual files that make up each asset. However, unlike the compressed size of the entire asset, the estimates for individual files are not completely accurate and should only be used as a reference.

Enabling this option will increase the time it takes to generate the report.

brotli

• Type: boolean
• Default: false

Whether to calculate the sizes of assets after compression with Brotli.

The report will also include the estimated compressed sizes of the individual files that make up each asset. However, unlike the compressed size of the entire asset, the estimates for individual files are not completely accurate and should only be used as a reference.

Enabling this option will increase the time it takes to generate the report.