feat: add page lazy loading

src/apps/MoneyControllApp/model/providers/RouterProvider/index.tsx

@@ -1,6 +1,8 @@
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
 import PieChartIcon from '@mui/icons-material/PieChart';
+import { CircularProgress } from '@mui/material';
+import { Suspense } from 'react';
 import { createBrowserRouter, Navigate, RouterProvider as RRDRouterProvider } from 'react-router-dom';
 
 // todo lazy & access
@@ -12,6 +14,7 @@ import { SchedulePage, SchedulePageToolbar } from 'pages/SchedulePage';
 import { AsideMenuLayout } from 'widgets/AsideMenuLayout';
 
 import type { ReactNode } from 'react';
+import type { RouteObject } from 'react-router-dom';
 
 type PageListItem = {
   icon: ReactNode;
@@ -26,26 +29,38 @@ const pages: PageListItem[] = [
     icon: <PieChartIcon />,
     title: 'Аналитика',
     path: '/analyze',
-    Content: <AnalyzePage />,
+    Content: (
+      <Suspense fallback={<CircularProgress />}>
+        <AnalyzePage />
+      </Suspense>
+    ),
     Toolbar: <AnalyzePageToolbar />,
   },
   {
     icon: <CalendarMonthIcon />,
     title: 'График платежей',
     path: '/schedule',
-    Content: <SchedulePage />,
+    Content: (
+      <Suspense fallback={<CircularProgress />}>
+        <SchedulePage />
+      </Suspense>
+    ),
     Toolbar: <SchedulePageToolbar />,
   },
   {
     icon: <FormatListBulletedIcon />,
     title: 'Список платежей',
     path: '/payments',
-    Content: <PaymentsPage />,
+    Content: (
+      <Suspense fallback={<CircularProgress />}>
+        <PaymentsPage />
+      </Suspense>
+    ),
     Toolbar: <PaymentsPageToolbar />,
   },
 ];
 
-const routes = pages.map((page) => ({
+const routes: RouteObject[] = pages.map((page) => ({
   path: page.path,
   element: (
     <AsideMenuLayout

src/pages/AnalyzePage/index.ts

@@ -1,2 +1,5 @@
-export { default as AnalyzePage } from './ui/AnalyzePage.ui';
+import { lazy } from 'react';
+
+const LazyAnalyzePage = lazy(async () => import('./ui/AnalyzePage.ui'));
+export { LazyAnalyzePage as AnalyzePage };
 export { default as AnalyzePageToolbar } from './ui/AnalyzePageToolbar.ui';

src/pages/PaymentsPage/index.ts

@@ -1,2 +1,5 @@
-export { default as PaymentsPage } from './ui/PaymentsPage.ui';
+import { lazy } from 'react';
+
+const LazyPaymentsPage = lazy(async () => import('./ui/PaymentsPage.ui'));
+export { LazyPaymentsPage as PaymentsPage };
 export { default as PaymentsPageToolbar } from './ui/PaymentsPageToolbar.ui';

src/pages/SchedulePage/index.ts

@@ -1,2 +1,5 @@
-export { default as SchedulePage } from './ui/SchedulePage.ui';
+import { lazy } from 'react';
+
+const LazySchedulePage = lazy(async () => import('./ui/SchedulePage.ui'));
+export { LazySchedulePage as SchedulePage };
 export { default as SchedulePageToolbar } from './ui/SchedulePageToolbar.ui';

webpack.config.ts

@@ -31,13 +31,15 @@ const config = (env: WebpackEnv) => {
     },
   });
 
-  const swPlugin = new InjectManifest({
-    swSrc: './src/src-sw.js',
-    swDest: 'sw.js',
-  });
+  if (env.mode === 'production') {
+    const swPlugin = new InjectManifest({
+      swSrc: './src/src-sw.js',
+      swDest: 'sw.js',
+    });
 
-  // @ts-ignore
-  baseConfig.plugins.push(swPlugin);
+    // @ts-ignore
+    baseConfig.plugins.push(swPlugin);
+  }
 
   return baseConfig;
 };