Découpage du code et extraction des sourcemaps

client/src/components/App.tsx

@@ -1,10 +1,5 @@
-import React, { FunctionComponent, useState, useEffect } from 'react';
+import React, { FunctionComponent, useState, useEffect, Suspense } from 'react';
 import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
-import { HomePage } from './HomePage/HomePage';
-import { ProfilePage } from './ProfilePage/ProfilePage';
-import { WorkgroupPage } from './WorkgroupPage/WorkgroupPage';
-import { DecisionSupportFilePage } from './DecisionSupportFilePage/DecisionSupportFilePage';
-import { DashboardPage } from './DashboardPage/DashboardPage';
 import { useUserProfile } from '../gql/queries/profile';
 import { LoggedInContext, getSavedLoggedIn, saveLoggedIn } from '../hooks/useLoggedIn';
 import { PrivateRoute } from './PrivateRoute';
@@ -12,16 +7,21 @@ import { useKonamiCode } from '../hooks/useKonamiCode';
 import { Modal } from './Modal';
 import { createClient } from '../util/apollo';
 import { ApolloProvider } from '@apollo/client';
-import { LogoutPage } from './LogoutPage';
+import { AppLoader } from './AppLoader';
-import { UnauthorizedPage } from './UnauthorizedPage/UnauthorizedPage';
+
-import { ConferencePage } from './ConferencePage/ConferencePage';
+const LazyHomePage = React.lazy(() => import('./HomePage/HomePage'));
+const LazyDashboardPage = React.lazy(() => import('./DashboardPage/DashboardPage'));
+const LazyUnauthorizedPage = React.lazy(() => import('./UnauthorizedPage/UnauthorizedPage'));
+const LazyConferencePage = React.lazy(() => import('./ConferencePage/ConferencePage'));
+const LazyDecisionSupportFilePage = React.lazy(() => import('./DecisionSupportFilePage/DecisionSupportFilePage'));
+const LazyProfilePage = React.lazy(() => import('./ProfilePage/ProfilePage'));
+const LazyWorkgroupPage = React.lazy(() => import('./WorkgroupPage/WorkgroupPage'));
+const LazyLogoutPage = React.lazy(() => import('./LogoutPage'));
 
 export interface AppProps {
 
 }
 
-
-
 export const App: FunctionComponent<AppProps> = () => {
   const [ loggedIn, setLoggedIn ] = useState(getSavedLoggedIn());
 
@@ -37,35 +37,37 @@ export const App: FunctionComponent<AppProps> = () => {
   useKonamiCode(() => setShowBoneyM(true));
 
   return (
-    <ApolloProvider client={client}>
+    <Suspense fallback={<AppLoader />}>
-      <LoggedInContext.Provider value={loggedIn}>
+      <ApolloProvider client={client}>
-        <UserSessionCheck setLoggedIn={setLoggedIn} />
+        <LoggedInContext.Provider value={loggedIn}>
-        <BrowserRouter>
+          <UserSessionCheck setLoggedIn={setLoggedIn} />
-          <Switch>
+          <BrowserRouter>
-            <Route path="/" exact component={HomePage} />
+            <Switch>
-            <Route path="/unauthorized" exact component={UnauthorizedPage} />
+              <Route path="/" exact component={LazyHomePage} />
-            <PrivateRoute path="/profile" exact component={ProfilePage} />
+              <Route path="/unauthorized" exact component={LazyUnauthorizedPage} />
-            <PrivateRoute path="/conference" exact component={ConferencePage} />
+              <PrivateRoute path="/profile" exact component={LazyProfilePage} />
-            <PrivateRoute path="/workgroups/:id" exact component={WorkgroupPage} />
+              <PrivateRoute path="/conference" exact component={LazyConferencePage} />
-            <PrivateRoute path="/decisions/:id" component={DecisionSupportFilePage} />
+              <PrivateRoute path="/workgroups/:id" exact component={LazyWorkgroupPage} />
-            <PrivateRoute path="/dashboard" exact component={DashboardPage} />
+              <PrivateRoute path="/decisions/:id" component={LazyDecisionSupportFilePage} />
-            <PrivateRoute path="/logout" exact component={LogoutPage} />
+              <PrivateRoute path="/dashboard" exact component={LazyDashboardPage} />
-            <Route component={() => <Redirect to="/" />} />
+              <PrivateRoute path="/logout" exact component={LazyLogoutPage} />
-          </Switch>
+              <Route component={() => <Redirect to="/" />} />
-        </BrowserRouter>
+            </Switch>
-        {
+          </BrowserRouter>
-          showBoneyM ?
+          {
-          <Modal active={true} showCloseButton={true} onClose={() => setShowBoneyM(false)}>
+            showBoneyM ?
-            <iframe width={560} height={315}
+            <Modal active={true} showCloseButton={true} onClose={() => setShowBoneyM(false)}>
-              frameBorder={0}
+              <iframe width={560} height={315}
-              allowFullScreen={true}
+                frameBorder={0}
-              src="https://www.youtube.com/embed/uVzT5QEEQ2c?autoplay=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
+                allowFullScreen={true}
-            </iframe>
+                src="https://www.youtube.com/embed/uVzT5QEEQ2c?autoplay=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
-          </Modal> :
+              </iframe>
-          null
+            </Modal> :
-        }
+            null
-      </LoggedInContext.Provider>
+          }
-    </ApolloProvider>
+        </LoggedInContext.Provider>
+      </ApolloProvider>
+    </Suspense>
   );
 }
 

client/src/components/AppLoader.tsx

@@ -0,0 +1,7 @@
+import React, { FunctionComponent } from "react";
+
+export const AppLoader:FunctionComponent = () => {
+  return (
+    <div className="loader"></div>
+  )
+}

client/src/components/ConferencePage/ConferencePage.tsx

@@ -110,6 +110,8 @@ export const ConferencePage:FunctionComponent<ConferencePageProps> = () => {
   );
 }
 
