@statoscope/stats-extension-custom-reports

What is @statoscope/stats-extension-custom-reports?

@statoscope/stats-extension-custom-reports is an npm package designed to extend the capabilities of Statoscope by allowing users to create custom reports based on Webpack stats. This package is useful for developers who need to generate specific insights and metrics from their Webpack build statistics.

What are @statoscope/stats-extension-custom-reports's main functionalities?

Custom Report Creation

This feature allows users to create custom reports by defining a report name and a function that processes Webpack stats to generate the desired data. The example code creates a report that includes the total number of modules and the total size of assets.

const { createReport } = require('@statoscope/stats-extension-custom-reports');

const report = createReport({
  name: 'My Custom Report',
  data: (stats) => {
    return {
      totalModules: stats.modules.length,
      totalSize: stats.assets.reduce((sum, asset) => sum + asset.size, 0)
    };
  }
});

console.log(report);

Integration with Statoscope

This feature demonstrates how to integrate custom reports into Statoscope. The example code shows how to add a custom report to Statoscope and generate a report that includes the custom data.

const { addExtension } = require('@statoscope/stats-extension-custom-reports');
const statoscope = require('statoscope');

addExtension(statoscope, {
  reports: [
    {
      name: 'My Custom Report',
      data: (stats) => {
        return {
          totalModules: stats.modules.length,
          totalSize: stats.assets.reduce((sum, asset) => sum + asset.size, 0)
        };
      }
    }
  ]
});

statoscope.generateReport();

Other packages similar to @statoscope/stats-extension-custom-reports

webpack-bundle-analyzer

webpack-bundle-analyzer is a tool that provides an interactive visualization of the size of Webpack output files. It helps developers understand the composition of their bundles and identify large modules. Unlike @statoscope/stats-extension-custom-reports, which focuses on custom report generation, webpack-bundle-analyzer is more about visualizing and analyzing bundle sizes.

source-map-explorer

source-map-explorer analyzes JavaScript bundles using source maps to determine which file each byte in the minified output came from. It provides a detailed breakdown of the bundle contents. While @statoscope/stats-extension-custom-reports allows for custom report creation based on Webpack stats, source-map-explorer focuses on detailed analysis of the source code within bundles.

webpack-stats-plugin

webpack-stats-plugin is a Webpack plugin that generates a JSON file containing build statistics. This plugin is useful for extracting and analyzing Webpack stats, similar to @statoscope/stats-extension-custom-reports. However, it does not provide the same level of customization for report generation as @statoscope/stats-extension-custom-reports.

README

Statoscope Package Custom Reports

Statoscope extension to store custom reports in stats.

A custom report is:

export type Report<TData, TContext> = {
  id: string; // report id
  name?: string; // report title
  compilation?: string | null; // if specified then a report will be shown only in specific compilation
  data?: TData | (() => Promise<TData> | TData); // raw data for the report or a function that produces a data (may return promise)
  view: string | ViewConfig<TData, TContext>; // any DiscoveryJS. String turns to script to eval
};

View as a script

Sometimes we need to make a report with more complex view (e.g. with event handling).

JSON can't handle functions, but you can pass any script source into view-property instead of JSON.

This source will be evaled on client and should return any DiscoveryJS view.

my-custom-report-view.js:

(() => [
  {
    view: 'button',
    data: {
      text: 'Click me',
    },
    onClick() {
      alert('It works!');
    },
  },
])();

Report config:

({
  id: 'foo',
  view: fs.readFileSync('./my-custom-report-view.js', 'utf8')
})

Changelog

5.19.0 (26 November 2021)

Feature

• [webpack-model] - smart handling for concat modules container id This improves modules diff.
• [helpers] - add id modifier to indexer
• [cli] - add init and create commands (#139 by @wildOrlik)