Wondering what’s next for npm?Check out our public roadmap! »

    bundle-stats-webpack-plugin
    TypeScript icon, indicating that this package has built-in type declarations

    2.8.2 • Public • Published

    BundleStats screenshot

    BundleStats

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

    Node version CircleCI badge Renovate 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, duplicate, changed, delta)
    Side by side comparison for multiple jobs

    Table of Contents

    Install

    npm install --dev bundle-stats-webpack-plugin

    or

    yarn add --dev bundle-stats-webpack-plugin

    Webpack configuration

    // webpack.config.js
    const { BundleStatsWebpackPlugin } = require('bundle-stats-webpack-plugin');
    
    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 webpack output.path (default '').
    • silent - stop logging info and only log warning and error (default false).
    • stats - Webpack stats options default:
      {
        stats: {
          context: WEBPACK_CONTEXT,
          assets: true,
          entrypoints: true,
          chunks: true,
          modules: true,
          builtAt: true,
          hash: true
        }
      }

    Use with create-react-app

    You will need to customize the default webpack config. That can be done by using react-app-rewired which is one of create-react-app's custom config solutions. You will also need customize-cra.

    npm install --dev customize-cra react-app-rewired

    or

    yarn add customize-cra react-app-rewired --dev

    Change your default scripts in package.json to:

    /* package.json */
    "scripts": {
      "start": "react-app-rewired start",
      "build": "react-app-rewired build",
      "test": "react-app-rewired test"
    }

    Create a file config-overrides.js at the same level as package.json.

    // config-overrides.js
    const { override, addWebpackPlugin } = require('customize-cra');
    const { BundleStatsWebpackPlugin } = require('bundle-stats-webpack-plugin');
    
    module.exports = override(
      addWebpackPlugin(new BundleStatsWebpackPlugin()),
    );

    Compare mode

    In compare mode, the metrics are compared against an existing(node_modules/.cache/bundle-stats/baseline.json) 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.

    Framework specific plugins

    Related projects

    🌀 relative-ci.com

    Specialized insights for web bundles:

    • Monitor and analyze bundle size, assets, modules, packages
    • GitHub Check, GitHub Pull Request, and Slack integrations
    • Support for all major CI services (CircleCI, GitHub Actions, Travis CI CI, Jenkins, Gitlab CI, Codeship)
    • Free for Developers & OpenSource

    Try Beta

    🌓 relative-ci/compare

    Standalone web application to compare Webpack/Lighthouse/Browsertime stats.

    Compare bundle stats

    bundle-stats-action

    Github Action that generates bundle-stats reports for webpack.

    Install

    npm i bundle-stats-webpack-plugin

    DownloadsWeekly Downloads

    8,527

    Version

    2.8.2

    License

    MIT

    Unpacked Size

    22.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar
    • avatar