Découpage du code et extraction des sourcemaps

This commit is contained in:
wpetit 2020-10-13 11:37:37 +02:00
parent 85008d3265
commit f752865d33
12 changed files with 74 additions and 49 deletions

View File

@ -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 { 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 { useUserProfile } from '../gql/queries/profile';
import { LoggedInContext, getSavedLoggedIn, saveLoggedIn } from '../hooks/useLoggedIn'; import { LoggedInContext, getSavedLoggedIn, saveLoggedIn } from '../hooks/useLoggedIn';
import { PrivateRoute } from './PrivateRoute'; import { PrivateRoute } from './PrivateRoute';
@ -12,16 +7,21 @@ import { useKonamiCode } from '../hooks/useKonamiCode';
import { Modal } from './Modal'; import { Modal } from './Modal';
import { createClient } from '../util/apollo'; import { createClient } from '../util/apollo';
import { ApolloProvider } from '@apollo/client'; 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 interface AppProps {
} }
export const App: FunctionComponent<AppProps> = () => { export const App: FunctionComponent<AppProps> = () => {
const [ loggedIn, setLoggedIn ] = useState(getSavedLoggedIn()); const [ loggedIn, setLoggedIn ] = useState(getSavedLoggedIn());
@ -37,35 +37,37 @@ export const App: FunctionComponent<AppProps> = () => {
useKonamiCode(() => setShowBoneyM(true)); useKonamiCode(() => setShowBoneyM(true));
return ( 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>
); );
} }

View File

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

View File

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

View File

@ -13,3 +13,5 @@ export function DashboardPage() {
</Page> </Page>
); );
} }
export default DashboardPage;

View File

@ -160,3 +160,5 @@ export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageP
</Page> </Page>
); );
}; };
export default DecisionSupportFilePage;

View File

@ -19,3 +19,5 @@ export function HomePage() {
</Page> </Page>
); );
} }
export default HomePage;

View File

@ -13,3 +13,5 @@ export const LogoutPage: FunctionComponent<LogoutPageProps> = () => {
}, []); }, []);
return null; return null;
}; };
export default LogoutPage;

View File

@ -40,3 +40,5 @@ export function ProfilePage() {
</Page> </Page>
); );
} }
export default ProfilePage;

View File

@ -35,3 +35,5 @@ export const UnauthorizedPage:FunctionComponent<UnauthorizedPageProps> = () => {
</Page> </Page>
); );
} }
export default UnauthorizedPage;

View File

@ -151,3 +151,5 @@ export function WorkgroupPage() {
</Page> </Page>
); );
} }
export default WorkgroupPage;

View File

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

View File

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