Introduction

What is Sonda?

Sonda is a universal visualizer and analyzer for JavaScript and CSS assets. It is designed to help you understand the structure of your assets and how various parts depend on each other, identify potential issues, and optimize them for better performance.

Unlike other tools, Sonda is not designed for a specific bundler, but rather to analyze the JavaScript and CSS assets themselves. Thanks to this approach, Sonda is more accurate and works with all popular bundlers, including:

Vite
Rollup
esbuild
webpack
Rspack

To see what it can do, check out the demo.

Installation

Install the package

To get started, install the following package:

bash

npm install sonda --save-dev

Add the plugin and enable source maps

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

// 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: {
    sourcemap: true,
  },
  plugins: [
    SondaRollupPlugin(),
  ]
} );

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

Sonda requires source maps, but some other plugins may not support or generate them by default. If you see that Sonda is not working properly, check the documentation of other plugins you are using to enable source maps.

⚠️ Webpack and Rspack plugins

Currently, plugins for webpack and Rspack change the default configuration of these bundlers to use absolute paths in the generated source maps instead of using webpack-specific paths (devtoolModuleFilenameTemplate: '[absolute-resource-path]'). This may affect the paths you see in browser devtools.

Configure the plugin

The steps above are enough to generate the first report. However, if you do not see the information you need, see the configuration section to learn about additional options and how to enable them.

Introduction ​

What is Sonda? ​

Installation ​

Install the package ​

Add the plugin and enable source maps ​

Configure the plugin ​