Add lazy loading support.

packages/webapp/src/app.tsx

@@ -1,7 +1,6 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, Suspense } from 'react';
 import { IntlProvider } from 'react-intl';
 import { Route, Switch, Redirect, BrowserRouter as Router } from 'react-router-dom';
-import RegistrationSuccessPage from './components/registration-success-page';
 import ForgotPasswordSuccessPage from './components/forgot-password-success-page';
 import RegistationPage from './components/registration-page';
 import LoginPage from './components/login-page';
@@ -11,96 +10,90 @@ import { Provider } from 'react-redux';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { theme } from './theme';
 import AppI18n, { Locales } from './classes/app-i18n';
-import MapsPage from './components/maps-page';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
 import ReactGA from 'react-ga4';
-import EditorPage from './components/editor-page';
 import AppConfig from './classes/app-config';
 import withSessionExpirationHandling from './components/HOCs/withSessionExpirationHandling';
 
+const EditorPage = React.lazy(() => import('./components/editor-page'));
+const RegistrationSuccessPage = React.lazy(() => import('./components/registration-success-page'));
+const MapsPage = React.lazy(() => import('./components/maps-page'));
 
 declare module '@mui/styles/defaultTheme' {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface DefaultTheme extends Theme { }
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme { }
 }
 
 // Google Analytics Initialization.
 ReactGA.initialize([
-    {
-        trackingId: AppConfig.getGoogleAnalyticsAccount(),
-    }
+  {
+    trackingId: AppConfig.getGoogleAnalyticsAccount(),
+  },
 ]);
 
-
 const queryClient = new QueryClient({
-    defaultOptions: {
-        queries: {
-            refetchIntervalInBackground: false,
-            staleTime: 5 * 1000 * 60, // 10 minutes
-        },
+  defaultOptions: {
+    queries: {
+      refetchIntervalInBackground: false,
+      staleTime: 5 * 1000 * 60, // 10 minutes
     },
+  },
 });
 
 const App = (): ReactElement => {
-    const locale = AppI18n.getDefaultLocale();
-    const EnhacedEditorPage = withSessionExpirationHandling(EditorPage);
+  const locale = AppI18n.getDefaultLocale();
+  const EnhacedEditorPage = withSessionExpirationHandling(EditorPage);
 
-    return locale.message ? (
-        <Provider store={store}>
-            <QueryClientProvider client={queryClient}>
-                <IntlProvider
-                    locale={locale.code}
-                    defaultLocale={Locales.EN.code}
-                    messages={locale.message as Record<string, string>}
-                >
-                    <StyledEngineProvider injectFirst>
-                        <ThemeProvider theme={theme}>
-                            <CssBaseline />
-                            <Router>
-                                <Switch>
-                                    <Route exact path="/">
-                                        <Redirect to="/c/login" />
-                                    </Route>
-                                    <Route path="/c/login"
-                                        component={LoginPage}
-                                    />
-                                    <Route
-                                        path="/c/registration"
-                                        component={RegistationPage}
-                                    />
-                                    <Route
-                                        path="/c/registration-success"
-                                        component={RegistrationSuccessPage}
-                                    />
-                                    <Route
-                                        path="/c/forgot-password"
-                                        component={ForgotPasswordPage}
-                                    />
-                                    <Route
-                                        path="/c/forgot-password-success"
-                                        component={ForgotPasswordSuccessPage}
-                                    />
-                                    <Route
-                                        exact path="/c/maps/"
-                                        component={withSessionExpirationHandling(MapsPage)}
-                                    />
-                                    <Route exact path="/c/maps/:id/edit">
-                                        <EnhacedEditorPage isTryMode={false} />
-                                    </Route>
-                                    <Route exact path="/c/maps/:id/try">
-                                        <EnhacedEditorPage isTryMode={true} />
-                                    </Route>
-                                </Switch>
-                            </Router>
-                        </ThemeProvider>
-                    </StyledEngineProvider>
-                </IntlProvider>
-            </QueryClientProvider>
-        </Provider>
-    ) : (
-        <div>Loading ... </div>
-    );
+  return locale.message ? (
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <IntlProvider
+          locale={locale.code}
+          defaultLocale={Locales.EN.code}
+          messages={locale.message as Record<string, string>}
+        >
+          <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={theme}>
+              <CssBaseline />
+              <Router>
+                <Switch>
+                  <Route exact path="/">
+                    <Redirect to="/c/login" />
+                  </Route>
+                  <Route path="/c/login" component={LoginPage} />
+                  <Route path="/c/registration" component={RegistationPage} />
+                  <Route path="/c/registration-success" component={RegistrationSuccessPage} />
+                  <Route path="/c/forgot-password" component={ForgotPasswordPage} />
+                  <Route path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} />
+                  <Route
+                    exact
+                    path="/c/maps/"
+                  >
+                    <Suspense fallback={<div>Loading...</div>}>
+                      <MapsPage/>
+                    </Suspense>
+                  </Route>
+                  <Route exact path="/c/maps/:id/edit">
+                    <Suspense fallback={<div></div>}>
+                      <EnhacedEditorPage isTryMode={false} />
+                    </Suspense>
+                  </Route>
+                  <Route exact path="/c/maps/:id/try">
+                    <Suspense fallback={<div></div>}>
+                      <EnhacedEditorPage isTryMode={true} />
+                    </Suspense>
+                  </Route>
+                </Switch>
+              </Router>
+            </ThemeProvider>
+          </StyledEngineProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    </Provider>
+  ) : (
+    <div>Loading ... </div>
+  );
 };
 
 export default App;

