sonda
v0.3.0
Published
Universal visualizer and analyzer for JavaScript and CSS bundles. Works with Vite, Rollup, webpack, and esbuild
Downloads
762
Maintainers
Readme
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.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(),
]
} );
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,
} )
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.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.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.