+export default ConferencePage;
+
 export interface UserCardProps {
   nickname: string
   email: string

client/src/components/DashboardPage/DashboardPage.tsx

@@ -12,4 +12,6 @@ export function DashboardPage() {
       </div>
     </Page>
   );
-}
+}
+
+export default DashboardPage;

client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx

@@ -159,4 +159,6 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
       </div>
     </Page>
   );
-};
+};
+
+export default DecisionSupportFilePage;

client/src/components/HomePage/HomePage.tsx

@@ -18,4 +18,6 @@ export function HomePage() {
       <WelcomeContent />
     </Page>
   );
-}
+}
+
+export default HomePage;

client/src/components/LogoutPage.tsx

@@ -12,4 +12,6 @@ export const LogoutPage: FunctionComponent<LogoutPageProps> = () => {
     window.location.replace(Config.logoutURL);
   }, []);
   return null;
-};
+};
+
+export default LogoutPage;

client/src/components/ProfilePage/ProfilePage.tsx

@@ -39,4 +39,6 @@ export function ProfilePage() {
       </div>
     </Page>
   );
-}
+}
+
+export default ProfilePage;

client/src/components/UnauthorizedPage/UnauthorizedPage.tsx

@@ -34,4 +34,6 @@ export const UnauthorizedPage:FunctionComponent<UnauthorizedPageProps> = () => {
       </div>
     </Page>
   );
-}
+}
+
+export default UnauthorizedPage;

client/src/components/WorkgroupPage/WorkgroupPage.tsx

@@ -150,4 +150,6 @@ export function WorkgroupPage() {
       </div>
     </Page>
   );
-}
+}
+
+export default WorkgroupPage;

client/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "es6",
+    "module": "es2020",
     "lib": ["dom", "es6"],
     "moduleResolution": "node",
     "jsx": "react",

client/webpack.config.js

@@ -11,7 +11,7 @@ const env = process.env;
 module.exports = {
   mode: `${env.NODE_ENV ? env.NODE_ENV : 'production'}`,
   entry: './src/index.tsx',
-  devtool: 'inline-source-map',
+  devtool: env.NODE_ENV ===  'production' ? 'source-map' : 'eval-source-map',
   output: {
     filename: '[name].[contenthash].js',
     path: path.join(__dirname, 'dist')