@statoscope/webpack-ui
v5.28.3
Published
Webpack plugin and UI for analyzing webpack bundle with Statoscope
Downloads
563,340
Readme
Statoscope for webpack
This package contains a UI for analyzing stats of your bundle.
Key features:
- 🌳 Full dependency tree (modules/chunks/assets/entrypoints/packages)
- 🗺 Size map (entrypoints/chunks/packages)
- 🕵️ Packages copies and duplicates of modules detection
- 🔄 Stats comparison
- 📊 Custom reports for your stats (with jora QL)
- 🐘 No stats size limitation
- 🗜 Smart HTML report compression (up to 200x)
You can try it at Statoscope sandbox
Usage
As webpack plugin
See @statoscope/webpack-plugin
As standalone UI (only for browser)
1. Collect the bundle stats with:
webpack --json > stats.json
2. Pass stats file to Statoscope
import init from '@statoscope/webpack-ui';
import stats from 'path/to/stats.json'
init({
name: "stats.json",
data: stats
});
Also, you could pass an array of stats
Use-cases
Find out why a module was bundled
Every module has an issuer path (the shortest way to a module) and the reasons (other modules and chunks that require a module).
Use modules tree to find all the places where a module was required.
Find out which chunks will block page loading
A massive bundle should be split into small async chunks. Synchronous (initial) chunks block your page loading and rendering till these chunks load.
Less initial size is better:
Use chunks tree to find out which chunks are synchronous and try to split it.
Also, you can view a chunk map to look at a chunk from the other side:
Find package copies
Your bundle could use a few versions of the same package (node module).
Use package tree to find out how many package copies were bundled:
Find module duplications
Sometimes we have a few modules with the same content. Statoscope can find these modules and show when these modules were required.
This is only a short description of Statoscope features. Just try it by yourself and find out more about your bundle.
Compare your stats
Statoscope has a powerful tool to compare the stats.
Just drop two (or more) stats files to https://statoscope.tech and press the Diff
button.
If you're using the webpack plugin, use additionalStats property.
Create a custom report and share it
Statoscope provides a way to create your own report with Jora language and Discovery.js.
- click
Make report
- write a jora-request
- describe a UI to view the result
- copy the URL and share it
Example: Top 5 biggest assets
FAQ
Getting stats from a boilerplate project
If you're using Create React App then use --stats
argument to get the stats:
yarn build --stats
or npm run build -- --stats
This will create build/undle-stats.json
that can be used in Statoscope.
Error while loading a stats
If you have an error with the text Unexpected token W in JSON at position 0
then you are probably using webpack-bundle-analyzer
that corrupts webpack output. Just remove the first line of your stats file and try to load your file again.
Which stats-flags Statoscope use?
Statoscope use only stats that it has. There is only one required flag - hash
.
stats: {
all: false, // disable all the stats
hash: true, // add a compilation hash
}
It works, but useless, because the result stats is empty.
You could disable some stats-flags to decrease your stats-file size. Here is a set of minimum useful stats flags:
stats: {
all: false, // disable all the stats
hash: true, // add compilation hash
entrypoints: true, // add entrypoints stats
chunks: true, // add chunks stats
chunkModules: true, // add modules stats
reasons: true, // add modules reasons stats
},
And an example of full stats:
stats: {
all: false, // disable all the stats
hash: true, // add compilation hash
entrypoints: true, // add entrypoints stats
chunks: true, // add chunks stats
chunkModules: true, // add modules stats
reasons: true, // add modules reasons stats
assets: true, // add assets stats
chunkOrigins: true, // add chunks origins stats (to find out which modules require a chunk)
version: true, // add webpack version
builtAt: true, // add build at time
timings: true, // add build at time
performance: true, // add info about oversized assets
source: true, // add module sources (uses to find modules duplicates)
},
Statoscope shows an absolute path to the modules
Just specify a context to stats options:
stats: {
context: 'path/to/project/root'
}
Support
If you are an engineer or a company that is interested in Statoscope improvements, you could support Statoscope by financial contribution at OpenCollective or GitHub Sponsors.