0a407f1f09
Splits each page into its own lazily-imported chunk via React.lazy
with Suspense fallback (a skeleton matching the dashboard layout
shape). Adds a vite manualChunks function that pushes heavy third-
party libraries into long-lived vendor chunks so page chunks stay
small and the vendor cache survives release cycles.
Vendor groupings: vendor-react, vendor-router, vendor-tanstack,
vendor-radix (+ cmdk), vendor-motion, vendor-recharts (+ d3 deps),
vendor-axios, vendor-state (zustand), vendor-toast (sonner),
vendor-lucide, vendor (everything else).
Build output (before -> after, gzipped):
initial entry 348.65 kB -> 8.75 kB
largest chunk 1163.97 kB -> 81.65 kB (vendor-recharts, only
loaded on Dashboard + SystemHealth)
build warning "chunks > 500 kB" -> gone
DocumentsPage, SettingsPage, etc. no longer pull recharts into their
critical path; the dashboard pays the chart cost once, cached.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { defineConfig } from "vite";
|
|
import react from "@vitejs/plugin-react";
|
|
import path from "node:path";
|
|
|
|
export default defineConfig({
|
|
plugins: [react()],
|
|
resolve: {
|
|
alias: {
|
|
"@": path.resolve(__dirname, "./src"),
|
|
},
|
|
},
|
|
server: {
|
|
port: 5273,
|
|
strictPort: true,
|
|
proxy: {
|
|
"/api": {
|
|
target: "http://localhost:8000",
|
|
changeOrigin: true,
|
|
},
|
|
},
|
|
},
|
|
build: {
|
|
outDir: "dist",
|
|
sourcemap: true,
|
|
chunkSizeWarningLimit: 800,
|
|
rollupOptions: {
|
|
output: {
|
|
// Split heavy third-party libs into their own long-lived chunks so
|
|
// page-level chunks stay small and the vendor cache is reused across
|
|
// releases.
|
|
manualChunks: (id) => {
|
|
if (!id.includes("node_modules")) return undefined;
|
|
if (id.includes("recharts") || id.includes("d3-")) return "vendor-recharts";
|
|
if (id.includes("framer-motion")) return "vendor-motion";
|
|
if (id.includes("@radix-ui") || id.includes("cmdk")) return "vendor-radix";
|
|
if (id.includes("@tanstack")) return "vendor-tanstack";
|
|
if (id.includes("react-router")) return "vendor-router";
|
|
if (id.includes("axios")) return "vendor-axios";
|
|
if (id.includes("lucide-react")) return "vendor-lucide";
|
|
if (id.includes("zustand")) return "vendor-state";
|
|
if (id.includes("sonner")) return "vendor-toast";
|
|
if (
|
|
id.includes("react/") ||
|
|
id.includes("react-dom") ||
|
|
id.includes("scheduler")
|
|
)
|
|
return "vendor-react";
|
|
return "vendor";
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|