experimental: code splitting

src/client/Components/Result/NotFound.js

@@ -0,0 +1 @@
+export { NotFound as default } from '.';

src/client/Components/Result/ServerError.js

@@ -0,0 +1 @@
+export { ServerError as default } from '.';

src/client/Containers/Calculation/index.jsx

@@ -1,19 +1,19 @@
 import { Spin } from 'antd';
-import { ServerError } from 'client/Components/Result';
-import Modal from 'client/Elements/Modal';
+import { LoadingStatus } from 'client/common/loadingStatus';
 import { withStoreModal } from 'client/hocs/withStore';
 import { useStores } from 'client/hooks/useStores';
 import CalculationService from 'client/services/CalculationService';
 import { Box, Flex } from 'client/UIKit/grid';
 import initialOptionsMap from 'core/Data/initialOptionsMap';
 import staticEntitiesList from 'core/Data/staticEntitiesList';
-import React, { useEffect, useState } from 'react';
-import Results from './Results';
-import Sections from './Sections';
+import React, { lazy, Suspense, useEffect, useState } from 'react';
+const Results = lazy(() => import('./Results'));
+const Sections = lazy(() => import('./Sections'));
+const ServerError = lazy(() => import('client/Components/Result/ServerError'));
+const Modal = lazy(() => import('client/Elements/Modal'));
 
 const Calculation = () => {
-  const [ready, setReady] = useState(false);
-  const [error, setError] = useState(undefined);
+  const [status, setStatus] = useState(LoadingStatus.loading);
   const { calculationStore } = useStores();
   useEffect(() => {
     Promise.all([
@@ -41,16 +41,17 @@ const Calculation = () => {
           calculationStore.setTableColumns('tableInsurance')({
             options: { insuranceCompany: insuranceCompanies },
           });
-          setReady(true);
+          setStatus(LoadingStatus.ready);
         },
       )
       .catch(err => {
-        setError(err);
+        console.log('Calculation -> err', err);
+        setStatus(LoadingStatus.error);
         throw err;
       });
   }, []);
 
-  if (!error && !ready) {
+  if (status === LoadingStatus.loading) {
     return (
       <Box height="100%" py="10px">
         <Flex justifyContent="center" alignItems="center">
@@ -60,8 +61,12 @@ const Calculation = () => {
     );
   }
 
-  if (error) {
-    return <ServerError />;
+  if (status === LoadingStatus.error) {
+    return (
+      <Suspense>
+        <ServerError />
+      </Suspense>
+    );
   }
 
   const ModalComponent = withStoreModal(Modal);

src/client/Layout/index.jsx

@@ -2,7 +2,7 @@ import paths from 'client/common/paths';
 import colors from 'client/UIKit/colors';
 import { Box, Flex } from 'client/UIKit/grid';
 import mq from 'client/UIKit/mq';
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import styled from 'styled-components';
 import Logo from './Logo';
@@ -58,18 +58,21 @@ const Header = () => (
   </header>
 );
 
+//TODO: fallback
 const Content = () => (
   <Box style={styles.root}>
-    <Switch>
-      {paths.map((path, i) => (
-        <Route
-          key={i}
-          path={path.route}
-          exact={path.exact}
-          component={path.content}
-        />
-      ))}
-    </Switch>
+    <Suspense fallback={null}>
+      <Switch>
+        {paths.map((path, i) => (
+          <Route
+            key={i}
+            path={path.route}
+            exact={path.exact}
+            component={path.content}
+          />
+        ))}
+      </Switch>
+    </Suspense>
   </Box>
 );
 

src/client/common/loadingStatus.ts

@@ -0,0 +1,5 @@
+export enum LoadingStatus {
+  loading,
+  ready,
+  error,
+}

src/client/common/paths.js

@@ -1,11 +1,13 @@
-import { NotFound } from "client/Components/Result";
-import Calculation from "client/Containers/Calculation";
+import React from 'react';
+
+const NotFound = React.lazy(() => import('client/Components/Result/NotFound'));
+const Calculation = React.lazy(() => import('client/Containers/Calculation'));
 
 const paths = [
   {
-    id: "Calculation",
-    name: "Расчет",
-    route: "/",
+    id: 'Calculation',
+    name: 'Расчет',
+    route: '/',
     content: Calculation,
     exact: true,
   },