Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@statoscope/webpack-ui
Advanced tools
Changelog
5.23.0 (14 July 2022)
[helpers]
- update jora
to 1.0.0-beta.7[webpack-ui]
- update @discoveryjs/discovery
to 1.0.0-beta.66[webpack-ui]
- update highcharts
to 10.2.0[webpack-model]
- refactor chunk graph building (fixes bugs of chunks relations accuracy)Readme
This package contains a UI for analyzing stats of your bundle.
Key features:
You can try it at Statoscope sandbox
See @statoscope/webpack-plugin
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
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.
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:
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:
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.
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.
Statoscope provides a way to create your own report with Jora language and Discovery.js.
Make report
Example: Top 5 biggest assets
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.
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.
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)
},
Just specify a context to stats options:
stats: {
context: 'path/to/project/root'
}
If you are an engineer or a company that is interested in Statoscope improvements, you could support Statoscope by financial contribution at OpenCollective.
FAQs
Webpack plugin and UI for analyzing webpack bundle with Statoscope
The npm package @statoscope/webpack-ui receives a total of 108,864 weekly downloads. As such, @statoscope/webpack-ui popularity was classified as popular.
We found that @statoscope/webpack-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.