chore: Setup RelativeCI for bundle comparison (#254)

.github/workflows/relative-ci.yml

@@ -0,0 +1,50 @@
+name: Bundle Size
+
+on: 
+  push:
+    branches: main
+  pull_request:
+    branches: main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  build:
+    name: Build and report bundle stats
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      # Build and output bundle stats to webpack-stats.json
+      - name: Build
+        run: pnpm build -- --json webpack-stats.json
+
+      # Send bundle stats and build information to RelativeCI
+      - name: Send bundle stats to RelativeCI
+        uses: relative-ci/agent-action@v2
+        with:
+          webpackStatsFile: ./dist/webpack-stats.json
+          key: ${{ secrets.RELATIVE_CI_KEY }}
+          token: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -112,6 +112,7 @@
     "lint-staged": "^15.2.10",
     "npm-run-all": "^4.1.5",
     "prop-types": "^15.8.1",
+    "rollup-plugin-webpack-stats": "^1.1.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-aria-attributes": "^2.0.1",
     "tailwindcss-radix-colors": "^1.4.1",

vite.config.ts

@@ -4,13 +4,30 @@ import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react-swc";
 import autoprefixer from "autoprefixer";
 import cssnano from "cssnano";
+import webpackStatsPlugin from "rollup-plugin-webpack-stats";
 import tailwindcss from "tailwindcss";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [TanStackRouterVite(), tsconfigPaths(), react()],
+  build: {
+    rollupOptions: {
+      output: {
+        // Use a supported file pattern for Vite 5/Rollup 4
+        // @doc https://relative-ci.com/documentation/guides/vite-config
+        assetFileNames: "assets/[name].[hash][extname]",
+        chunkFileNames: "assets/[name].[hash].js",
+        entryFileNames: "assets/[name].[hash].js",
+      },
+    },
+  },
+  plugins: [
+    TanStackRouterVite(),
+    tsconfigPaths(),
+    react(),
+    webpackStatsPlugin(),
+  ],
   define: {
     APP_VERSION: JSON.stringify(process.env.npm_package_version),
   },