webpack-dependency-size

👩‍🔬 Webpack Dependency Size Plugin

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

:raising_hand: 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!

:rocket: Install

npm i 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
		})
	]
};

Options

• 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

• [package path] bundled-in package (sorted by size)
  • size human-readable net import size from package
  • files specific files imported from the package (sorted by size)
    • filepath bundled-in file
    • size human-readable size
    • reasons request sources

Example

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

{
  "./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",
          ...
        ]
      },
      ...
    ]
  },
  "./node_modules/lodash": {
    "size": "25.37 KB",
    "files": [
      {
        "filepath": "./node_modules/lodash/_deburrLetter.js",
        "size": "3.33 KB",
        "reasons": [
          "./node_modules/lodash/deburr.js"
        ]
      },
      ...
    ]
  },
  ...
}

License

MIT