Visualize and analyze your Rollup bundle to see which modules are taking up space.
npm install --save-dev rollup-plugin-visualizeror via yarn:
yarn add --dev rollup-plugin-visualizerimport 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: sunburst, treemap, circlepacking, network (very early stage, feedback welcomed)
styleOverridePath (string, default undefined) - Link your own css file to override or enhance the current templates
bundlesRelative (boolean, default false) - Combine all bundles to one diagram
For development if you need to build plugin, just exec:
yarn run buildGenerated 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.