Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

bundle-stats

Package Overview
Dependencies
Maintainers
1
Versions
485
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bundle-stats

In-depth bundle analyzer for webpack(bundle size, assets, modules)

  • 1.10.0-beta.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
26K
decreased by-7.52%
Maintainers
1
Weekly downloads
 
Created
Source

BundleStats screenshot

BundleStats

Generate bundle report(bundle size, assets, modules) and compare the results between different builds.

Node version TravisCI badge Renovate RelativeCI badge Language grade: JavaScript

- Bundle size and totals by file type(css, js, img, etc)
- Cache invalidation, Initial JS/CSS and other bundle specific metrics
- Assets report (entrypoint, initial, types, changed, delta)
- Modules report (changed, delta) by chunk
- Packages report (count, changed, delta)
:star: Side by side comparison for multiple jobs

Table of Contents

1. Webpack plugin

Install

npm install --dev bundle-stats

or

yarn add --dev bundle-stats

Webpack configuration

// webpack.config.js
const { BundleStatsWebpackPlugin } = require('bundle-stats');

module.exports = {
  ...,
  plugins: [
    new BundleStatsWebpackPlugin()
  ]
}

BundleStatsWebpackPlugin(options)

  • compare - use local saved stats for comparison (default true).
  • baseline - save current webpack stats as baseline (default false).
  • html - output html report (default true).
  • json - output json report (default false).
  • outDir - output directory relative to output.path (default '').
  • stats - Webpack stats options default:
    {
      stats: {
        context: WEBPACK_CONTEXT,
        assets: true,
        entrypoints: true,
        chunks: true,
        modules: true,
      }
    }
    

Compare mode

In compare mode, the metrics are compared against an existing Webpack stats file(baseline). To generate the baseline webpack stats, set BUNDLE_STATS_BASELINE environmental variable to true or set BundleStatsWebpackPlugin baseline option to true:

# Checkout to the branch/tag/commit where you want to generate the baseline
$ git checkout master

# Build your application with BUNDLE_STATS_BASELINE environmental variable
$ BUNDLE_STATS_BASELINE=true npm run build

# Checkout to the working branch/tag/commit
$ git checkout MY_FEATURE_BRANCH

# Build your application
$ npm run build

The option can be disabled by setting BundleStatsWebpackPlugin compare option to false.

2. CLI

Install as global dependency

npm install -g bundle-stats

or

yarn global add bundle-stats

Install as dev dependency

npm install --dev bundle-stats

or

yarn add --dev bundle-stats

Webpack configuration

The CLI is consuming the Webpack stats json. The following stats options are required:

{
  stats: {
    assets: true,
    entrypoints: true,
    chunks: true,
    modules: true
  }
}

Read more about Webpack stats configuration

Usage

$ bundle-stats -h
Usage: bundle-stats OPTIONS [WEBPACK_STATS_FILE]...

Options:
  --compare      Use local saved stats for comparison  [boolean] [default: true]
  --baseline     Save current stats as baseline       [boolean] [default: false]

  --html         Save HTML report                      [boolean] [default: true]
  --json         Save JSON data                       [boolean] [default: false]

  --demo         Generate demo reports                          [default: false]

  -d, --out-dir  Output directory                            [default: "./dist"]
  -h, --help     Show help                                             [boolean]
  -v, --version  Show version number                                   [boolean]
$ bundle-stats --html --json __fixtures__/webpack-stats-0.json __fixtures__/webpack-stats-1.json
  ✔ Read Webpack stat files
  ✔ Read baseline data
  ↓ Write baseline data [skipped]
    → Not a baseline job (see --baseline).
  ✔ Gather data
  ✔ Generate reports
  ✔ Save reports

Reports saved:
- ./dist/bundle-stats.html
- ./dist/bundle-stats.json

Compare mode

In compare mode, the metrics are compared against an existing Webpack stats file(baseline). To generate the baseline webpack stats, use --baseline option:

# Checkout to the branch/tag/commit where you want to generate the baseline
$ git checkout master

# Build your application
$ npm run build

# Run bundle-stats with --baseline option. This will save the baseline data on node_modules/.cache/bundle-stats/baseline.json
$ bundle-stats --baseline artifacts/webpack-stats.json
 ✔ Read Webpack stat files
 ↓ Read baseline data [skipped]
   → Missing baseline stats, see "--baseline" option.
 ✔ Write baseline data
 ✔ Process data
 ✔ Generate reports
 ✔ Save reports

Reports saved:
- ./dist/bundle-stats.html

# Checkout to the working branch/tag/commit
$ git checkout MY_FEATURE_BRANCH

# Build your application
$ npm run build

# Run bundle-stats - the report is going to compare the current data against the generated baseline
$ bundle-stats artifacts/webpack-stats.json
 ✔ Read Webpack stat files
 ✔ Read baseline data
 ↓ Write baseline data [skipped]
   → Not a baseline job (see --baseline).
 ✔ Process data
 ✔ Generate reports
 ✔ Save reports

Reports saved:
- ./dist/bundle-stats.html

The option can be disabled using --no-compare option.

3. Gatsby plugin

Install bundle-stats as a Gatsby plugin.

Read more

4. Next.js plugin

Install bundle-stats as a Next.js plugin.

Read more

5. Standalone web application

Use https://compare.relative-ci.com to compare Webpack/Lighthouse/Browsertime stats.

Read more

6. :zap: Running on CI

Continuous monitoring with BundleStats on CI:

  • Github Checks integration
  • support for all major CI services (Travis CI, Circle CI, Jenkins, Gitlab CI, Codeship, etc)
  • free for OpenSource

Read more about running BundleStats on CI (BETA)

Keywords

FAQs

Package last updated on 22 Sep 2019

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc