chore: FE Code Splitting

frontend/package.json

@@ -164,6 +164,7 @@
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   },

frontend/src/App/App.jsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, lazy } from 'react';
 // eslint-disable-next-line no-unused-vars
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { authorizeWorkspace } from '@/_helpers/authorizeWorkspace';
@@ -25,7 +25,6 @@ import Toast from '@/_ui/Toast';
 import { VerificationSuccessInfoScreen } from '@/SuccessInfoScreen';
 import '@/_styles/theme.scss';
 import { AppLoader } from '@/AppLoader';
-import SetupScreenSelfHost from '../SuccessInfoScreen/SetupScreenSelfHost';
 export const BreadCrumbContext = React.createContext({});
 import 'react-tooltip/dist/react-tooltip.css';
 import { getWorkspaceIdOrSlugFromURL } from '@/_helpers/routes';
@@ -40,6 +39,8 @@ import { ManageGroupPermissions } from '@/ManageGroupPermissions';
 import OrganizationLogin from '@/_components/OrganizationLogin/OrganizationLogin';
 import { ManageOrgVars } from '@/ManageOrgVars';
 
+const SetupScreenSelfHost = lazy(() => import('../SuccessInfoScreen/SetupScreenSelfHost'));
+
 const AppWrapper = (props) => {
   const { isAppDarkMode } = useAppDarkMode();
   return (
@@ -181,7 +182,15 @@ class AppComponent extends React.Component {
                   </AuthRoute>
                 }
               />
-              <Route path="/setup" exact element={<SetupScreenSelfHost {...this.props} darkMode={darkMode} />} />
+              <Route
+                path="/setup"
+                exact
+                element={
+                  <Suspense fallback={null}>
+                    <SetupScreenSelfHost {...this.props} darkMode={darkMode} />
+                  </Suspense>
+                }
+              />
               <Route path="/sso/:origin/:configId" exact element={<Oauth {...this.props} />} />
               <Route path="/sso/:origin" exact element={<Oauth {...this.props} />} />
               <Route

frontend/src/Editor/CodeBuilder/Elements/Color.jsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
-import { SketchPicker } from 'react-color';
+import React, { useState, lazy } from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import classNames from 'classnames';
 import { computeColor } from '@/_helpers/utils';
 
+const SketchPicker = lazy(() => import('react-color').then((module) => ({ default: module.SketchPicker })));
+
 export const Color = ({
   value,
   onChange,

frontend/src/Editor/CodeEditor/CodeHinter.jsx

@@ -1,20 +1,26 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { useResolveStore } from '@/_stores/resolverStore';
 import { shallow } from 'zustand/shallow';
 import './styles.scss';
-import SingleLineCodeEditor from './SingleLineCodeEditor';
-import MultiLineCodeEditor from './MultiLineCodeEditor';
 import usePortal from '@/_hooks/use-portal';
 import Tooltip from 'react-bootstrap/Tooltip';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import { isNumber } from 'lodash';
 import { Alert } from '@/_ui/Alert/Alert';
 
+const SingleLineCodeEditor = lazy(() => import('./SingleLineCodeEditor'));
+
+const EditorBridge = lazy(() =>
+  import('./SingleLineCodeEditor').then((module) => {
+    return { default: module.DynamicEditorBridge };
+  })
+);
+
 const CODE_EDITOR_TYPE = {
-  fxEditor: SingleLineCodeEditor.EditorBridge,
+  fxEditor: EditorBridge,
   basic: SingleLineCodeEditor,
-  multiline: MultiLineCodeEditor,
+  multiline: lazy(() => import('./MultiLineCodeEditor')),
   extendedSingleLine: SingleLineCodeEditor,
 };
 
@@ -63,21 +69,23 @@ const CodeHinter = ({ type = 'basic', initialValue, componentName, disabled, ...
   const RenderCodeEditor = CODE_EDITOR_TYPE[type];
 
   return (
-    <RenderCodeEditor
-      type={type}
-      initialValue={initialValue}
-      suggestions={suggestions}
-      darkMode={darkMode}
-      portalProps={{
-        isOpen,
-        setIsOpen,
-        handleTogglePopupExapand,
-        forceUpdate,
-      }}
-      componentName={componentName}
-      disabled={disabled}
-      {...restProps}
-    />
+    <Suspense fallback={null}>
+      <RenderCodeEditor
+        type={type}
+        initialValue={initialValue}
+        suggestions={suggestions}
+        darkMode={darkMode}
+        portalProps={{
+          isOpen,
+          setIsOpen,
+          handleTogglePopupExapand,
+          forceUpdate,
+        }}
+        componentName={componentName}
+        disabled={disabled}
+        {...restProps}
+      />
+    </Suspense>
   );
 };
 

frontend/src/Editor/CodeEditor/SingleLineCodeEditor.jsx

@@ -302,7 +302,7 @@ const EditorInput = ({
   );
 };
 
-const DynamicEditorBridge = (props) => {
+export const DynamicEditorBridge = (props) => {
   const {
     initialValue,
     type,