From 4235e4f84130e2a0234672255b12bac67747a029 Mon Sep 17 00:00:00 2001 From: Matthias Van Parijs Date: Thu, 12 Sep 2024 00:05:22 +0200 Subject: [PATCH] fix: Optimized bundle splitting for dashboard chunks --- .../dashboard/src/components/JobState.tsx | 5 +- packages/dashboard/src/components/JobView.tsx | 2 +- .../dashboard/src/components/editor/worker.ts | 2 +- .../dashboard/src/components/ui/select.tsx | 58 ++++++++++--------- packages/dashboard/src/lucide.d.ts | 5 ++ packages/dashboard/vite.config.ts | 21 +++++++ 6 files changed, 62 insertions(+), 31 deletions(-) create mode 100644 packages/dashboard/src/lucide.d.ts diff --git a/packages/dashboard/src/components/JobState.tsx b/packages/dashboard/src/components/JobState.tsx index 97b3304d..5a606d0d 100644 --- a/packages/dashboard/src/components/JobState.tsx +++ b/packages/dashboard/src/components/JobState.tsx @@ -1,4 +1,7 @@ -import { CircleDotDashed, Loader, Check, X } from "lucide-react"; +import Loader from "lucide-react/icons/loader"; +import CircleDotDashed from "lucide-react/icons/circle-dot-dashed"; +import Check from "lucide-react/icons/check"; +import X from "lucide-react/icons/x"; import { cn } from "@/lib/utils"; import type { JobDto } from "@/tsr"; diff --git a/packages/dashboard/src/components/JobView.tsx b/packages/dashboard/src/components/JobView.tsx index b18c7f8b..9a9b12ac 100644 --- a/packages/dashboard/src/components/JobView.tsx +++ b/packages/dashboard/src/components/JobView.tsx @@ -1,6 +1,6 @@ import { getTimeAgo } from "@/lib/helpers"; import { JobLogs } from "./JobLogs"; -import { AlertCircle } from "lucide-react"; +import AlertCircle from "lucide-react/icons/alert-circle"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { getDurationStr } from "@/lib/helpers"; import type { JobDto } from "@/tsr"; diff --git a/packages/dashboard/src/components/editor/worker.ts b/packages/dashboard/src/components/editor/worker.ts index 27f799c2..57d92719 100644 --- a/packages/dashboard/src/components/editor/worker.ts +++ b/packages/dashboard/src/components/editor/worker.ts @@ -1,4 +1,4 @@ -import * as monaco from "monaco-editor"; +import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"; import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"; diff --git a/packages/dashboard/src/components/ui/select.tsx b/packages/dashboard/src/components/ui/select.tsx index fe56d4d3..585f2efc 100644 --- a/packages/dashboard/src/components/ui/select.tsx +++ b/packages/dashboard/src/components/ui/select.tsx @@ -1,14 +1,16 @@ -import * as React from "react" -import * as SelectPrimitive from "@radix-ui/react-select" -import { Check, ChevronDown, ChevronUp } from "lucide-react" +import * as React from "react"; +import * as SelectPrimitive from "@radix-ui/react-select"; +import Check from "lucide-react/icons/check"; +import ChevronDown from "lucide-react/icons/chevron-down"; +import ChevronUp from "lucide-react/icons/chevron-up"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; -const Select = SelectPrimitive.Root +const Select = SelectPrimitive.Root; -const SelectGroup = SelectPrimitive.Group +const SelectGroup = SelectPrimitive.Group; -const SelectValue = SelectPrimitive.Value +const SelectValue = SelectPrimitive.Value; const SelectTrigger = React.forwardRef< React.ElementRef, @@ -18,7 +20,7 @@ const SelectTrigger = React.forwardRef< ref={ref} className={cn( "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", - className + className, )} {...props} > @@ -27,8 +29,8 @@ const SelectTrigger = React.forwardRef< -)) -SelectTrigger.displayName = SelectPrimitive.Trigger.displayName +)); +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; const SelectScrollUpButton = React.forwardRef< React.ElementRef, @@ -38,14 +40,14 @@ const SelectScrollUpButton = React.forwardRef< ref={ref} className={cn( "flex cursor-default items-center justify-center py-1", - className + className, )} {...props} > -)) -SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName +)); +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; const SelectScrollDownButton = React.forwardRef< React.ElementRef, @@ -55,15 +57,15 @@ const SelectScrollDownButton = React.forwardRef< ref={ref} className={cn( "flex cursor-default items-center justify-center py-1", - className + className, )} {...props} > -)) +)); SelectScrollDownButton.displayName = - SelectPrimitive.ScrollDownButton.displayName + SelectPrimitive.ScrollDownButton.displayName; const SelectContent = React.forwardRef< React.ElementRef, @@ -76,7 +78,7 @@ const SelectContent = React.forwardRef< "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", - className + className, )} position={position} {...props} @@ -86,7 +88,7 @@ const SelectContent = React.forwardRef< className={cn( "p-1", position === "popper" && - "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]" + "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]", )} > {children} @@ -94,8 +96,8 @@ const SelectContent = React.forwardRef< -)) -SelectContent.displayName = SelectPrimitive.Content.displayName +)); +SelectContent.displayName = SelectPrimitive.Content.displayName; const SelectLabel = React.forwardRef< React.ElementRef, @@ -106,8 +108,8 @@ const SelectLabel = React.forwardRef< className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} /> -)) -SelectLabel.displayName = SelectPrimitive.Label.displayName +)); +SelectLabel.displayName = SelectPrimitive.Label.displayName; const SelectItem = React.forwardRef< React.ElementRef, @@ -117,7 +119,7 @@ const SelectItem = React.forwardRef< ref={ref} className={cn( "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", - className + className, )} {...props} > @@ -129,8 +131,8 @@ const SelectItem = React.forwardRef< {children} -)) -SelectItem.displayName = SelectPrimitive.Item.displayName +)); +SelectItem.displayName = SelectPrimitive.Item.displayName; const SelectSeparator = React.forwardRef< React.ElementRef, @@ -141,8 +143,8 @@ const SelectSeparator = React.forwardRef< className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} /> -)) -SelectSeparator.displayName = SelectPrimitive.Separator.displayName +)); +SelectSeparator.displayName = SelectPrimitive.Separator.displayName; export { Select, @@ -155,4 +157,4 @@ export { SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, -} +}; diff --git a/packages/dashboard/src/lucide.d.ts b/packages/dashboard/src/lucide.d.ts new file mode 100644 index 00000000..04990a22 --- /dev/null +++ b/packages/dashboard/src/lucide.d.ts @@ -0,0 +1,5 @@ +declare module "lucide-react/icons/*" { + const cmp: React.FC<{ className?: string }>; + + export = cmp; +} diff --git a/packages/dashboard/vite.config.ts b/packages/dashboard/vite.config.ts index d0b05f40..85f05bd0 100644 --- a/packages/dashboard/vite.config.ts +++ b/packages/dashboard/vite.config.ts @@ -1,6 +1,7 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import path from "path"; +import { fileURLToPath } from "url"; // https://vitejs.dev/config/ export default defineConfig({ @@ -8,10 +9,30 @@ export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "./src"), + "lucide-react/icons": fileURLToPath( + new URL("./node_modules/lucide-react/dist/esm/icons", import.meta.url), + ), }, }, clearScreen: false, server: { port: 52000, }, + build: { + rollupOptions: { + output: { + manualChunks: (id) => { + if (id.includes("hls.js")) { + return "hlsjs"; + } + if (id.includes("@scalar")) { + return "scalar"; + } + if (id.includes("monaco-editor")) { + return "monaco-editor"; + } + }, + }, + }, + }, });