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

Changelog

Source

0.1.4

Stability fixes

Readme

Source

Rollup Plugin Visualizer

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

Plugin Usage

npm i -D rollup-plugin-visualizer

var Visualizer = require('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.

var Visualizer = require('rollup-plugin-visualizer');

//...
plugins: [Visualizer({
  filename: './statistics.html'
})],
//...

Acknowledges

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

FAQs

What is rollup-plugin-visualizer?

Is rollup-plugin-visualizer popular?

Is rollup-plugin-visualizer well maintained?

Last updated on 26 Oct 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install