@statoscope/webpack-model

What is @statoscope/webpack-model?

@statoscope/webpack-model is a tool designed to help developers analyze and understand their Webpack bundle. It provides a model for Webpack stats that can be used to extract insights, generate reports, and optimize the bundle.

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

Load Webpack Stats

This feature allows you to load Webpack stats from a JSON file. The `readStats` function reads the stats file and returns a JavaScript object representing the stats.

const { readStats } = require('@statoscope/webpack-model');
const stats = readStats('path/to/webpack-stats.json');
console.log(stats);

Generate Reports

This feature allows you to generate a report from the Webpack stats. The `generateReport` function takes the stats object and returns a detailed report that can be used to analyze the bundle.

const { generateReport } = require('@statoscope/webpack-model');
const stats = readStats('path/to/webpack-stats.json');
const report = generateReport(stats);
console.log(report);

Compare Stats

This feature allows you to compare two sets of Webpack stats. The `compareStats` function takes two stats objects and returns a comparison report highlighting the differences between the two bundles.

const { compareStats } = require('@statoscope/webpack-model');
const stats1 = readStats('path/to/webpack-stats-1.json');
const stats2 = readStats('path/to/webpack-stats-2.json');
const comparison = compareStats(stats1, stats2);
console.log(comparison);

Other packages similar to @statoscope/webpack-model

webpack-bundle-analyzer

webpack-bundle-analyzer is a tool that provides an interactive visualization of your Webpack bundle. It helps you understand the size of your bundle and identify which modules are contributing to the size. Unlike @statoscope/webpack-model, it focuses more on visual representation and less on generating detailed reports.

source-map-explorer

source-map-explorer analyzes JavaScript bundles using source maps. It helps you understand which files and modules are contributing to the size of your bundle. Compared to @statoscope/webpack-model, it is more focused on source maps and less on providing a comprehensive model for Webpack stats.

webpack-stats-plugin

webpack-stats-plugin is a Webpack plugin that generates a stats JSON file for your bundle. It is similar to @statoscope/webpack-model in that it provides stats, but it does not offer the same level of analysis and reporting capabilities.

README

Statoscope webpack model

This package contains helpers to process webpack stats.

Changelog

5.22.0 (03 July 2022)

This is 5.21 actually 🤦

Features

• [cli] - add --custom-report and --config args for generate and serve commands (#157 by @amalitsky)
• [config] - add generate.reports field (#157 by @amalitsky)
• [webpack-model] - added helpers:
  • asset_getSize(asset: NormalizedAsset, hash: string, useCompressed: boolean): Size
  • assets_getTotalSize(assets: NormalizedAsset[], hash: string, useCompressed: boolean): Size
  • entrypoint_getChunks(entry: NormalizedEntrypointItem): NormalizedChunk[]
  • entrypoint_getInitialChunks(entry: NormalizedEntrypointItem): NormalizedChunk[]
  • entrypoint_getInitialSize(entry: NormalizedEntrypointItem, hash: string, useCompressed: boolean): Size
  • entrypoint_getAsyncChunks(entry: NormalizedEntrypointItem): NormalizedChunk[]
  • entrypoint_getAsyncSize(entry: NormalizedEntrypointItem, hash: string, useCompressed: boolean): Size
  • entrypoint_getAssets(entry: NormalizedEntrypointItem): NormalizedAsset[]
  • entrypoint_getInitialAssets(entry: NormalizedEntrypointItem): NormalizedAsset[]
  • entrypoint_getAsyncAssets(entry: NormalizedEntrypointItem): NormalizedAsset[]
  • resolveCompilationByAsset(asset: NormalizedAsset, filename: string): NormalizedCompilation | null
  • resolveCompilationByChunk(chunk: NormalizedChunk, filename: string): NormalizedCompilation | null
  • resolveCompilationByModule(module: NormalizedModule, filename: string): NormalizedCompilation | null
  • resolveCompilationByEntrypoint(entry: NormalizedEntrypointItem, filename: string): NormalizedCompilation | null

Fixes

• [webpack-ui] - fix dashboard data
• [webpack-model] - fix handling chunks with no files (#158 by @amalitsky)