Rollup Plugin Visualizer
Visualize and analyze your Rollup bundle to see which modules are taking up space.
npm install --save-dev rollup-plugin-visualizer
or via yarn:
yarn add --dev rollup-plugin-visualizer
import visualizer from 'rollup-plugin-visualizer'; //... plugins: [ visualizer() ], //...
filename (string, default
stats.html) - name of the file with diagram to generate
title (string, default
Rollup Visualizer) - title tag value
sourcemap (boolean, default
false) - Use sourcemaps to calculate sizes (e.g. after UglifyJs)
open (boolean, default
false) - Open generated file in default user agent
template (string, default
sunburst) - Which digram type to use:
network (very early stage, feedback welcomed)
bundlesRelative (boolean, default
false) - Combine all bundles to one diagram
For development if you need to build plugin, just exec:
yarn run build
Disclaimer about generated files
Generated files does not and never will be contain your source code (contents of files). They can contains only js/html/css code required to build chart (plugin code) and statistical information about your source code. This statistical information can contain:
- byte size of files included in bundled
- size of files included in source map
- file's path
- files hierarchy (fs tree for your files)
v1 -> v2: For v2 was a lot of internal changes, but external interface has not changed.
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. Also i would like to thank you Mike Bostock for awesome D3, and tons of examples.