Visualizing Rolldown bundles with Sonda

To analyze and visualize your Rolldown bundles, you need to install the Sonda npm package and add the Sonda plugin to your Rolldown configuration.

Installation

Install the package

To get started, install the Sonda package using the following command:

npm install sonda --save-dev

Add the plugin and enable source maps

Next, register the Sonda plugin for Rolldown and enable source maps in the rolldown.config.js file:

import { defineConfig } from 'rolldown';
import Sonda from 'sonda/rolldown'; 

export default defineConfig( {
  output: {
    sourcemap: true
  },
  plugins: [
    Sonda() 
  ]
} );

Placement of the Sonda plugin

When adding the Sonda plugin to your Rolldown configuration, it is important to place it at the beginning of the plugins array. This allows Sonda to properly analyze the connections between modules before the other plugins process them.

Now, every time you build your project, Sonda will generate a report with information about your bundles.

Sonda requires source maps to function correctly, but some other plugins may not support or generate them by default. If Sonda does not work as expected, check the documentation for the other plugins you are using to ensure source maps are enabled.

⚠️ Rolldown plugin

Currently, Sonda reports for Rolldown incorrectly display CommonJS modules as ES modules. This is a known limitation and is being tracked in this GitHub issue.

Configure the plugin

The steps above will allow you to generate your first report. However, if the report does not contain the information you need, refer to the Configuration page to explore additional options and learn how to enable them.