👩🔬 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
