Package Exports

webpack-dependency-size

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webpack-dependency-size) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

👩‍🔬 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"
        ]
      },
      ...
    ]
  },
  ...
]

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

💼 License

MIT