rollup-plugin-visualizer
Version:
Visualize and analyze your Rollup bundle to see which modules are taking up space.
49 lines (36 loc) • 1.27 kB
Markdown
Visualize and analyze your Rollup bundle to see which modules are taking up space.

```
npm i -D rollup-plugin-visualizer
```
```javascript
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.
```javascript
var Visualizer = require('rollup-plugin-visualizer');
//...
plugins: [Visualizer({
filename: './statistics.html'
})],
//...
```
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 }`
```javascript
var Visualizer = require('rollup-plugin-visualizer');
//...
plugins: [Visualizer({
sourcemap: true
})],
//...
```
Initially this plugin is based on [webpack-visualizer](http://chrisbateman.github.io/webpack-visualizer/), but at the end rest only styles and layout. Thanks tons of people around internet for great examples of d3 usage.