Skip to content

Rollup Plugin Visualizer

Rollup Plugin Visualizer shows which pieces of your JavaScript project occupy the most space in a build.

Visit Rollup Plugin Visualizer

Where does the visualizer fit in your project?

The project documents setup for Rollup, Vite and Rolldown. Check the actual build configuration before choosing it. The plugin runs as part of the build and can write a chart of the files that were produced. Some setups run several builds, so check which report covers the code the browser receives.

Which report shows why a file is there?

Use the treemap, a chart of rectangles sized by code weight, to find the biggest parts. Use the network view to follow the links between files. The plugin can also report gzip and Brotli sizes if enabled. Use the same settings when comparing reports, and verify in the browser which generated files load for the action you care about.

What do you need, and what should you keep private?

The package uses the MIT license. Its current release requires Node.js 22 or later. You can keep an HTML report or export raw data. The generated HTML contains chart code and statistics, which can reveal file paths, file hierarchy and sizes. Keep reports separate from public build output and inspect them before sharing.

How would you check if an optional feature bloats the first page?

Draw two build files on paper, one for the first page and one for a chart opened later. Place the fictional chart library in the first file and sketch the chain of imports leading to it. Ask what could load when the chart is opened instead, then note that the first page and the chart both need checking after any real change.