Added code-splitting with React.lazy

This commit is contained in:
Michael Fatemi 2020-11-29 01:26:25 -05:00
parent 81e4d0ef99
commit dd8e22d13f

View File

@ -1,37 +1,39 @@
import React from 'react'; import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'; import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Layout from './components/Layout'; import Layout from './components/Layout';
import './App.css'; import './App.css';
import index from './pages/index'; const index = React.lazy(() => import('./pages/index'));
import initiatives from './pages/initiatives'; const initiatives = React.lazy(() => import('./pages/initiatives'));
import involved from './pages/involved'; const involved = React.lazy(() => import('./pages/involved'));
import mission from './pages/mission'; const mission = React.lazy(() => import('./pages/mission'));
import news from './pages/news'; const news = React.lazy(() => import('./pages/news'));
import newsarticle from './pages/newsarticle'; const newsarticle = React.lazy(() => import('./pages/newsarticle'));
import notFound from './pages/404'; const notfound = React.lazy(() => import('./pages/404'));
import officers from './pages/officers'; const officers = React.lazy(() => import('./pages/officers'));
import committee from './pages/committee'; const committee = React.lazy(() => import('./pages/committee'));
import classcouncil from './pages/classcouncil'; const classcouncil = React.lazy(() => import('./pages/classcouncil'));
export default function App() { export default function App() {
return ( return (
<BrowserRouter> <Suspense fallback="Loading...">
<Layout> <BrowserRouter>
<Switch> <Layout>
<Route path='/initiatives' exact component={initiatives} /> <Switch>
<Route path='/involved' exact component={involved} /> <Route path='/initiatives' exact component={initiatives} />
<Route path='/news/:articleId' component={newsarticle} /> <Route path='/involved' exact component={involved} />
<Route path='/news' exact component={news} /> <Route path='/news/:articleId' component={newsarticle} />
<Route path='/mission' exact component={mission} /> <Route path='/news' exact component={news} />
<Route path='/officers' exact component={officers} /> <Route path='/mission' exact component={mission} />
<Route path='/committee' exact component={committee} /> <Route path='/officers' exact component={officers} />
<Route path='/class-council' exact component={classcouncil} /> <Route path='/committee' exact component={committee} />
<Route path='/:path' component={notFound} /> <Route path='/class-council' exact component={classcouncil} />
<Route path='/' exact component={index} /> <Route path='/:path' component={notfound} />
</Switch> <Route path='/' exact component={index} />
</Layout> </Switch>
</BrowserRouter> </Layout>
</BrowserRouter>
</Suspense>
); );
} }