Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
rollup-plugin-visualizer
Advanced tools
[![NPM Version](https://img.shields.io/npm/v/rollup-plugin-visualizer.svg)](https://npmjs.org/package/rollup-plugin-visualizer) [![Travis CI build status](https://img.shields.io/travis/com/btd/rollup-plugin-visualizer.svg)](https://travis-ci.com/btd/rollu
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.
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'
})
]
};
Similar to rollup-plugin-visualizer, webpack-bundle-analyzer is a plugin for Webpack that provides a detailed visualization of the contents of bundles. It supports interactive zoomable treemaps for analyzing the size of webpack output files. While rollup-plugin-visualizer is tailored for Rollup, webpack-bundle-analyzer serves a similar purpose for Webpack bundles.
Source-map-explorer analyzes JavaScript bundles using the source maps. It helps in understanding where code bloat is coming from by generating a treemap visualization of the space that each source file occupies. Unlike rollup-plugin-visualizer which is a Rollup plugin, source-map-explorer can be used independently of the bundler used.
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 or Terser)
open
(boolean, default false
) - Open generated file in default user agent
template
(string, default treemap
) - Which digram type to use: sunburst
, treemap
, network
(very early stage, feedback welcomed)
chartParameters.width
(number, default undefined
) - Set svg viewBox width to this number
chartParameters.height
(number, default undefined
) - Set svg viewBox height to this number
json
(boolean, default false
) - Product portable json file that can be used with plugin CLI util to generate graph from several json files. Every UI property ignored in this case.
gzipSize
(boolean, default false
) - Collect gzip size from source code and display it at chart
brotliSize
(boolean, default false
) - Collect brolti size from source code and display it at chart. Only if current node version supports it
This plugin provides cli util rollup-plugin-visualizer
. Add --help
to check actual options. It can be used like:
rollup-plugin-visualizer [OPTIONS] stat1.json stat2.json ../stat3.json
This can be usefull in case you have different config files in the same project and you want to display all of them in the same chart.
For development if you need to build plugin, just exec:
yarn run build
Generated html files do not and never will contain your source code (contents of files). They can contain only js/html/css code required to build chart (plugin code) and statistical information about your source code.
This statistical information can contain:
See CHANGELOG.md.
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.
4.0.4
FAQs
[![NPM Version](https://img.shields.io/npm/v/rollup-plugin-visualizer.svg)](https://npmjs.org/package/rollup-plugin-visualizer) [![Node.js CI](https://github.com/btd/rollup-plugin-visualizer/actions/workflows/node.js.yml/badge.svg)](https://github.com/btd
The npm package rollup-plugin-visualizer receives a total of 1,226,339 weekly downloads. As such, rollup-plugin-visualizer popularity was classified as popular.
We found that rollup-plugin-visualizer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.