packages/webapp/webpack.common.js

@@ -8,61 +8,62 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 webpack;
 
 module.exports = {
-    entry: {
-        app: path.join(__dirname, 'src', 'index.tsx'),
-    },
-    target: 'web',
-    resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx'],
-    },
-    output: {
-        filename: '[name].bundle.js',
-        path: path.resolve(__dirname, 'dist'),
-    },
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                use: 'ts-loader',
-                exclude: '/node_modules/',
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg)$/,
-                type: 'asset/inline',
-            },
-            {
-                test: /\.wxml$/i,
-                type: 'asset/source',
-            },
-        ],
-    },
-    optimization: {
-        usedExports: true,
-        splitChunks: {
-            cacheGroups: {
-                vendors: {
-                    test: /node_modules\/.*/,
-                    name: 'vendors',
-                    chunks: 'all',
-                },
-            },
-        },
-    },
-    plugins: [
-        new CleanWebpackPlugin({
-            dangerouslyAllowCleanPatternsOutsideProject: true,
-            dry: false,
-        }),
-        new CopyWebpackPlugin({
-            patterns: [
-                {
-                    from: 'public/*',
-                    to: '[name].[ext]',
-                    globOptions: {
-                        ignore: ['**/index.html'],
-                    },
-                },
-            ],
-        }),
+  entry: {
+    app: path.join(__dirname, 'src', 'index.tsx'),
+  },
+  target: 'web',
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  output: {
+    filename: '[name].bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: '/node_modules/',
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        type: 'asset/inline',
+      },
+      {
+        test: /\.wxml$/i,
+        type: 'asset/source',
+      },
     ],
+  },
+  optimization: {
+    usedExports: true,
+    chunkIds: 'named',
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          test: /node_modules\/.*/,
+          name: 'vendors',
+          chunks: 'all',
+        },
+      },
+    },
+  },
+  plugins: [
+    new CleanWebpackPlugin({
+      dangerouslyAllowCleanPatternsOutsideProject: true,
+      dry: false,
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'public/*',
+          to: '[name].[ext]',
+          globOptions: {
+            ignore: ['**/index.html'],
+          },
+        },
+      ],
+    }),
+  ],
 };