https://github.com/privatenumber/webpack-dependency-size
👩🔬 Webpack plugin to get an overview of bundled dependencies and their size
https://github.com/privatenumber/webpack-dependency-size
analyzer dependency optimization-tools size webpack
Last synced: 8 months ago
JSON representation
👩🔬 Webpack plugin to get an overview of bundled dependencies and their size
- Host: GitHub
- URL: https://github.com/privatenumber/webpack-dependency-size
- Owner: privatenumber
- License: mit
- Created: 2020-05-09T23:43:32.000Z (over 5 years ago)
- Default Branch: develop
- Last Pushed: 2021-02-02T22:54:57.000Z (over 4 years ago)
- Last Synced: 2025-02-23T23:19:03.537Z (8 months ago)
- Topics: analyzer, dependency, optimization-tools, size, webpack
- Language: JavaScript
- Homepage:
- Size: 54.7 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
👩🔬 Webpack Dependency Size Plugin
[Webpack](https://webpack.js.org) 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
```sh
npm i -D webpack-dependency-size
```
## 👩🏫 Basic Usage
In your Webpack config:
```js
// 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:
```js
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
```js
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](https://github.com/antonmedv/fx) to navigate the JSON
```json5
[
{
"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](https://github.com/privatenumber/webpack-distsize) - Track Webpack output size via version control
- [webpack-analyze-duplication-plugin](https://github.com/privatenumber/webpack-analyze-duplication-plugin) - Webpack plugin to detect duplicated modules
## 💼 License
MIT