@statoscope/webpack-ui

What is @statoscope/webpack-ui?

@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

webpack-bundle-analyzer

webpack-bundle-analyzer is a tool that provides a visual representation of the contents of your Webpack bundle. It generates an interactive treemap visualization of the bundle's modules, helping you to understand the size and composition of your bundle. Compared to @statoscope/webpack-ui, it is more focused on visualizing the size of individual modules and their dependencies.

source-map-explorer

source-map-explorer analyzes JavaScript bundles using source maps to determine which file each byte in your minified code came from. It provides a detailed breakdown of the bundle's contents, helping you to identify large or unnecessary dependencies. While @statoscope/webpack-ui provides a broader range of features, source-map-explorer is specifically focused on analyzing and visualizing the contents of JavaScript bundles.

bundle-stats

bundle-stats is a tool that generates a detailed report of your Webpack bundle, including size, composition, and performance metrics. It provides a visual representation of the bundle's contents and helps you to identify and resolve issues. Compared to @statoscope/webpack-ui, bundle-stats offers similar functionality but with a different user interface and focus on performance metrics.

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.

Changelog

5.28.3 (11 November 2024) (it's alive 🤘)

Fixes

• [webpack-model] - fix node_modules instance path for module-federation modules
• [stats-validator-plugin-webpack] - fix no-packages-dups-rule to work with module-federation modules