Refactor Vite configuration for improved chunking strategy and caching. Enhance DeviceContext with new upgradePeqChange method for PEQ updates. Update audio page to support localized labels and dynamic volume control. Introduce new filter types and improve EQPage functionality with enhanced frequency response visualization.

2026-04-17 17:57:39 +08:00
parent 4246e8ce27
commit 0e7670c215
12 changed files with 1103 additions and 153 deletions
@@ -180,11 +180,48 @@ export default defineConfig({
    },
    rollupOptions: {
      output: {
-        manualChunks: {
-          'react-vendor': ['react', 'react-dom'],
-          'router-vendor': ['wouter'],
-          'ui-vendor': ['lucide-react', 'class-variance-authority', 'clsx', 'tailwind-merge'],
+        manualChunks(id) {
+          if (!id.includes("node_modules")) return;
+
+          // Keep core runtime dependencies stable for better long-term caching.
+          if (id.includes("node_modules/react/") || id.includes("node_modules/react-dom/")) {
+            return "react-vendor";
+          }
+          if (id.includes("node_modules/wouter/")) {
+            return "router-vendor";
+          }
+
+          // Split large libraries into their own chunks to avoid a single huge entry bundle.
+          if (id.includes("node_modules/echarts/")) return "echarts-vendor";
+          if (id.includes("node_modules/recharts/")) return "recharts-vendor";
+          if (id.includes("node_modules/framer-motion/")) return "motion-vendor";
+          if (id.includes("node_modules/@radix-ui/")) return "radix-vendor";
+
+          // Group frequently used small UI helpers.
+          if (
+            id.includes("node_modules/lucide-react/") ||
+            id.includes("node_modules/class-variance-authority/") ||
+            id.includes("node_modules/clsx/") ||
+            id.includes("node_modules/tailwind-merge/")
+          ) {
+            return "ui-vendor";
+          }
+
+          // Fall back to per-package vendor chunks.
+          const packageMatch = id.match(
+            /node_modules[\\/](?:\.pnpm[\\/][^\\/]+[\\/]node_modules[\\/])?(@?[^\\/]+(?:[\\/][^\\/]+)?)/,
+          );
+          const packagePath = packageMatch?.[1];
+          if (!packagePath) return "vendor";
+
+          const packageName = packagePath.startsWith("@")
+            ? packagePath.split(/[\\/]/).slice(0, 2).join("_")
+            : packagePath.split(/[\\/]/)[0];
+
+          return `vendor-${packageName}`;
        },
+        // Prevent Rollup from merging manual chunks back into larger bundles.
+        onlyExplicitManualChunks: true,
      },
    },
    chunkSizeWarningLimit: 500,