webpack-visualizer-plugin

What is webpack-visualizer-plugin?

The webpack-visualizer-plugin is a tool that helps developers visualize the size of their webpack output files with an interactive treemap. This visualization aids in understanding the composition of the bundle and identifying areas for optimization.

What are webpack-visualizer-plugin's main functionalities?

Generate Bundle Visualization

This feature allows you to generate an HTML file that visualizes the size of your webpack output files. By including the Visualizer plugin in your webpack configuration, you can produce a statistics.html file that provides a treemap visualization of your bundle.

const Visualizer = require('webpack-visualizer-plugin');

module.exports = {
  plugins: [
    new Visualizer({
      filename: './statistics.html'
    })
  ]
};

Other packages similar to webpack-visualizer-plugin

webpack-bundle-analyzer

webpack-bundle-analyzer is a similar tool that provides a visual representation of your webpack bundles. It offers an interactive zoomable treemap visualization of the contents of your bundle, similar to webpack-visualizer-plugin. However, webpack-bundle-analyzer provides more detailed insights and options, such as the ability to view the bundle content in a sunburst or network graph format, and it can be run as a standalone server.

source-map-explorer

source-map-explorer analyzes JavaScript bundles using source maps to determine which file each byte in your minified code came from. It provides a visualization similar to webpack-visualizer-plugin but focuses more on the source map data to help identify large dependencies and optimize bundle size. Unlike webpack-visualizer-plugin, it is not limited to webpack and can be used with any JavaScript bundle that has a source map.

README

Webpack Visualizer

Visualize and analyze your Webpack bundle to see which modules are taking up space and which might be duplicates.

This tool is still pretty new, so please submit issues or feature requests!

Site Usage

Upload your stats JSON file to the site: chrisbateman.github.io/webpack-visualizer/

Plugin Usage

npm install webpack-visualizer-plugin

var Visualizer = require('webpack-visualizer-plugin');

//...
plugins: [new Visualizer()],
//...

This will output a file named stats.html in your output directory. You can modify the name/location by passing a filename parameter into the constructor.

var Visualizer = require('webpack-visualizer-plugin');

//...
plugins: [new Visualizer({
  filename: './statistics.html'
})],
//...

---