@statoscope/webpack-ui

Statoscope for webpack

This package supplies UI to inspect webpack stats.

It can tell almost all about your bundle:

• 🌳 Modules/chunks/assets/packages tree
• 🗺 Entrypoints/chunks/packages map
• 🕵️ Duplicate modules and packages copies
• 🔄 Stats diff
• 📊 Custom reports about your bundle
• 🐘 No stats size limitation
• 🧪 Stats validation via CLI

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 may 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 may use a few versions of the same package (node module).

Use package tree to find out how many package copies was 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 may 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 may support Statoscope by financial contribution at OpenCollective.

Changelog

5.6.2 (16 July 2021)

Fixes

• [webpack-model] - calculating modules size on foam-tree-helper
• [webpack-ui] - show modules size on foam-tree map