Add RelativeCI for bundle size monitoring

Author: airhorns

.github/workflows/test.yml

@@ -39,3 +39,18 @@ jobs:
       - uses: ./.github/actions/setup-test-env
       - name: Check dependency versions
         run: pnpm check-dependency-versions
+  bundle-sizes:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup-test-env
+      - name: Build all packages (so they can require each other)
+        run: pnpm build
+      - name: Build test bundles
+        run: pnpm -F=test-bundles test-build
+      - name: Send bundle stats to RelativeCI
+        uses: relative-ci/agent-action@v2
+        with:
+          webpackStatsFile: ./packages/test-bundles/dist/react-read-webpack-stats.json
+          key: ${{ secrets.RELATIVE_CI_KEY }}
+          token: ${{ secrets.GITHUB_TOKEN }}

packages/test-bundles/build.ts

@@ -1,4 +1,6 @@
 import react from "@vitejs/plugin-react-swc";
+import { webpackStats } from "rollup-plugin-webpack-stats";
+
 import fs from "fs";
 import { join, parse } from "path";
 import { visualizer } from "rollup-plugin-visualizer";
@@ -7,20 +9,27 @@ import { build } from "vite";
 
 const bundleDir = fileURLToPath(new URL("bundles", import.meta.url));
 const entrypoints = fs.readdirSync(bundleDir);
-
+console.log(entrypoints);
 for (const entrypoint of entrypoints) {
   const parsed = parse(entrypoint);
   const name = parsed.name;
 
-  const visualizerPlugin = visualizer({
-    emitFile: true,
-    filename: `${name}-stats.html`,
-    template: "treemap",
-    brotliSize: true,
-    gzipSize: true,
-  }) as any;
+  const plugins = [
+    // Output webpack-stats.json file
+    webpackStats({ fileName: `${name}-webpack-stats.json` }),
+    // Output visualized bundle stats for developers
+    visualizer({
+      emitFile: true,
+      filename: `${name}-stats.html`,
+      template: "treemap",
+      brotliSize: true,
+      gzipSize: true,
+    }) as any,
+  ];
 
-  const plugins = parsed.ext.endsWith("x") ? [react(), visualizerPlugin] : [visualizerPlugin];
+  if (parsed.ext.endsWith("x")) {
+    plugins.push(react());
+  }
 
   await build({
     plugins,

packages/test-bundles/package.json

@@ -19,6 +19,7 @@
     "vite": "^4.4.7"
   },
   "devDependencies": {
-    "rollup-plugin-visualizer": "^5.9.2"
+    "rollup-plugin-visualizer": "^5.9.2",
+    "rollup-plugin-webpack-stats": "^0.2.1"
   }
 }