feat: add bundle analysis support

Add `webpack-bundle-analyzer` and a new `analyze` script to allow visualizing bundle composition via `npm run analyze`.
2026-07-08 15:16:12 +08:00 · 2026-07-08 15:16:12 +08:00 · e0c3b8f4a0
parent d95615f210
commit e0c3b8f4a0
3 changed files with 165 additions and 23 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -47,13 +47,15 @@
        "@types/node": "^22.19.13",
        "@types/uuid": "^10.0.0",
        "@types/ws": "^8.18.1",
+        "cross-env": "^10.1.0",
        "husky": "^9.1.7",
        "jest": "^29.7.0",
        "jest-environment-jsdom": "^29.7.0",
        "tailwindcss": "^4.0.0",
        "ts-jest": "^29.4.6",
        "ts-node": "^10.9.2",
-        "typescript": "^5.9.3"
+        "typescript": "^5.9.3",
+        "webpack-bundle-analyzer": "^5.3.0"
      }
    },
    "node_modules/@alloc/quick-lru": {
@ -870,6 +872,16 @@
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.6.3.tgz",
+      "integrity": "sha512-4B4OijXeVNOPZlYA2oEwWOTkzyltLao+xbotHQeqN++Rv27Y6s818+n2Qkp8q+Fxhn0t/5lA5X1Mxktud8eayQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.17.0"
+      }
+    },
    "node_modules/@emnapi/core": {
      "version": "1.9.2",
      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
@ -901,6 +913,13 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@epic-web/invariant": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@iconify/types": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
@ -1998,6 +2017,13 @@
        "url": "https://github.com/sponsors/Boshen"
      }
    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@rolldown/binding-android-arm64": {
      "version": "1.0.0-rc.12",
      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.12.tgz",
@ -4451,6 +4477,24 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/cross-env": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
+      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@epic-web/invariant": "^1.0.0",
+        "cross-spawn": "^7.0.6"
+      },
+      "bin": {
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@ -8594,6 +8638,16 @@
        "safe-buffer": "~5.2.0"
      }
    },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -8713,6 +8767,16 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "license": "(WTFPL OR MIT)",
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
    "node_modules/p-limit": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@ -9448,6 +9512,21 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/sirv": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
+      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/sisteransi": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@ -9842,6 +9921,16 @@
        "node": ">=0.6"
      }
    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/tough-cookie": {
      "version": "4.1.4",
      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
@ -10355,6 +10444,51 @@
        "node": ">=12"
      }
    },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-5.3.0.tgz",
+      "integrity": "sha512-PEhAoqiJ+47d0uLMx/+zo5XOvaU+Vk6N2ZLht7H3n09QLy/fhyvqGNwjdRUHJDgMN8crBR2ZwVHkIswT3Xuawg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@discoveryjs/json-ext": "^0.6.3",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^14.0.2",
+        "escape-string-regexp": "^5.0.0",
+        "html-escaper": "^3.0.3",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^3.0.2",
+        "ws": "^8.19.0"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 20.9.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/html-escaper": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
+      "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/whatwg-encoding": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "dev": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview",
+    "analyze": "cross-env ANALYZE=true rsbuild build",
    "cli:dev": "tsc -p tsconfig.cli.json --watch",
    "cli:build": "tsc -p tsconfig.cli.json",
    "ttrpg": "node --loader ts-node/esm ./src/cli/index.ts",
@ -67,12 +68,14 @@
    "@types/node": "^22.19.13",
    "@types/uuid": "^10.0.0",
    "@types/ws": "^8.18.1",
+    "cross-env": "^10.1.0",
    "husky": "^9.1.7",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "tailwindcss": "^4.0.0",
    "ts-jest": "^29.4.6",
    "ts-node": "^10.9.2",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "webpack-bundle-analyzer": "^5.3.0"
  }
 }
--- a/rsbuild.config.ts
+++ b/rsbuild.config.ts
@ -1,7 +1,8 @@
-import { defineConfig } from '@rsbuild/core';
-import { pluginBabel } from '@rsbuild/plugin-babel';
-import { pluginSolid } from '@rsbuild/plugin-solid';
-import tailwindcss from '@tailwindcss/postcss';
+import { defineConfig } from "@rsbuild/core";
+import { pluginBabel } from "@rsbuild/plugin-babel";
+import { pluginSolid } from "@rsbuild/plugin-solid";
+import tailwindcss from "@tailwindcss/postcss";
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";

 export default defineConfig({
  plugins: [
@ -16,32 +17,36 @@ export default defineConfig({
        plugins: [tailwindcss()],
      },
    },
-      rspack: {
-        module: {
-          rules: [
-            {
-              test: /\.md|\.yarn|\.csv$/, 
-              exclude: /\.schema\.csv$/,
-              type: 'asset/source'
-            },
-          ]
-        }
-      }
+    rspack: {
+      module: {
+        rules: [
+          {
+            test: /\.md|\.yarn|\.csv$/,
+            exclude: /\.schema\.csv$/,
+            type: "asset/source",
+          },
+        ],
+      },
+      plugins: [
+        process.env.ANALYZE ? new BundleAnalyzerPlugin() : undefined,
+      ].filter(Boolean),
+    },
  },
  html: {
-    template: './src/index.html',
+    template: "./src/index.html",
  },
  source: {
    entry: {
-      index: './src/main.tsx',
+      index: "./src/main.tsx",
    },
  },
  output: {
    distPath: {
-      root: 'dist/web',
+      root: "dist/web",
    },
-    copy: process.env.NODE_ENV === 'development' ? [
-      { from: './content', to: 'content' }
-    ] : [],
+    copy:
+      process.env.NODE_ENV === "development"
+        ? [{ from: "./content", to: "content" }]
+        : [],
  },
 });