Skip to content
You're viewing an older version of this GitHub Action. Do you want to see the latest version instead?
play

GitHub Action

Bundle comparison

v1.4.0

Bundle comparison

play

Bundle comparison

Compare the bundle size between the base branch and the current branch

Installation

Copy and paste the following snippet into your .yml file.

 
              
- name: Bundle comparison

              
  uses: github/[email protected]
Learn more about this action in github/webpack-bundlesize-compare-action

Choose a version

Webpack bundlesize compare action

An action that compares 2 webpack compilation stats files, and comments on the PR with a description of the difference

How to use it

In your application, ensure you output the stats.json, from `BundleAnalyzerPlugin'

// webpack.config.js
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')

// optionally you can also output compressed/gzipped stats
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  plugins: [
    ...plugins,
    // not required
    new CompressionPlugin(),

    // required
    new BundleAnalyzerPlugin({
      // generate the stats.json file
      generateStatsFile: true
    })
  ]
}

Then, in your action configuration, build both the head and the branch (in any way you see fit) and pass paths to the stats.json files as inputs ot this action

# .github/workflows/bundlesize-compare.yml

on:
  # this action will error unless run in a pr context
  pull_request:
  pull_request_target:

jobs:
  # Build current and upload stats.json
  build-head:
    name: 'Build head'
    runs-on: ubuntu-latest
    permissions:
      contents: read
    steps:
      - uses: actions/checkout@v2
        with:
          ref: ${{github.event.pull_request.head.ref}}
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Upload stats.json
        uses: actions/upload-artifact@v1
        with:
          name: head-stats
          path: ./dist/stats.json

  # Build base for comparison and upload stats.json
  build-base:
    name: 'Build base'
    runs-on: ubuntu-latest
    permissions:
      contents: read
    steps:
      - uses: actions/checkout@v2
        with:
          ref: ${{ github.base_ref }}
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Upload stats.json
        uses: actions/upload-artifact@v1
        with:
          name: base-stats
          path: ./dist/stats.json

  # Checkout the action repo, download artifacts, and run the action
  # against the stats.json files
  compare:
    name: 'Compare base & head bundle sizes'
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
    needs: [build-base, build-head]
    steps:
      - name: Install Node.js 16.x
        uses: actions/setup-node@v1
        with:
          node-version: 16.x
          registry-url: https://npm.pkg.github.com/
        env:
          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - uses: actions/checkout@v2

      - name: Download base artifact
        uses: actions/download-artifact@v1
        with:
          name: base-stats

      - name: Download head artifact
        uses: actions/download-artifact@v1
        with:
          name: head-stats

      # Checkout the action repository - since it's a private repo
      # we can't just use it directly
      - uses: actions/checkout@v2
        with:
          repository: github/webpack-bundlesize-compare-action
          token: ${{ secrets.A_TOKEN_THAT_CAN_READ_REPO_FOR_THE_ACTION_REPO }}
          path: .github/actions/webpack-bundlesize-compare-action
          ref: v1

      - name: Bundlesize compare
        uses: ./.github/actions/webpack-bundlesize-compare-action
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          current-stats-json-path: ./head-stats/stats.json
          base-stats-json-path: ./base-stats/stats.json

Options

name description required type
current-stats-json-path The path to the current stats.json file true string
base-stats-json-path The path to the base stats.json file true string
github-token The Github token true string
title An optional addition to the title, which also helps key comments, useful if running more than 1 copy of this action false string

Example PR Comment

#50 (comment)