webpack-treemap-plugin

Generate treemap charts of your webpack builds.

Features

This webpack plugin generates an HTML file that displays a treemap chart of each bundle generated via your webpack configuration. Note that the charts are most useful as a tool to easily see what is taking up relative space in your bundles. Currently, it bases module percentages on pre-minified and ungzipped byte sizes.

The chart is interactive and allows you to:

• load individual treemap charts of each bundle via a drop-down select;
• control tree depth using an interactive slider;
• see a clean separation between your source and your dependencies;
• drill down into specific modules;
• and view any duplicate packages (displayed in red).

Installation:

# Using yarn
yarn add webpack-treemap-plugin --dev

# Using npm
npm install webpack-treemap-plugin --save-dev

Usage:

To generate treemaps, require this package in your webpack config and add an instance of it to the plugins array.

This plugin takes three options, see the comments in the example below:

const WebpackTreemapPlugin = require('webpack-treemap-plugin');

module.exports = {
    // webpack config...,
    
    plugins: [
        // your plugins...,
        
        new WebpackTreemapPlugin({
            
            // If `noop` is true, the plugin won't run. This feature allows you to 
            // pass an environment variable when running webpack to ensure the plugin runs 
            // only when desired. Defaults to false.
            noop: process.env.RUN_TREEMAP !== 'true',

            // If `openFile` is true, the generated HTML file will open automatically 
            // in your default browser. It's recommended to use an enviroment variable 
            // to control this behavior. Defaults to false.
            openFile: process.env.OPEN_TREEMAP === 'true',

            // The `filename` options allows you to choose the name of the HTML file
            // that the plugin generates. Defaults to "webpack-treemap.html." 
            filename: `my-webpack-treemap.html`
        })
    ]
};

Testing

Tests are executed by Jest.

yarn test

Motivation

This package was heavily inspired by the Webpack Bundle Analyzer package, which is excellent. However, it's encumbered by copyrighted software. We wanted an unencumbered solution. All parts of this software are licensed under the MIT license and come with no restrictions.