enhance(build): show bundle size diff on PRs

also updates the `yarn analyze` command

.github/workflows/pr-bundlesize-compare.yml

@@ -0,0 +1,99 @@
+on:
+  # this action will error unless run in a pr context
+  pull_request:
+
+jobs:
+  # Build current and upload stats.json
+  build-head:
+    name: "Build head"
+    permissions:
+      contents: read
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{github.event.pull_request.head.ref}}
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Cache @vscode/ripgrep bin
+        uses: actions/cache@v4
+        with:
+          key: vscode-ripgrep-bin-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('yarn.lock') }}
+          path: node_modules/@vscode/ripgrep/bin/
+
+      - name: Install all yarn packages
+        run: yarn --frozen-lockfile
+        env:
+          # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build
+        run: yarn build:client
+        env:
+          ANALYZE_BUNDLE: true
+
+      - name: Upload stats.json
+        uses: actions/upload-artifact@v4
+        with:
+          name: head-stats
+          path: ./client/build/stats.json
+
+  # Build base for comparison and upload stats.json
+  build-base:
+    name: "Build base"
+    permissions:
+      contents: read
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.base_ref }}
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Cache @vscode/ripgrep bin
+        uses: actions/cache@v4
+        with:
+          key: vscode-ripgrep-bin-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('yarn.lock') }}
+          path: node_modules/@vscode/ripgrep/bin/
+
+      - name: Install all yarn packages
+        run: yarn --frozen-lockfile
+        env:
+          # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build
+        run: yarn build:client
+        env:
+          ANALYZE_BUNDLE: true
+
+      - name: Upload stats.json
+        uses: actions/upload-artifact@v4
+        with:
+          name: base-stats
+          path: ./client/build/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@v4
+      - 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

client/config/webpack.config.js

@@ -11,6 +11,7 @@ import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
 import { WebpackManifestPlugin } from "webpack-manifest-plugin";
 import ESLintPlugin from "eslint-webpack-plugin";
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
 
 import paths from "./paths.js";
 import getClientEnvironment from "./env.js";
@@ -497,6 +498,12 @@ function config(webpackEnv) {
       new ESLintPlugin({
         extensions: ["js", "mjs", "jsx", "ts", "tsx"],
       }),
+      isEnvProduction &&
+        process.env.ANALYZE_BUNDLE &&
+        new BundleAnalyzerPlugin({
+          analyzerMode: "disabled",
+          generateStatsFile: true,
+        }),
     ].filter(Boolean),
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter

package.json

@@ -15,8 +15,7 @@
   },
   "scripts": {
     "ai-help-macros": "cross-env NODE_OPTIONS='--no-warnings=ExperimentalWarning --loader ts-node/esm' node scripts/ai-help-macros.ts",
-    "analyze": "source-map-explorer 'client/build/static/js/*.js'",
-    "analyze:css": "source-map-explorer 'client/build/static/css/*.css'",
+    "analyze": "(test -f client/build/stats.json || cross-env ANALYZE_BUNDLE=true yarn build:client) && webpack-bundle-analyzer client/build/stats.json",
     "build": "cross-env NODE_ENV=production NODE_OPTIONS='--no-warnings=ExperimentalWarning --loader ts-node/esm' node build/cli.ts",
     "build:blog": "cross-env NODE_ENV=production NODE_OPTIONS='--no-warnings=ExperimentalWarning --loader ts-node/esm' node build/build-blog.ts",
     "build:client": "cd client && cross-env NODE_ENV=production BABEL_ENV=production node scripts/build.js",
@@ -171,6 +170,7 @@
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@types/react-modal": "^3.16.3",
+    "@types/webpack-bundle-analyzer": "^4.7.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-named-asset-import": "^0.3.8",
@@ -239,7 +239,6 @@
     "rough-notation": "^0.5.1",
     "sass": "^1.78.0",
     "sass-loader": "^16.0.1",
-    "source-map-explorer": "^2.5.3",
     "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.4",
     "stylelint": "^15.11.0",
@@ -258,6 +257,7 @@
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.4.0",
     "webpack": "^5.94.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",
     "webpack-manifest-plugin": "^5.0.0",