GithubHelp home page GithubHelp logo

han0147 / webpack-bundlesize-compare-action Goto Github PK

View Code? Open in Web Editor NEW

This project forked from github/webpack-bundlesize-compare-action

0.0 0.0 0.0 3.74 MB

A github action that outputs bundlesize comparison tables for pull requests

License: MIT License

JavaScript 0.86% TypeScript 99.14%

webpack-bundlesize-compare-action's Introduction

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. Requires a version >=1.1.0
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
  # You may replace this with your own build method. All that
  # is required is that the stats.json be an artifact
  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@v3
        with:
          name: head-stats
          path: ./dist/stats.json

  # Build base for comparison and upload stats.json
  # You may replace this with your own build method. All that
  # is required is that the stats.json be an artifact
  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@v3
        with:
          name: base-stats
          path: ./dist/stats.json

  # run the action against the stats.json files
  compare:
    name: 'Compare base & head bundle sizes'
    runs-on: ubuntu-latest
    needs: [build-base, build-head]
    permissions:
      pull-requests: write
    steps:
      - uses: actions/download-artifact@v3
      - uses: github/[email protected]
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          current-stats-json-path: ./head-stats/stats.json
          base-stats-json-path: ./base-stats/stats.json

This action requires the write permission for the permissions.pull-requests scope.

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

github#50 (comment)

webpack-bundlesize-compare-action's People

Contributors

camchenry avatar dependabot[bot] avatar glortho avatar iansan5653 avatar mattcosta7 avatar maxbeizer avatar shiftkey avatar sunnylqm avatar tim-we avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.