[WEB-3966] chore: update dependencies and optimize dynamic imports

web/app/(all)/[workspaceSlug]/(projects)/layout.tsx

@@ -1,11 +1,20 @@
 "use client";
 
-import { CommandPalette } from "@/components/command-palette";
+import dynamic from "next/dynamic";
 import { AuthenticationWrapper } from "@/lib/wrappers";
 // plane web components
 import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
 import { AppSidebar } from "./sidebar";
 
+// Dynamically import heavy components
+const CommandPalette = dynamic(
+  () => import("@/components/command-palette").then((module) => ({ default: module.CommandPalette })),
+  {
+    ssr: false, // Command palette doesn't need SSR
+    loading: () => null,
+  }
+);
+
 export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
   return (
     <AuthenticationWrapper>

web/app/(all)/profile/layout.tsx

@@ -1,20 +1,19 @@
 "use client";
 
-import { ReactNode } from "react";
-// components
-import { CommandPalette } from "@/components/command-palette";
-// wrappers
+import dynamic from "next/dynamic";
 import { AuthenticationWrapper } from "@/lib/wrappers";
-// layout
 import { ProfileLayoutSidebar } from "./sidebar";
 
-type Props = {
-  children: ReactNode;
-};
-
-export default function ProfileSettingsLayout(props: Props) {
-  const { children } = props;
+// Dynamically import heavy components
+const CommandPalette = dynamic(
+  () => import("@/components/command-palette").then((module) => ({ default: module.CommandPalette })),
+  {
+    ssr: false, // Command palette doesn't need SSR
+    loading: () => null,
+  }
+);
 
+export default function ProfileLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <CommandPalette />

web/core/components/ui/graphs/index.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import dynamic from "next/dynamic";
+
+// Shared LoadingSpinner component
+const LoadingSpinner = () => (
+  <div className="flex h-96 w-full items-center justify-center">
+    <div className="h-8 w-8 animate-spin rounded-full border-2 border-custom-primary border-t-transparent" />
+  </div>
+);
+
+// Dynamically import heavy chart components (Nivo charts)
+export const BarGraph = dynamic(
+  () => import("./bar-graph").then(module => ({ default: module.BarGraph })),
+  {
+    ssr: false, // Charts are client-side only
+    loading: () => <LoadingSpinner />,
+  }
+);
+
+export const PieGraph = dynamic(
+  () => import("./pie-graph").then(module => ({ default: module.PieGraph })),
+  {
+    ssr: false,
+    loading: () => <LoadingSpinner />,
+  }
+);
+
+export const LineGraph = dynamic(
+  () => import("./line-graph").then(module => ({ default: module.LineGraph })),
+  {
+    ssr: false,
+    loading: () => <LoadingSpinner />,
+  }
+);
+
+export const CalendarGraph = dynamic(
+  () => import("./calendar-graph").then(module => ({ default: module.CalendarGraph })),
+  {
+    ssr: false,
+    loading: () => <LoadingSpinner />,
+  }
+);
+
+export const ScatterPlotGraph = dynamic(
+  () => import("./scatter-plot-graph").then(module => ({ default: module.ScatterPlotGraph })),
+  {
+    ssr: false,
+    loading: () => <LoadingSpinner />,
+  }
+);
+
+// Re-export types (no runtime impact)
+export type * from "./types.d";

web/next.config.js

@@ -3,6 +3,11 @@
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 require("dotenv").config({ path: ".env" });
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+
 const nextConfig = {
   trailingSlash: true,
   reactStrictMode: false,
@@ -37,7 +42,115 @@ const nextConfig = {
       "lodash",
       "clsx",
       "tailwind-merge",
+      "recharts",
+      "axios",
+      "mobx",
+      "mobx-react",
     ],
+    // Enable modern bundling features
+    turbo: {
+      rules: {
+        "*.svg": {
+          loaders: ["@svgr/webpack"],
+          as: "*.js",
+        },
+      },
+    },
+  },
+  webpack: (config, { dev, isServer }) => {
+    // Apply aggressive optimizations only for client-side production builds
+    if (!dev && !isServer) {
+      // Enhanced tree shaking (client-side only)
+      config.optimization.usedExports = true;
+      config.optimization.sideEffects = false;
+      config.optimization.providedExports = true;
+      config.optimization.concatenateModules = true;
+
+      // Client-side chunk splitting strategy
+      config.optimization.splitChunks = {
+        chunks: "all",
+        minSize: 20000,
+        maxSize: 300000, // Increased from 200000 to reduce chunk fragmentation
+        maxAsyncRequests: 30,
+        maxInitialRequests: 25,
+        cacheGroups: {
+          // Framework chunks (React ecosystem)
+          react: {
+            test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
+            name: "react",
+            chunks: "all",
+            priority: 40,
+            enforce: true,
+          },
+          // Large UI libraries
+          ui: {
+            test: /[\\/]node_modules[\\/](@headlessui|@radix-ui|@blueprintjs)[\\/]/,
+            name: "ui-libs",
+            chunks: "all",
+            priority: 35,
+          },
+          // Chart libraries (async loading for better performance)
+          charts: {
+            test: /[\\/]node_modules[\\/](@nivo|recharts)[\\/]/,
+            name: "charts",
+            chunks: "async", // Only load when needed
+            priority: 30,
+            enforce: true,
+          },
+          // Editor libraries (async loading)
+          editor: {
+            test: /[\\/]node_modules[\\/](@tiptap|prosemirror|@plane\/editor)[\\/]/,
+            name: "editor",
+            chunks: "async", // Only load when needed
+            priority: 30,
+            enforce: true,
+          },
+          // Date/time libraries
+          date: {
+            test: /[\\/]node_modules[\\/](date-fns|react-day-picker)[\\/]/,
+            name: "date-libs",
+            chunks: "all",
+            priority: 25,
+          },
+          // Utility libraries
+          utils: {
+            test: /[\\/]node_modules[\\/](lodash|clsx|tailwind-merge|uuid)[\\/]/,
+            name: "utils",
+            chunks: "all",
+            priority: 20,
+          },
+          // Vendor chunks for other libraries
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name: "vendors",
+            chunks: "all",
+            priority: 10,
+            minChunks: 2,
+          },
+          // Common application code
+          common: {
+            name: "common",
+            minChunks: 2,
+            chunks: "all",
+            priority: 5,
+            reuseExistingChunk: true,
+          },
+        },
+      };
+
+      // Additional client-side optimizations
+      config.optimization.moduleIds = "deterministic";
+      config.optimization.chunkIds = "deterministic";
+    }
+
+    // Universal optimizations (both client and server)
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      // Reduce bundle size by aliasing to smaller alternatives where possible
+      "react/jsx-runtime": require.resolve("react/jsx-runtime"),
+    };
+
+    return config;
   },
   transpilePackages: [
     "@plane/constants",
@@ -115,4 +228,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withBundleAnalyzer(nextConfig);

web/package.json

@@ -78,6 +78,7 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "^15.3.2",
     "@plane/eslint-config": "*",
     "@plane/tailwind-config": "*",
     "@plane/typescript-config": "*",
@@ -93,4 +94,4 @@
     "prettier": "^3.2.5",
     "typescript": "5.3.3"
   }
-}
+}