diff --git a/src/components/organisms/topbar/project/buttons.tsx b/src/components/organisms/topbar/project/buttons.tsx
index 107e06a9bb..659c6f9785 100644
--- a/src/components/organisms/topbar/project/buttons.tsx
+++ b/src/components/organisms/topbar/project/buttons.tsx
@@ -1,6 +1,6 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
-import { debounce } from "lodash";
+import { throttle } from "radash";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
@@ -272,15 +272,8 @@ export const ProjectTopbarButtons = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [projectId]);
- const debouncedBuild = useMemo(() => debounce(build, 1000, { leading: true, trailing: false }), [build]);
- const debouncedDeploy = useMemo(() => debounce(deploy, 1000, { leading: true, trailing: false }), [deploy]);
-
- useEffect(() => {
- return () => {
- debouncedBuild.cancel();
- debouncedDeploy.cancel();
- };
- }, [debouncedBuild, debouncedDeploy]);
+ const throttledBuild = useMemo(() => throttle({ interval: 1000 }, build), [build]);
+ const throttledDeploy = useMemo(() => throttle({ interval: 1000 }, deploy), [deploy]);
const isDeployAndBuildDisabled = Object.values(actionInProcess).some((value) => value);
@@ -292,7 +285,7 @@ export const ProjectTopbarButtons = () => {
ariaLabel={t("topbar.buttons.ariaBuildProject")}
className="group h-8 whitespace-nowrap px-3.5 text-white maxScreenWidth-1600:px-2"
disabled={isDeployAndBuildDisabled}
- onClick={debouncedBuild}
+ onClick={throttledBuild}
title={isValid ? t("topbar.buttons.build") : projectErrors}
variant="outline"
>
@@ -321,7 +314,7 @@ export const ProjectTopbarButtons = () => {
className="group h-8 items-center whitespace-nowrap px-3.5 text-white maxScreenWidth-1600:px-2"
disabled={isDeployAndBuildDisabled}
id={tourStepsHTMLIds.deployButton}
- onClick={debouncedDeploy}
+ onClick={throttledDeploy}
title={isValid ? t("topbar.buttons.deploy") : projectErrors}
variant="outline"
>
diff --git a/src/components/organisms/topbar/project/manualRun/manualRunButtons.tsx b/src/components/organisms/topbar/project/manualRun/manualRunButtons.tsx
index 92a87901fe..d775a43afc 100644
--- a/src/components/organisms/topbar/project/manualRun/manualRunButtons.tsx
+++ b/src/components/organisms/topbar/project/manualRun/manualRunButtons.tsx
@@ -1,6 +1,6 @@
import React, { useCallback, useEffect } from "react";
-import { isEqual } from "lodash";
+import { isEqual } from "radash";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
diff --git a/src/hooks/useSort.tsx b/src/hooks/useSort.tsx
index 9669d59d41..dbca7938b1 100644
--- a/src/hooks/useSort.tsx
+++ b/src/hooks/useSort.tsx
@@ -1,6 +1,6 @@
import { useCallback, useMemo, useState } from "react";
-import { orderBy } from "lodash";
+import { sort } from "radash";
import { initialSortConfig } from "@constants";
import { SortDirectionVariant } from "@enums/components";
@@ -16,21 +16,18 @@ export const useSort =
(items: T[], initialSortKey?: keyof T) => {
return [...items];
}
- return orderBy(
- items,
- [
- (item) => {
- const value = sortConfig.key ? item[sortConfig.key] : undefined;
-
- if (value === undefined || value === null) {
- return sortConfig.direction === SortDirectionVariant.ASC ? Number.MAX_VALUE : Number.MIN_VALUE;
- }
-
- return typeof value === "string" ? value.toLowerCase() : value;
- },
- ],
- [sortConfig.direction]
- );
+ const getValue = (item: T) => {
+ const value = sortConfig.key ? item[sortConfig.key] : undefined;
+
+ if (value === undefined || value === null) {
+ return sortConfig.direction === SortDirectionVariant.ASC ? Number.MAX_VALUE : Number.MIN_VALUE;
+ }
+
+ return typeof value === "string" ? value.toLowerCase() : value;
+ };
+
+ const sorted = sort(items, getValue as (item: T) => number);
+ return sortConfig.direction === SortDirectionVariant.DESC ? sorted.reverse() : sorted;
}, [items, sortConfig]);
const requestSort = useCallback((key: keyof T) => {
diff --git a/src/routes.tsx b/src/routes.tsx
index 42e1fca929..cf2ddf2725 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,62 +1,154 @@
-import React from "react";
+import React, { Suspense, lazy } from "react";
import { Navigate } from "react-router-dom";
import { featureFlags } from "./constants";
import { MemberRole } from "@enums";
-import { EventsList } from "@shared-components";
import { legacyRoutes } from "@src/routes.legacy";
-import {
- DeploymentsTable,
- EventViewer,
- ProtectedRoute,
- SessionsTable,
- GlobalConnectionsTable,
-} from "@components/organisms";
-import { AddConnection, EditConnection } from "@components/organisms/configuration/connections";
-import { TemplatesCatalog } from "@components/organisms/dashboard/templates";
-import { SessionViewer } from "@components/organisms/deployments";
-import { ActivityList, SessionOutputs } from "@components/organisms/deployments/sessions/tabs";
-import {
- AddOrganization,
- OrganizationMembersTable,
- OrganizationSettings,
- SwitchOrganization,
-} from "@components/organisms/settings/organization";
-import { OrganizationBilling } from "@components/organisms/settings/organization/billing";
-import { ClientConfiguration, Profile, UserOrganizationsTable } from "@components/organisms/settings/user";
-import { WelcomePage } from "@components/organisms/welcome";
-import {
- AiLandingPage,
- ChatPage,
- CustomError,
- Dashboard,
- Internal404,
- Intro,
- Project,
- TemplateLanding,
-} from "@components/pages";
+import { PageLoader } from "@components/atoms";
+import { ProtectedRoute } from "@components/organisms";
import { AppLayout, EventsLayout, GlobalConnectionsLayout } from "@components/templates";
import { ProjectWrapper } from "@components/templates/projectWrapper";
import { SettingsLayout } from "@components/templates/settingsLayout";
-const sessionViewRoutes = [
- { index: true, element: },
- { path: "executionflow", element: },
- { path: "settings/*", element: },
- { path: "executionflow/settings/*", element: },
-];
+const LazyDashboard = lazy(() => import("@components/pages/dashboard").then((m) => ({ default: m.Dashboard })));
+const LazyProject = lazy(() => import("@components/pages/project").then((m) => ({ default: m.Project })));
+const LazyAiLandingPage = lazy(() =>
+ import("@components/pages/aiLandingPage").then((m) => ({ default: m.AiLandingPage }))
+);
+const LazyChatPage = lazy(() => import("@components/pages/chat").then((m) => ({ default: m.ChatPage })));
+const LazyIntro = lazy(() => import("@components/pages/intro").then((m) => ({ default: m.Intro })));
+const LazyTemplateLanding = lazy(() =>
+ import("@components/pages/templateLanding").then((m) => ({ default: m.TemplateLanding }))
+);
+const LazyCustomError = lazy(() => import("@components/pages/customError").then((m) => ({ default: m.CustomError })));
+const LazyInternal404 = lazy(() => import("@components/pages/internal404").then((m) => ({ default: m.Internal404 })));
+
+const LazyDeploymentsTable = lazy(() =>
+ import("@components/organisms/deployments/table").then((m) => ({ default: m.DeploymentsTable }))
+);
+const LazySessionsTable = lazy(() =>
+ import("@components/organisms/deployments/sessions/table/table").then((m) => ({ default: m.SessionsTable }))
+);
+const LazySessionViewer = lazy(() =>
+ import("@components/organisms/deployments/sessions/viewer").then((m) => ({ default: m.SessionViewer }))
+);
+const LazyEventViewer = lazy(() =>
+ import("@components/organisms/events/viewer").then((m) => ({ default: m.EventViewer }))
+);
+const LazyEventsList = lazy(() =>
+ import("@components/organisms/shared/events").then((m) => ({ default: m.EventsList }))
+);
+const GlobalConnectionsTable = lazy(() =>
+ import("@components/organisms/globalConnections/table").then((m) => ({
+ default: m.GlobalConnectionsTable,
+ }))
+);
+
+const LazyProjectConfigurationDrawer = lazy(() =>
+ import("@components/organisms/configuration/configrationDrawer").then((m) => ({
+ default: m.ProjectConfigurationDrawer,
+ }))
+);
+const LazyProjectConfigurationView = lazy(() =>
+ import("@components/organisms/configuration/configurationView").then((m) => ({
+ default: m.ConfigurationView,
+ }))
+);
+const LazyAddConnection = lazy(() =>
+ import("@components/organisms/configuration/connections/add").then((m) => ({ default: m.AddConnection }))
+);
+const LazyEditConnection = lazy(() =>
+ import("@components/organisms/configuration/connections/edit").then((m) => ({
+ default: m.EditConnection,
+ }))
+);
+const LazyAddTrigger = lazy(() =>
+ import("@components/organisms/configuration/triggers/add").then((m) => ({ default: m.AddTrigger }))
+);
+const LazyEditTrigger = lazy(() =>
+ import("@components/organisms/configuration/triggers/edit").then((m) => ({ default: m.EditTrigger }))
+);
+const LazyAddVariable = lazy(() =>
+ import("@components/organisms/configuration/variables/add").then((m) => ({ default: m.AddVariable }))
+);
+const LazyEditVariable = lazy(() =>
+ import("@components/organisms/configuration/variables/edit").then((m) => ({ default: m.EditVariable }))
+);
+
+const LazyTemplatesCatalog = lazy(() =>
+ import("@components/organisms/dashboard/templates/catalog").then((m) => ({ default: m.TemplatesCatalog }))
+);
+const LazyWelcomePage = lazy(() => import("@components/organisms/welcome").then((m) => ({ default: m.WelcomePage })));
-const sessionRouteConfig = [
+const LazyActivityList = lazy(() =>
+ import("@components/organisms/deployments/sessions/tabs/activities").then((m) => ({ default: m.ActivityList }))
+);
+const LazySessionOutputs = lazy(() =>
+ import("@components/organisms/deployments/sessions/tabs/outputs").then((m) => ({
+ default: m.SessionOutputs,
+ }))
+);
+
+const LazyProfile = lazy(() =>
+ import("@components/organisms/settings/user/profile").then((m) => ({ default: m.Profile }))
+);
+const LazyClientConfiguration = lazy(() =>
+ import("@components/organisms/settings/user/clientConfiguration").then((m) => ({
+ default: m.ClientConfiguration,
+ }))
+);
+const LazyUserOrganizationsTable = lazy(() =>
+ import("@components/organisms/settings/user/organizations/table").then((m) => ({
+ default: m.UserOrganizationsTable,
+ }))
+);
+const LazyAddOrganization = lazy(() =>
+ import("@components/organisms/settings/organization/add").then((m) => ({
+ default: m.AddOrganization,
+ }))
+);
+const LazyOrganizationSettings = lazy(() =>
+ import("@components/organisms/settings/organization/settings").then((m) => ({ default: m.OrganizationSettings }))
+);
+const LazyOrganizationMembersTable = lazy(() =>
+ import("@components/organisms/settings/organization/members/table").then((m) => ({
+ default: m.OrganizationMembersTable,
+ }))
+);
+const LazySwitchOrganization = lazy(() =>
+ import("@components/organisms/settings/organization/switchOrganization").then((m) => ({
+ default: m.SwitchOrganization,
+ }))
+);
+const LazyOrganizationBilling = lazy(() =>
+ import("@components/organisms/settings/organization/billing/organizationBilling").then((m) => ({
+ default: m.OrganizationBilling,
+ }))
+);
+
+const withSuspense = (Component: React.ReactNode) => }>{Component};
+
+const settingsRouteConfig = [
+ { index: true, element: withSuspense() },
+ { path: "connections/new", element: withSuspense() },
+ { path: "connections", element: withSuspense() },
{
- path: ":sessionId",
- element: ,
- children: sessionViewRoutes,
+ path: "connections/:id/edit",
+ element: withSuspense(),
},
+ { path: "variables", element: withSuspense() },
+ { path: "variables/new", element: withSuspense() },
+ { path: "variables/:name/edit", element: withSuspense() },
+ { path: "triggers", element: withSuspense() },
+ { path: "triggers/new", element: withSuspense() },
+ { path: "triggers/:id/edit", element: withSuspense() },
];
-const noProjectHome = featureFlags.displayChatbot ? : ;
+const noProjectHome = featureFlags.displayChatbot
+ ? withSuspense()
+ : withSuspense();
const globalConnectionsRoutes = featureFlags.displayGlobalConnections
? [
@@ -65,14 +157,19 @@ const globalConnectionsRoutes = featureFlags.displayGlobalConnections
children: [
{
path: "connections",
- element: ,
+ element: withSuspense(),
children: [
- { path: "new", element: },
+ {
+ path: "new",
+ element: withSuspense(
+
+ ),
+ },
{ path: ":id", element: null },
{
path: ":id/edit",
- element: (
-
+ element: withSuspense(
+
),
},
],
@@ -88,13 +185,13 @@ export const mainRoutes = [
path: "/",
element: ,
children: [
- { index: true, element: },
+ { index: true, element: withSuspense() },
{ path: "ai", element: noProjectHome },
{ path: "welcome", element: noProjectHome },
- { path: "intro", element: },
- { path: "templates-library", element: },
- { path: "404", element: },
- { path: "chat", element: },
+ { path: "intro", element: withSuspense() },
+ { path: "templates-library", element: withSuspense() },
+ { path: "404", element: withSuspense() },
+ { path: "chat", element: withSuspense() },
{ path: "*", element: },
],
},
@@ -102,7 +199,7 @@ export const mainRoutes = [
path: "/template",
element: ,
children: [
- { index: true, element: },
+ { index: true, element: withSuspense() },
{ path: "*", element: },
],
},
@@ -115,8 +212,17 @@ export const mainRoutes = [
children: [
{ index: true, element: },
{ path: "code", element: },
- { path: "explorer", element: },
- { path: "explorer/settings/*", element: },
+ {
+ path: "explorer",
+ element: withSuspense(),
+ children: [
+ {
+ path: "settings",
+ element: withSuspense(),
+ children: settingsRouteConfig,
+ },
+ ],
+ },
],
},
],
@@ -128,12 +234,52 @@ export const mainRoutes = [
{
element: ,
children: [
- { index: true, element: },
- { path: "settings/*", element: },
+ { index: true, element: withSuspense() },
+ {
+ path: "settings",
+ element: withSuspense(
+ <>
+
+
+
+ ),
+ children: settingsRouteConfig,
+ },
+
+ {
+ path: ":deploymentId/sessions/settings",
+ element: withSuspense(
+ <>
+
+
+
+ ),
+ children: settingsRouteConfig,
+ },
+
{
path: ":deploymentId/sessions",
- element: ,
- children: sessionRouteConfig,
+ element: withSuspense(),
+ children: [
+ {
+ path: ":sessionId",
+ element: withSuspense(),
+ children: [
+ { index: true, element: withSuspense() },
+ { path: "executionflow", element: withSuspense() },
+ {
+ path: "settings",
+ element: withSuspense(
+ <>
+
+
+
+ ),
+ children: settingsRouteConfig,
+ },
+ ],
+ },
+ ],
},
{ path: "*", element: },
],
@@ -147,11 +293,22 @@ export const mainRoutes = [
{
element: ,
children: [
- { index: true, element: },
- { path: "settings/*", element: },
+ { index: true, element: withSuspense() },
+ { path: "settings/*", element: withSuspense() },
{
- element: ,
- children: sessionRouteConfig,
+ element: withSuspense(),
+ children: [
+ {
+ path: ":sessionId",
+ element: withSuspense(),
+ children: [
+ { index: true, element: withSuspense() },
+ { path: "executionflow", element: withSuspense() },
+ { path: "settings/*", element: withSuspense() },
+ { path: "executionflow/settings/*", element: withSuspense() },
+ ],
+ },
+ ],
},
{ path: "*", element: },
],
@@ -166,10 +323,10 @@ export const mainRoutes = [
),
children: [
- { index: true, element: },
- { path: "client-configuration", element: },
- { path: "organizations", element: },
- { path: "add-organization", element: },
+ { index: true, element: withSuspense() },
+ { path: "client-configuration", element: withSuspense() },
+ { path: "organizations", element: withSuspense() },
+ { path: "add-organization", element: withSuspense() },
{ path: "*", element: },
],
},
@@ -185,7 +342,7 @@ export const mainRoutes = [
index: true,
element: (
-
+ {withSuspense()}
),
},
@@ -193,11 +350,11 @@ export const mainRoutes = [
path: "billing",
element: (
-
+ {withSuspense()}
),
},
- { path: "members", element: },
+ { path: "members", element: withSuspense() },
{ path: "*", element: },
],
},
@@ -206,8 +363,8 @@ export const mainRoutes = [
children: [
{
path: "events",
- element: ,
- children: [{ path: ":eventId", element: }],
+ element: withSuspense(),
+ children: [{ path: ":eventId", element: withSuspense() }],
},
{ path: "*", element: },
],
@@ -216,12 +373,12 @@ export const mainRoutes = [
{
path: "switch-organization/:organizationId",
element: ,
- children: [{ index: true, element: }],
+ children: [{ index: true, element: withSuspense() }],
},
{
path: "error",
element: ,
- children: [{ index: true, element: }],
+ children: [{ index: true, element: withSuspense() }],
},
...legacyRoutes,
{ path: "*", element: },
diff --git a/src/services/sessions.service.ts b/src/services/sessions.service.ts
index 882cfef74d..5da9cc6e41 100644
--- a/src/services/sessions.service.ts
+++ b/src/services/sessions.service.ts
@@ -1,5 +1,5 @@
import { t } from "i18next";
-import { omit } from "lodash";
+import { omit } from "radash";
import {
Session as ProtoSession,
@@ -177,7 +177,7 @@ export class SessionsService {
projectId: string
): Promise> {
try {
- const sessionToStart = { ...omit(startSessionArgs, "jsonInputs"), projectId };
+ const sessionToStart = { ...omit(startSessionArgs, ["jsonInputs"]), projectId };
const sessionAsStartRequest = {
session: sessionToStart,
jsonObjectInput: startSessionArgs.jsonInputs,
diff --git a/src/store/cache/useCacheStore.ts b/src/store/cache/useCacheStore.ts
index b1cf97db7f..3a264b1aa1 100644
--- a/src/store/cache/useCacheStore.ts
+++ b/src/store/cache/useCacheStore.ts
@@ -1,5 +1,5 @@
import { t } from "i18next";
-import isEqual from "lodash/isEqual";
+import { isEqual } from "radash";
import { createSelector } from "reselect";
import { StateCreator, create } from "zustand";
diff --git a/src/store/useProjectStore.ts b/src/store/useProjectStore.ts
index eb63024956..c4f622d96e 100644
--- a/src/store/useProjectStore.ts
+++ b/src/store/useProjectStore.ts
@@ -1,6 +1,6 @@
import { t } from "i18next";
import { load } from "js-yaml";
-import isEqual from "lodash/isEqual";
+import { isEqual } from "radash";
import { StateCreator, create } from "zustand";
import { persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
diff --git a/src/utilities/calculateDeploymentSessionsStats.utils.ts b/src/utilities/calculateDeploymentSessionsStats.utils.ts
index 2eeac705a9..e8fc662087 100644
--- a/src/utilities/calculateDeploymentSessionsStats.utils.ts
+++ b/src/utilities/calculateDeploymentSessionsStats.utils.ts
@@ -1,5 +1,3 @@
-import { cloneDeep } from "lodash";
-
import { SessionStateType } from "@src/enums";
import { SessionStatsFilterType } from "@src/types/components";
import { Deployment } from "@src/types/models";
@@ -8,7 +6,7 @@ export const calculateDeploymentSessionsStats = (deployments: Deployment[]): Ses
const allSessionStats = deployments.flatMap((deployment) => deployment.sessionStats || []);
let totalSessionsCount = 0;
- const resetSessionStats = cloneDeep(initialSessionCounts);
+ const resetSessionStats = structuredClone(initialSessionCounts);
const sessionStats = allSessionStats.reduce>((acc, { count, state }) => {
if (!state) return acc;
diff --git a/src/utilities/convertBuildRuntimesToViewTriggers.utils.ts b/src/utilities/convertBuildRuntimesToViewTriggers.utils.ts
index 9e1b5f61fb..c45070bd50 100644
--- a/src/utilities/convertBuildRuntimesToViewTriggers.utils.ts
+++ b/src/utilities/convertBuildRuntimesToViewTriggers.utils.ts
@@ -1,4 +1,4 @@
-import { uniqBy } from "lodash";
+import { unique } from "radash";
import { namespaces } from "@constants";
import { LoggerService } from "@services";
@@ -16,7 +16,7 @@ const processRuntime = (runtime: BuildInfoRuntimes): Record =>
.filter(({ location: { path }, symbol: name }) => path === fileName && !name.startsWith("_"))
.map(({ symbol: name }) => name);
- const uniqueEntrypoints = uniqBy(entrypointsForFile, (func) => func);
+ const uniqueEntrypoints = unique(entrypointsForFile, (func) => func);
result[fileName] = uniqueEntrypoints;
});
diff --git a/src/utilities/fetchAndExtractZip.utils.ts b/src/utilities/fetchAndExtractZip.utils.ts
index 18494af9d7..63dbd0e3d7 100644
--- a/src/utilities/fetchAndExtractZip.utils.ts
+++ b/src/utilities/fetchAndExtractZip.utils.ts
@@ -2,7 +2,7 @@ import axios from "axios";
import frontMatter from "front-matter";
import { t } from "i18next";
import JSZip from "jszip";
-import { memoize } from "lodash";
+import { memo } from "radash";
import {
DirectoryNode,
@@ -16,9 +16,9 @@ import { LoggerService } from "@services/logger.service";
import { namespaces } from "@src/constants";
import { ProcessedRemoteCategory, RemoteTemplateCardWithFiles } from "@src/interfaces/store";
-const isFileNode = memoize((node: FileNode | DirectoryNode): node is FileNode => node?.type === "file");
+const isFileNode = (node: FileNode | DirectoryNode): node is FileNode => node?.type === "file";
-const isDirectoryNode = memoize((node: FileNode | DirectoryNode): node is DirectoryNode => node?.type === "directory");
+const isDirectoryNode = (node: FileNode | DirectoryNode): node is DirectoryNode => node?.type === "directory";
const directoryCache = new Map();
@@ -145,7 +145,7 @@ export const fetchAndUnpackZip = async (remoteTemplatesArchiveUrl: string): Prom
}
};
-const getFileName = memoize((path: string): string => path.split("/").pop() || path);
+const getFileName = memo((path: string): string => path.split("/").pop() || path);
const getDirectoryStructure = (fileStructure: FileStructure, targetPath: string): FileStructure | null => {
if (!targetPath) return fileStructure;
diff --git a/src/utilities/openedEditorFilesState.utils.ts b/src/utilities/openedEditorFilesState.utils.ts
index e8182535e6..993741bff1 100644
--- a/src/utilities/openedEditorFilesState.utils.ts
+++ b/src/utilities/openedEditorFilesState.utils.ts
@@ -1,8 +1,8 @@
-import { map, uniqBy } from "lodash";
+import { unique } from "radash";
export const updateOpenedFilesState = (files: { isActive: boolean; name: string }[], name: string) => {
- return uniqBy(
- [...map(files, (file) => ({ ...file, isActive: file.name === name })), { isActive: true, name }],
- "name"
+ return unique(
+ [...files.map((file) => ({ ...file, isActive: file.name === name })), { isActive: true, name }],
+ (f) => f.name
);
};
diff --git a/vite.config.ts b/vite.config.ts
index 49d795571e..fd70f8bf39 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,8 @@
-import react from "@vitejs/plugin-react";
+import react from "@vitejs/plugin-react-swc";
import dotenv from "dotenv";
import fs from "fs";
import path from "path";
+import { visualizer } from "rollup-plugin-visualizer";
import { defineConfig } from "vite";
import { ViteEjsPlugin } from "vite-plugin-ejs";
import mkcert from "vite-plugin-mkcert";
@@ -30,11 +31,13 @@ export default defineConfig({
: 8000,
},
build: {
- sourcemap: true,
+ sourcemap: process.env.NODE_ENV === "production" ? "hidden" : true,
minify: "terser",
+ chunkSizeWarningLimit: 1000,
terserOptions: {
compress: {
dead_code: true,
+ drop_console: process.env.NODE_ENV === "production",
if_return: true,
unused: true,
reduce_vars: true,
@@ -42,6 +45,30 @@ export default defineConfig({
passes: 2,
},
},
+ rollupOptions: {
+ output: {
+ manualChunks: {
+ "vendor-react": ["react", "react-dom", "react-router-dom"],
+ "vendor-ui": [
+ "motion",
+ "swiper",
+ "react-select",
+ "@floating-ui/react",
+ "react-arborist",
+ "react-complex-tree",
+ ],
+ "vendor-editor": ["@monaco-editor/react", "monaco-editor-textmate", "monaco-textmate", "onigasm"],
+ "vendor-charts": ["apexcharts", "react-apexcharts"],
+ "vendor-pdf": ["pdfjs-dist", "react-pdf"],
+ "vendor-mermaid": ["mermaid"],
+ "vendor-monitoring": ["@sentry/react", "@datadog/browser-rum", "@datadog/browser-rum-react"],
+ "vendor-utils": ["radash", "dayjs", "zod", "zustand", "immer", "clsx", "tailwind-merge"],
+ "vendor-forms": ["react-hook-form", "@hookform/resolvers"],
+ "vendor-i18n": ["i18next", "react-i18next"],
+ "vendor-markdown": ["react-markdown", "remark-gfm", "remark-github-blockquote-alert"],
+ },
+ },
+ },
},
define: {
"import.meta.env.VITE_APP_VERSION": JSON.stringify(version),
@@ -145,6 +172,16 @@ export default defineConfig({
],
}),
reactVirtualized(),
+ ...(process.env.ANALYZE === "true"
+ ? [
+ visualizer({
+ open: true,
+ filename: "dist/stats.html",
+ gzipSize: true,
+ brotliSize: true,
+ }),
+ ]
+ : []),
],
resolve: {
alias: {