feat(ci): add bundle size comparison and setup pnpm action

Author: Convly

.github/actions/setup-pnpm/action.yml

@@ -0,0 +1,25 @@
+name: "Setup pnpm"
+description: "Install Node.js and pnpm and set up caching"
+inputs:
+  node-version:
+    description: "Version of Node.js to use"
+    required: false
+    default: "22"
+  pnpm-version:
+    description: "Version of pnpm to install"
+    required: false
+    default: "9.1.0"
+runs:
+  using: "composite"
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: "pnpm"
+
+    - name: Enable Corepack
+      run: corepack enable
+
+    - name: Install pnpm
+      run: corepack prepare pnpm@${{ inputs.pnpm-version }} --activate

.github/workflows/bundlesize-compare.yml

@@ -0,0 +1,81 @@
+on:
+  pull_request:
+  pull_request_target:
+
+jobs:
+  # Build and upload stats for `head`
+  build:
+    name: 'Build and upload for ${{ matrix.target }}'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    strategy:
+      matrix:
+        target: [browser, node] # Runs for both browser and node bundles
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+      - name: Setup pnpm
+        uses: .github/actions/setup-pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build
+        run: pnpm build:clean
+        env:
+          NODE_ENV: production
+      - name: Upload stats.json
+        uses: actions/upload-artifact@v4
+        with:
+          name: head-stats-${{ matrix.target }}
+          path: .stats/bundle.${{ matrix.target }}.json
+
+  # Build base stats for comparison
+  build-base:
+    name: 'Build base and upload for ${{ matrix.target }}'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    strategy:
+      matrix:
+        target: [browser, node]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.base_ref }}
+      - name: Setup pnpm
+        uses: .github/actions/setup-pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build
+        run: pnpm build:clean
+        env:
+          NODE_ENV: production
+      - name: Upload stats.json
+        uses: actions/upload-artifact@v4
+        with:
+          name: base-stats-${{ matrix.target }}
+          path: .stats/bundle.${{ matrix.target }}.json
+
+  # Compare base and head stats.json files
+  compare:
+    name: 'Compare base & head bundle sizes for ${{ matrix.target }}'
+    runs-on: ubuntu-latest
+    needs: [build, build-base]
+    permissions:
+      pull-requests: write
+    strategy:
+      matrix:
+        target: [browser, node]
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: head-stats-${{ matrix.target }}
+      - uses: actions/download-artifact@v4
+        with:
+          name: base-stats-${{ matrix.target }}
+      - uses: twk3/rollup-size-compare-action@v1.0.0
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          current-stats-json-path: ./head-stats-${{ matrix.target }}/bundle.${{ matrix.target }}.json
+          base-stats-json-path: ./base-stats-${{ matrix.target }}/bundle.${{ matrix.target }}.json

rollup.config.mjs

@@ -67,7 +67,7 @@ const node_build = {
     // Only minify in production
     isProduction && terser(),
     // Analysis and visualization artifacts
-    visualizer({ filename: '.stats/bundle.node.html', template: 'raw-data' }),
+    visualizer({ filename: '.stats/bundle.node.json', template: 'raw-data' }),
   ],
 };
 
@@ -126,7 +126,7 @@ const browser_build = {
     // Minify the code
     terser(),
     // Analysis and visualization artifacts
-    visualizer({ filename: '.stats/bundle.browser.html', template: 'raw-data' }),
+    visualizer({ filename: '.stats/bundle.browser.json', template: 'raw-data' }),
   ],
 };