@statoscope/webpack-ui is a tool for visualizing and analyzing Webpack bundle statistics. It provides a user-friendly interface to help developers understand the structure and performance of their Webpack bundles, identify issues, and optimize their build process.

What are @statoscope/webpack-ui's main functionalities?

Bundle Analysis

This feature allows you to generate a detailed report of your Webpack bundle, including size, composition, and dependencies. The report can be saved as an HTML file for easy viewing.

const StatoscopeWebpackPlugin = require('@statoscope/webpack-plugin');

module.exports = {
  plugins: [
    new StatoscopeWebpackPlugin({
      saveReportTo: 'path/to/report.html',
      saveStatsTo: 'path/to/stats.json',
      open: false,
    }),
  ],
};

Dependency Visualization

This feature provides a visual representation of the dependencies within your Webpack bundle, helping you to identify and resolve dependency issues.

const StatoscopeWebpackPlugin = require('@statoscope/webpack-plugin');

module.exports = {
  plugins: [
    new StatoscopeWebpackPlugin({
      saveReportTo: 'path/to/report.html',
      saveStatsTo: 'path/to/stats.json',
      open: false,
      additionalStats: ['path/to/another-stats.json'],
    }),
  ],
};

Performance Insights

This feature provides insights into the performance of your Webpack bundle, including build times and asset sizes. It can help you identify bottlenecks and optimize your build process.

const StatoscopeWebpackPlugin = require('@statoscope/webpack-plugin');

module.exports = {
  plugins: [
    new StatoscopeWebpackPlugin({
      saveReportTo: 'path/to/report.html',
      saveStatsTo: 'path/to/stats.json',
      open: false,
      watchMode: true,
    }),
  ],
};

Other packages similar to @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.

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.

5.3.0 (30 June 2021)

Features

[webpack-plugin] collect compressed (e.g. gzip) size of the resources (assets and modules)

There is a new compressor - option that can be false | 'gzip' | ['gzip', ZlibOptions] | CompressFunction:
- 'gzip' (default) - compress all the resources with gzip (compression level - 6) and collect the compressed sizes
- ['gzip', ZlibOptions] - the same as gzip but with custom zlib settings
- CompressFunction - a function that takes source as an input and should return compressed size for this resource (useful if you want to use a non-gzip compressor)
- false - don't collect compressed sizes
It uses webpack-stats-extension-compressed under the hood
[webpack-plugin] collect packages versions

It uses webpack-stats-extension-package-info under the hood
[webpack-ui] taking compressed (e.g. gzip) size of the resources into account

There is a new setting to taking resources compressed size into account.

If enabled then all the sizes will be shown as compressed.

New jora-helpers:
- getModuleSize(module, hash) return compressed or normal module size
- getAssetSize(asset, hash) return compressed or normal asset size
It uses stats-extension-compressed under the hood and works only when the stats-file was taken from webpack-plugin@>=5.3 or any source that uses stats-extension-compressed
[webpack-ui] taking packages versions into account and output these in all the package items

Also, added instance version into compilations.nodeModules.instance

It uses stats-extension-package-info under the hood and works only when the stats-file was taken from webpack-plugin@>=5.3 or any source that uses stats-extension-package-info
[webpack-ui] download time measure

There are two new settings to select network speed and assets inject type. A download time for assets/chunks/entrypoints will be calculated based on specified network speed and assets inject type.

There are two assets inject types:
- sync: download time = sum(downloadTime(assets)) Download time is a sum of the download time of all the assets
- async: download time = max(downloadTime(assets)) Download time is a download time of most heavy asset (usefull if async/defer used to inject your assets)
The default network type is 3G Fast (1.37 MBit/s) (like in Chromium).

Assets inject type is sync by default.
[webpack-ui] add compact-property to asset/chunk/module/entry-item-widget

This property removes all the badges from the entity item
[webpack-ui] add Entrypoints tab on diff-page

Honestly, I just forgot to enable this tab a few releases ago 🙈
[stats-extension-compressed] extension for collecting compressed resource sizes

It allows compressing specified resource content (string or Buffer) with gzip or any other compressor.

Also, it contains the API to generate and extract this info.
[webpack-stats-extension-compressed] webpack adapter for stats-extension-compressed

It allows collecting compressed resource sizes from webpack compilation
[stats-extension-package-info] extension for collecting packages versions

It allows compressing specified resource content (string or Buffer) with gzip or any other compressor.

Also, it contains the API to generate and extract this info.
[webpack-stats-extension-package-info] webpack adapter for stats-extension-package-info

It allows collecting package versions from webpack compilation
[webpack-model] added resolveExtension(name) jora-helper that returns extension API
[webpack-model] support stats-extension-package-info extension

There is a new jora-helpers:
- getPackageInstanceInfo(package, instancePath, hash) that returns a package instance information
[webpack-model] support stats-extension-compressed extension

There are new jora-helpers:
- getModuleSize(module, compressed?, hash?) returns compressed or normal module size
- getAssetSize(asset, compressed?, hash?) returns compressed or normal asset size
[webpack-model] added jora-helpers to getting network type and download speed:
- getNetworkTypeInfo(networkType: string) return full info about specified network by its name (full list of type you can find at network-type-list.ts)
- getNetworkTypeName(networkType: Item) return full name for specified network
- getDownloadTime(size: number, networkType: string) calculate download time based on selected network type
[helpers] add locale-parameter to formatDate-helper
[cli] (validate): use info-type for messages by default
[stats] a new package that contains Statoscope own stats format (extension-entity for now, but there are will be more entities)
[extensions] a new package that contains Statoscope extensions toolkit
[report-writer] add Piper - a proxy to ensure that all stream consumers have got a chunk

Fixes

[webpack-model] fix cases in normalization when no compilation.modules
[webpack-model] fix normalization of chunk.children
[webpack-model] fix isRoot-field for node-modules instances

isRoot was falsy positive if the module name not starts from .
[webpack-plugin] fix saveStatsTo

Now it works
[webpack-ui] fix packages instances list on diff-page

There was undefined instead of instances links
[webpack-ui] fix modules diff calculation
[cli] (validate): use console.info for info-type messages

Improvements

[webpack-ui] better sorting of package instances

Root-instances goes first
[webpack-ui] fix loading-styles

Refactor

[webpack-ui] refactor diff-page to make it more flexible and extendable

FAQs

What is @statoscope/webpack-ui?

Is @statoscope/webpack-ui popular?

Is @statoscope/webpack-ui well maintained?

Package last updated on 30 Jun 2021

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.

Install

@statoscope/webpack-ui