webpack-distsize
v1.0.0Webpack Distsize
Track Webpack output size via version control
If you like this project, please star it & follow me to see what other cool projects I'm working on! β€οΈ
βοΈ Features
- π Size conscious Be aware of how your changes impact file size
- π
Pretty formatting View color-coded assets ordered by size via
npx distsize
- βοΈ Configurable Save distsize data where you like and set custom thresholds
π Install
npm i -D webpack-distsize
π©βπ« Easy setup
Add to your Webpack config:
// 1. Import plugin
const Distsize = require('webpack-distsize');
module.exports = {
...,
plugins: [
// 2. Add to plugins array
new Distsize()
]
};
Run your Webpack build and track the produced .distsize.json
file via version control.
Distsize viewing
The plugin installs the distsize
binary to view the outputted distsize JSON file. IT defaults to reading .distsize.json
in the current directory, but pass in a path to read from a custom path.
npx distsize
π Options
Configure Distisze by passing in an options object:
new Distsize({
// Options
})
log
<Boolean>
(defaulttrue
) - Whether to log the distsize to stdoutfilepath
<String>
(default.distsize.json
) - Output location for distsize JSON dataindent
<Number|String>
(default2
) - Indentation for distsize JSON datafilter
<Function(assetName)|RegExp|String>
(null
) - Filter to include assets by name// Example filter that ignores hidden files and source-maps filter: (asset) => !asset.startsWith('.') && !asset.endsWith('.map')
thresholds
<Array>
- Color coding to use for size thresholds[ { threshold: 100000, color: 'red' }, { threshold: 50000, color: 'orange' }, { threshold: 10000, color: 'yellow' }, { threshold: 5000, color: 'dodgerblue' }, { threshold: 0, color: 'lime' }, ]
πββοΈ FAQ
Can it track and display asset growth?
Depends on your Webpack configuration. If your assets are emitted under the same name, then yes.
But if it usses
[hash]
,[contenthash]
,[chunkhash]
, then it's not possible to accurately draw a comparison across builds.Can it track size impact from dependency changes?
If a dependency change impacts distribution size, it will be reflected by this plugin, but it will not contain any details that hint at which dependency grew in size. I recommend doing upgrades in isolation so it's easily identifiable.
Distsize focuses specifically on distribution size and making it digestible because that alone can be overwhelmingβa large codebase can produce hundreds of assets.
If you want something similar for dependencies, I recommend using webpack-dependency-size.
π¨βπ©βπ§ Related
webpack-dependency-size - Analyze dependency assets bundled into your Webpack build
webpack-analyze-duplication-plugin - Detect duplicated modules in your Webpack build
πΌ License
MIT