rollup-plugin-visualizer

What is rollup-plugin-visualizer?

The rollup-plugin-visualizer is a plugin for Rollup that generates a visual representation of the module tree or bundle contents. It helps in analyzing the bundle's composition, such as the size of individual modules and their dependencies. This can be particularly useful for optimizing the bundle size by identifying large modules or unexpected dependencies.

What are rollup-plugin-visualizer's main functionalities?

Visualizing bundle composition

This feature allows users to visualize the composition of their bundle. The plugin generates an HTML file that displays the sizes of the modules in the bundle. The 'filename' option specifies the output file for the visualization, and the 'open' option can be set to true to automatically open the generated file in a web browser.

import visualizer from 'rollup-plugin-visualizer';

export default {
  plugins: [
    visualizer({
      filename: './bundle-stats.html',
      open: true
    })
  ]
};

Customizing the visualization

This feature allows for customization of the visualization output. Users can choose between different visualization templates such as 'treemap', 'sunburst', or 'network'. Additionally, the title of the visualization can be customized using the 'title' option.

import visualizer from 'rollup-plugin-visualizer';

export default {
  plugins: [
    visualizer({
      filename: './bundle-stats.html',
      template: 'treemap', // or 'sunburst', 'network'
      title: 'My Bundle Visualization'
    })
  ]
};

Other packages similar to rollup-plugin-visualizer

webpack-bundle-analyzer

Similar to rollup-plugin-visualizer, webpack-bundle-analyzer is a plugin for Webpack that provides a detailed visualization of the contents of bundles. It supports interactive zoomable treemaps for analyzing the size of webpack output files. While rollup-plugin-visualizer is tailored for Rollup, webpack-bundle-analyzer serves a similar purpose for Webpack bundles.

source-map-explorer

Source-map-explorer analyzes JavaScript bundles using the source maps. It helps in understanding where code bloat is coming from by generating a treemap visualization of the space that each source file occupies. Unlike rollup-plugin-visualizer which is a Rollup plugin, source-map-explorer can be used independently of the bundler used.

README

Rollup Plugin Visualizer

Visualize and analyze your Rollup bundle to see which modules are taking up space.

Screenshot

Installation

npm install --save-dev rollup-plugin-visualizer

or via yarn:

yarn add --dev rollup-plugin-visualizer

Usage

import visualizer from 'rollup-plugin-visualizer';

//...
plugins: [
  visualizer()
],
//...

This will output a file named stats.html in current directory. You can modify the name/location by passing a filename parameter into the constructor. You can also set a title by passing a title parameter.

import visualizer from 'rollup-plugin-visualizer';

//...
plugins: [
  visualizer({
    filename: './statistics.html',
    title: 'My Bundle'
  })
],
//...

The file sizes reported are before any minification happens (if UglifyJS is being used, for example). Minified module sizes can be calculated using the source maps. To enable this mode, pass { sourcemap: true }

import visualizer from 'rollup-plugin-visualizer';

//...
plugins: [
  visualizer({
    sourcemap: true
  })
],
//...

Acknowledgements

Initially this plugin was based on webpack-visualizer, but in the end used only styles and layout. Thanks to the tons of people around internet for great examples of d3 usage.

Changelog

0.8.1

• Fix sourcemap option