webpack-dependency-size

👩‍🔬 Webpack Dependency Size Plugin

Webpack plugin to get an overview of bundled dependencies and their size.

🙋 Why?

• 📦 Only Dependencies Get insight into the blackbox!
• 🔥 Fast Only analyzes the bare minium!
• 👀 JSON Output Formatted, sorted, and portable!
• 🙈 No distractions Ignore application code!

🚀 Install

npm i -D webpack-dependency-size

👩‍🏫 Basic Usage

In your Webpack config:

// 1. Import plugin
const DependencySize = require('webpack-dependency-size');

module.exports = {
	...,

	plugins: [
		// 2. Add to plugins array
		new DependencySize()
	]
};

Options

Pass in an options object to configure:

new DependencySize({
	// Options
	gzip: true
})

• outputPath (dependency-size.json) JSON output path relative to Webpack output directory (output.path)
• gzip (false) Calculate gzipped size
• indent (2 spaces) JSON output indentation

📋 Output

Schema

type File = {
    filepath: string; // bundled-in file
    size: string; // human-readable size
    reasons: string[]; // request sources
};

type Report = {
    dependencyPath: string; // bundled-in package (sorted by `size`)
    size: string; // human-readable net import size from package
    files: File[]; // specific files imported from the package (sorted by `size`)
}[];

Example

Tip: If the output is too large, I recommend using fx to navigate the JSON

[
  {
    "dependencyPath": "./node_modules/axios",
    "size": "40.15 KB",
    "files": [
      {
        "filepath": "./node_modules/axios/lib/utils.js",
        "size": "8.61 KB",
        "reasons": [
          "./node_modules/axios/lib/adapters/xhr.js",
          ...
        ]
      },
      ...
    ]
  },
  {
    "dependencyPath": "./node_modules/lodash",
    "size": "25.37 KB",
    "files": [
      {
        "filepath": "./node_modules/lodash/_deburrLetter.js",
        "size": "3.33 KB",
        "reasons": [
          "./node_modules/lodash/deburr.js"
        ]
      },
      ...
    ]
  },
  ...
]

👨‍👩‍👦‍👦 Related

• webpack-distsize - Track Webpack output size via version control
• webpack-analyze-duplication-plugin - Webpack plugin to detect duplicated modules

💼 License

MIT