Merge branch 'feature/lazy_load' into develop

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,14 +10,16 @@ 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 {}
@@ -65,16 +66,20 @@ const App = (): ReactElement => {
                   <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/">
+                    <Suspense fallback={<div></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>

packages/webapp/webpack.common.js

@@ -38,6 +38,10 @@ module.exports = {
   },
   optimization: {
     usedExports: true,
+<<<<<<< HEAD
+=======
+    chunkIds: 'named',
+>>>>>>> feature/lazy_load
     splitChunks: {
       cacheGroups: {
         vendors: {