npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@statoscope/webpack-ui

v5.28.3

Published

Webpack plugin and UI for analyzing webpack bundle with Statoscope

Downloads

563,340

Readme

Statoscope for webpack

npm version Financial Contributors on Open Collective

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.