lazy-load routes

frontend/src/component/App.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect } from 'react';
+import { Fragment, Suspense, lazy, useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Error } from 'component/layout/Error/Error';
@@ -10,7 +10,6 @@ import NotFound from 'component/common/NotFound/NotFound';
 import { ProtectedRoute } from 'component/common/ProtectedRoute/ProtectedRoute';
 import { SWRProvider } from 'component/providers/SWRProvider/SWRProvider';
 import { PlausibleProvider } from 'component/providers/PlausibleProvider/PlausibleProvider';
-import ToastRenderer from 'component/common/ToastRenderer/ToastRenderer';
 import { routes } from 'component/menu/routes';
 import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
@@ -27,6 +26,10 @@ const StyledContainer = styled('div')(() => ({
     },
 }));
 
+const ToastRenderer = lazy(
+    () => import('component/common/ToastRenderer/ToastRenderer')
+);
+
 export const App = () => {
     const { authDetails } = useAuthDetails();
     const { refetch: refetchUiConfig } = useUiConfig();
@@ -64,7 +67,9 @@ export const App = () => {
                                             show={<MaintenanceBanner />}
                                         />
                                         <StyledContainer>
-                                            <ToastRenderer />
+                                            <Suspense fallback={null}>
+                                                <ToastRenderer />
+                                            </Suspense>
                                             <Routes>
                                                 {availableRoutes.map(route => (
                                                     <Route

frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx

@@ -1,12 +1,8 @@
 import { useMemo } from 'react';
-import { useTheme } from '@mui/material';
-import {
-    SortableTableHeader,
-    Table,
-    TableBody,
-    TableRow,
-    TableCell,
-} from 'component/common/Table';
+import { TableBody, TableRow, useTheme } from '@mui/material';
+import { SortableTableHeader } from 'component/common/Table/SortableTableHeader/SortableTableHeader';
+import { TableCell } from 'component/common/Table/TableCell/TableCell';
+import { Table } from 'component/common/Table/Table/Table';
 import { useVirtualizedRange } from 'hooks/useVirtualizedRange';
 import { HeaderGroup, Row } from 'react-table';
 

frontend/src/component/feedback/FeedbackCESContext/FeedbackCESProvider.tsx

@@ -4,8 +4,9 @@ import React, {
     useMemo,
     useCallback,
     useEffect,
+    lazy,
+    Suspense,
 } from 'react';
-import { FeedbackCES } from 'component/feedback/FeedbackCES/FeedbackCES';
 import {
     feedbackCESContext,
     ShowFeedbackCES,
@@ -15,6 +16,12 @@ import {
 import { useFeedbackCESSeen } from 'component/feedback/FeedbackCESContext/useFeedbackCESSeen';
 import { useFeedbackCESEnabled } from 'component/feedback/FeedbackCESContext/useFeedbackCESEnabled';
 
+const FeedbackCES = lazy(() =>
+    import('component/feedback/FeedbackCES/FeedbackCES').then(module => ({
+        default: module.FeedbackCES,
+    }))
+);
+
 interface IFeedbackProviderProps {
     children: ReactNode;
 }
@@ -54,7 +61,9 @@ export const FeedbackCESProvider = ({ children }: IFeedbackProviderProps) => {
     return (
         <feedbackCESContext.Provider value={value}>
             {children}
-            <FeedbackCES state={state} />
+            <Suspense fallback={null}>
+                <FeedbackCES state={state} />
+            </Suspense>
         </feedbackCESContext.Provider>
     );
 };

frontend/src/component/menu/routes.ts

@@ -1,49 +1,175 @@
-import { FeatureToggleListTable } from 'component/feature/FeatureToggleList/FeatureToggleListTable';
-import { StrategyView } from 'component/strategies/StrategyView/StrategyView';
-import { StrategiesList } from 'component/strategies/StrategiesList/StrategiesList';
-import { TagTypeList } from 'component/tags/TagTypeList/TagTypeList';
-import { AddonList } from 'component/addons/AddonList/AddonList';
-import Login from 'component/user/Login/Login';
+import { lazy } from 'react';
 import { EEA, P, RE, SE, UG } from 'component/common/flags';
-import { NewUser } from 'component/user/NewUser/NewUser';
-import ResetPassword from 'component/user/ResetPassword/ResetPassword';
-import ForgottenPassword from 'component/user/ForgottenPassword/ForgottenPassword';
-import { ProjectListNew } from 'component/project/ProjectList/ProjectList';
-import RedirectArchive from 'component/archive/RedirectArchive';
-import CreateEnvironment from 'component/environments/CreateEnvironment/CreateEnvironment';
-import EditEnvironment from 'component/environments/EditEnvironment/EditEnvironment';
-import { EditContext } from 'component/context/EditContext/EditContext';
-import EditTagType from 'component/tags/EditTagType/EditTagType';
-import CreateTagType from 'component/tags/CreateTagType/CreateTagType';
-import EditProject from 'component/project/Project/EditProject/EditProject';
-import CreateFeature from 'component/feature/CreateFeature/CreateFeature';
-import EditFeature from 'component/feature/EditFeature/EditFeature';
-import { ApplicationEdit } from 'component/application/ApplicationEdit/ApplicationEdit';
-import { ApplicationList } from 'component/application/ApplicationList/ApplicationList';
-import ContextList from 'component/context/ContextList/ContextList';
-import RedirectFeatureView from 'component/feature/RedirectFeatureView/RedirectFeatureView';
-import { CreateAddon } from 'component/addons/CreateAddon/CreateAddon';
-import { EditAddon } from 'component/addons/EditAddon/EditAddon';
-import { CopyFeatureToggle } from 'component/feature/CopyFeature/CopyFeature';
-import { EventPage } from 'component/events/EventPage/EventPage';
-import { CreateStrategy } from 'component/strategies/CreateStrategy/CreateStrategy';
-import { EditStrategy } from 'component/strategies/EditStrategy/EditStrategy';
-import { SplashPage } from 'component/splash/SplashPage/SplashPage';
-import { CreateUnleashContextPage } from 'component/context/CreateUnleashContext/CreateUnleashContextPage';
-import { CreateSegment } from 'component/segments/CreateSegment/CreateSegment';
-import { EditSegment } from 'component/segments/EditSegment/EditSegment';
+import Login from 'component/user/Login/Login';
 import { INavigationMenuItem, IRoute } from 'interfaces/route';
-import { EnvironmentTable } from 'component/environments/EnvironmentTable/EnvironmentTable';
-import { SegmentTable } from '../segments/SegmentTable/SegmentTable';
-import { FeaturesArchiveTable } from '../archive/FeaturesArchiveTable';
+import { SplashPage } from 'component/splash/SplashPage/SplashPage';
 import { LazyPlayground } from 'component/playground/Playground/LazyPlayground';
-import { Profile } from 'component/user/Profile/Profile';
 import { LazyCreateProject } from 'component/project/Project/CreateProject/LazyCreateProject';
 import { LazyFeatureView } from 'component/feature/FeatureView/LazyFeatureView';
 import { LazyAdmin } from 'component/admin/LazyAdmin';
 import { LazyProject } from 'component/project/Project/LazyProject';
-import { AdminRedirect } from 'component/admin/AdminRedirect';
-import { LoginHistory } from 'component/loginHistory/LoginHistory';
+
+const ResetPassword = lazy(
+    () => import('component/user/ResetPassword/ResetPassword')
+);
+const FeatureToggleListTable = lazy(() =>
+    import('component/feature/FeatureToggleList/FeatureToggleListTable').then(
+        module => ({ default: module.FeatureToggleListTable })
+    )
+);
+const ForgottenPassword = lazy(
+    () => import('component/user/ForgottenPassword/ForgottenPassword')
+);
+const RedirectArchive = lazy(() => import('component/archive/RedirectArchive'));
+const CreateEnvironment = lazy(
+    () => import('component/environments/CreateEnvironment/CreateEnvironment')
+);
+const EditEnvironment = lazy(
+    () => import('component/environments/EditEnvironment/EditEnvironment')
+);
+const EditTagType = lazy(
+    () => import('component/tags/EditTagType/EditTagType')
+);
+const CreateTagType = lazy(
+    () => import('component/tags/CreateTagType/CreateTagType')
+);
+const EditProject = lazy(
+    () => import('component/project/Project/EditProject/EditProject')
+);
+const CreateFeature = lazy(
+    () => import('component/feature/CreateFeature/CreateFeature')
+);
+const EditFeature = lazy(
+    () => import('component/feature/EditFeature/EditFeature')
+);
+const ContextList = lazy(
+    () => import('component/context/ContextList/ContextList')
+);
+const RedirectFeatureView = lazy(
+    () => import('component/feature/RedirectFeatureView/RedirectFeatureView')
+);
+const StrategyView = lazy(() =>
+    import('component/strategies/StrategyView/StrategyView').then(module => ({
+        default: module.StrategyView,
+    }))
+);
+const StrategiesList = lazy(() =>
+    import('component/strategies/StrategiesList/StrategiesList').then(
+        module => ({ default: module.StrategiesList })
+    )
+);
+const TagTypeList = lazy(() =>
+    import('component/tags/TagTypeList/TagTypeList').then(module => ({
+        default: module.TagTypeList,
+    }))
+);
+const AddonList = lazy(() =>
+    import('component/addons/AddonList/AddonList').then(module => ({
+        default: module.AddonList,
+    }))
+);
+const NewUser = lazy(() =>
+    import('component/user/NewUser/NewUser').then(module => ({
+        default: module.NewUser,
+    }))
+);
+const ProjectListNew = lazy(() =>
+    import('component/project/ProjectList/ProjectList').then(module => ({
+        default: module.ProjectListNew,
+    }))
+);
+const EditContext = lazy(() =>
+    import('component/context/EditContext/EditContext').then(module => ({
+        default: module.EditContext,
+    }))
+);
+const ApplicationEdit = lazy(() =>
+    import('component/application/ApplicationEdit/ApplicationEdit').then(
+        module => ({ default: module.ApplicationEdit })
+    )
+);
+const ApplicationList = lazy(() =>
+    import('component/application/ApplicationList/ApplicationList').then(
+        module => ({ default: module.ApplicationList })
+    )
+);
+const CreateAddon = lazy(() =>
+    import('component/addons/CreateAddon/CreateAddon').then(module => ({
+        default: module.CreateAddon,
+    }))
+);
+const EditAddon = lazy(() =>
+    import('component/addons/EditAddon/EditAddon').then(module => ({
+        default: module.EditAddon,
+    }))
+);
+const CopyFeatureToggle = lazy(() =>
+    import('component/feature/CopyFeature/CopyFeature').then(module => ({
+        default: module.CopyFeatureToggle,
+    }))
+);
+const EventPage = lazy(() =>
+    import('component/events/EventPage/EventPage').then(module => ({
+        default: module.EventPage,
+    }))
+);
+const CreateStrategy = lazy(() =>
+    import('component/strategies/CreateStrategy/CreateStrategy').then(
+        module => ({ default: module.CreateStrategy })
+    )
+);
+const EditStrategy = lazy(() =>
+    import('component/strategies/EditStrategy/EditStrategy').then(module => ({
+        default: module.EditStrategy,
+    }))
+);
+const CreateUnleashContextPage = lazy(() =>
+    import(
+        'component/context/CreateUnleashContext/CreateUnleashContextPage'
+    ).then(module => ({ default: module.CreateUnleashContextPage }))
+);
+const CreateSegment = lazy(() =>
+    import('component/segments/CreateSegment/CreateSegment').then(module => ({
+        default: module.CreateSegment,
+    }))
+);
+const EditSegment = lazy(() =>
+    import('component/segments/EditSegment/EditSegment').then(module => ({
+        default: module.EditSegment,
+    }))
+);
+const EnvironmentTable = lazy(() =>
+    import('component/environments/EnvironmentTable/EnvironmentTable').then(
+        module => ({ default: module.EnvironmentTable })
+    )
+);
+const SegmentTable = lazy(() =>
+    import('../segments/SegmentTable/SegmentTable').then(module => ({
+        default: module.SegmentTable,
+    }))
+);
+const FeaturesArchiveTable = lazy(() =>
+    import('../archive/FeaturesArchiveTable').then(module => ({
+        default: module.FeaturesArchiveTable,
+    }))
+);
+const Profile = lazy(() =>
+    import('component/user/Profile/Profile').then(module => ({
+        default: module.Profile,
+    }))
+);
+
+const AdminRedirect = lazy(() =>
+    import('component/admin/AdminRedirect').then(module => ({
+        default: module.AdminRedirect,
+    }))
+);
+
+const LoginHistory = lazy(() =>
+    import('component/loginHistory/LoginHistory').then(module => ({
+        default: module.LoginHistory,
+    }))
+);
 
 export const routes: IRoute[] = [
     // Splash

frontend/src/index.tsx

@@ -2,6 +2,7 @@ import 'whatwg-fetch';
 import 'themes/app.css';
 import 'regenerator-runtime/runtime';
 
+import { Fragment, Suspense, lazy } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import { ThemeProvider } from 'themes/ThemeProvider';
@@ -13,7 +14,12 @@ import { FeedbackCESProvider } from 'component/feedback/FeedbackCESContext/Feedb
 import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
 import { InstanceStatus } from 'component/common/InstanceStatus/InstanceStatus';
 import { UIProviderContainer } from 'component/providers/UIProvider/UIProviderContainer';
-import { MessageBanner } from 'component/common/MessageBanner/MessageBanner';
+
+const MessageBanner = lazy(() =>
+    import('component/common/MessageBanner/MessageBanner').then(module => ({
+        default: module.MessageBanner,
+    }))
+);
 
 window.global ||= window;
 
@@ -25,7 +31,9 @@ ReactDOM.render(
                     <AnnouncerProvider>
                         <FeedbackCESProvider>
                             <InstanceStatus>
-                                <MessageBanner />
+                                <Suspense fallback={null}>
+                                    <MessageBanner />
+                                </Suspense>
                                 <ScrollTop />
                                 <App />
                             </InstanceStatus>