Webpack bundle diff action 🗜

This action computes a diff of bundle sizes between a head branch and a base branch, and posts a comment to your pull request with useful information.

Improvements

This section contains ideas for how to make this better.

Make threshold more configurable

Usage

This workflow assumes there is a script called yarn webpack:stats which generates,

• a webpack stats json file (we might not need this anymore…)
• a webpack-bundle-analyzer report json file

Add this to a .yml file under .github/workflows/:

on:
  pull_request:
name: Webpack bundle diff
jobs:
  build-head:
    name: 'Build head'
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: actions/cache@v2
      id: yarn-install
      with:
        path: '**/node_modules'
        key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
    - name: Install dependencies
      if: steps.yarn-install.outputs.cache-hit != 'true'
      run: yarn install --pure-lockfile --frozen-lockfile
    - name: Generate stats
      run: yarn webpack:stats
    - name: Upload bundle analysis
      uses: actions/upload-artifact@v2
      with:
        name: head-stats
        path: ./dist/s/ld/webpack-*.json
        if-no-files-found: error
  build-base:
    name: 'Build base'
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
      with:
        ref: ${{ github.base_ref }}
    - uses: actions/cache@v2
      id: yarn-install
      with:
        path: '**/node_modules'
        key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
    - name: Install dependencies
      if: steps.yarn-install.outputs.cache-hit != 'true'
      run: yarn install --pure-lockfile --frozen-lockfile
    - name: Generate stats
      run: yarn webpack:stats
    - name: Upload bundle analysis
      uses: actions/upload-artifact@v2
      with:
        name: base-stats
        path: ./dist/s/ld/webpack-*.json
        if-no-files-found: error
  compare:
    name: 'Compare base & head bundle sizes'
    runs-on: ubuntu-latest
    needs: [build-base, build-head]
    steps:
    - uses: actions/checkout@v2
    - name: Download base analysis artifacts
      uses: actions/download-artifact@v2
      with:
        name: base-stats
        path: base-stats
    - name: Download head analysis artifacts
      uses: actions/download-artifact@v2
      with:
        name: head-stats
        path: head-stats
    - name: Diff between base and head
      uses: launchdarkly-labs/webpack-bundle-diff-action@main
      with:
        github-token: ${{ secrets.GITHUB_TOKEN }}
        base-stats-path: ./base-stats/webpack-stats.json
        base-bundle-analysis-report-path: ./base-stats/webpack-bundle-analyzer-report.json
        head-stats-path: ./head-stats/webpack-stats.json
        head-bundle-analysis-report-path: ./head-stats/webpack-bundle-analyzer-report.json

Configuration Options

skip-comment-on-no-changes

By default, this action will always post a PR comment, even when there are no significant bundle changes. You can configure it to skip posting comments when there are no meaningful changes:

- name: Diff between base and head
  uses: launchdarkly-labs/webpack-bundle-diff-action@main
  with:
    github-token: ${{ secrets.GITHUB_TOKEN }}
    base-bundle-analysis-report-path: ./base-stats/webpack-bundle-analyzer-report.json
    head-bundle-analysis-report-path: ./head-stats/webpack-bundle-analyzer-report.json
    skip-comment-on-no-changes: true  # Skip comments when no significant changes

What constitutes "significant changes":

• Any budget violations
• Any new, removed, bigger, or smaller bundles
• Negligible changes larger than 1KB

Labels will still be managed correctly even when comments are skipped.

Bundle Budgets

You can set bundle size budgets by adding environment variables with the INPUT_BUNDLE_ prefix:

env:
  INPUT_BUNDLE_MAIN: 250000      # 250KB budget for main.js
  INPUT_BUNDLE_VENDOR: 500000    # 500KB budget for vendor.js

Contributing

npm install

Once you've made the changes you wanted, you can release a new version by following these steps:

$ npm run build
$ npm run package
$ git add .
$ git commit -m 'Commit message'

To test your changes, you can re-run your workflow for your PR on GitHub.