Rollup Plugin Visualizer
![Travis CI build status](https://img.shields.io/travis/com/btd/rollup-plugin-visualizer.svg)
Visualize and analyze your Rollup bundle to see which modules are taking up space.
Screenshots
![pic](https://github.com/btd/rollup-plugin-visualizer/blob/master/pics/collage.jpg?raw=true)
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()
],
Options
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: sunburst
, treemap
, circlepacking
, network
(very early stage, feedback welcomed)
bundlesRelative
(boolean, default false
) - Combine all bundles to one diagram
Build plugin
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)
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. Also i would like to thank you Mike Bostock for awesome D3, and tons of examples.