enable bundle splitting

web/src/App.tsx

@@ -1,19 +1,22 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Router, Route, Switch } from 'wouter';
 import { useTranslation } from 'react-i18not';
 
 import './App.scss';
 
 import { Home } from './screens/Home.js';
 import { Redirect } from './screens/Redirect.js';
-import { Privacy } from './screens/Privacy.js';
-import { ToS } from './screens/ToS.js';
-import { Abuse } from './screens/Abuse.js';
-import { About } from './screens/About.js';
-import { TechnicalInformation } from './screens/TechnicalInformation.js';
 import { Header } from './components/Header.js';
 import { Status } from './components/Status.js';
 
+const Abuse = React.lazy(() => import('./screens/Abuse.js'));
+const TechnicalInformation = React.lazy(
+  () => import('./screens/TechnicalInformation.js')
+);
+const ToS = React.lazy(() => import('./screens/ToS.js'));
+const Privacy = React.lazy(() => import('./screens/Privacy.js'));
+const About = React.lazy(() => import('./screens/About.js'));
+
 export const App: React.FC = () => {
   const { dir } = useTranslation();
   document.body.dir = dir;
@@ -22,31 +25,33 @@ export const App: React.FC = () => {
     <div className="app">
       <Header />
       <Status />
-      <Router>
-        <Switch>
-          <Route path="/abuse">
-            <Abuse />
-          </Route>
-          <Route path="/about">
-            <About />
-          </Route>
-          <Route path="/privacy">
-            <Privacy />
-          </Route>
-          <Route path="/tos">
-            <ToS />
-          </Route>
-          <Route path="/tech">
-            <TechnicalInformation />
-          </Route>
-          <Route path="/:networkName">
-            <Home />
-          </Route>
-          <Route>
-            <Redirect />
-          </Route>
-        </Switch>
-      </Router>
+      <Suspense>
+        <Router>
+          <Switch>
+            <Route path="/abuse">
+              <Abuse />
+            </Route>
+            <Route path="/about">
+              <About />
+            </Route>
+            <Route path="/privacy">
+              <Privacy />
+            </Route>
+            <Route path="/tos">
+              <ToS />
+            </Route>
+            <Route path="/tech">
+              <TechnicalInformation />
+            </Route>
+            <Route path="/:networkName">
+              <Home />
+            </Route>
+            <Route>
+              <Redirect />
+            </Route>
+          </Switch>
+        </Router>
+      </Suspense>
     </div>
   );
 };

web/src/screens/About.tsx

@@ -48,3 +48,5 @@ export const About: React.FC = () => {
     </TextSection>
   );
 };
+
+export default About;

web/src/screens/Abuse.tsx

@@ -29,3 +29,5 @@ export const Abuse: React.FC = observer(() => {
     </TextSection>
   );
 });
+
+export default Abuse;

web/src/screens/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { useParams } from 'wouter';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18not';
@@ -14,11 +14,12 @@ import { YourTileSection } from '../sections/YourTile/index.js';
 import { NoticeSection } from '../sections/Notice/index.js';
 import { NetworkSection } from '../sections/Network/index.js';
 import { TransfersSection } from '../sections/Transfers/index.js';
-import { ConnectSection } from '../sections/Connect/index.js';
 import { ChatSection } from '../sections/Chat/index.js';
 import { MobileTabs } from '../sections/MobileTabs/index.js';
 import { SettingsSection } from '../sections/Settings/index.js';
 
+const ConnectSection = React.lazy(() => import('../sections/Connect/index.js'));
+
 function itemToString(item: DataTransferItem): Promise<string> {
   return new Promise(resolve => {
     item.getAsString(resolve);
@@ -142,7 +143,9 @@ export const Home: React.FC = observer(() => {
               mobileHidden: tab !== 'connect',
             })}
           >
-            <ConnectSection />
+            <Suspense>
+              <ConnectSection />
+            </Suspense>
           </div>
           <div
             className={clsx('mobileFlex', {

web/src/screens/Privacy.tsx

@@ -44,3 +44,5 @@ export const Privacy: React.FC = () => {
     </TextSection>
   );
 };
+
+export default Privacy;

web/src/screens/TechnicalInformation.tsx

@@ -27,3 +27,5 @@ export const TechnicalInformation: React.FC = observer(() => {
     </TextSection>
   );
 });
+
+export default TechnicalInformation;

web/src/screens/ToS.tsx

@@ -106,3 +106,5 @@ export const ToS: React.FC = () => {
     </TextSection>
   );
 };
+
+export default ToS;

web/src/sections/Connect/index.tsx

@@ -56,3 +56,5 @@ export const ConnectSection: React.FC = observer(() => {
     </>
   );
 });
+
+export default ConnectSection;