From dd8e22d13f3ff2112eb15865430a8921bc24207e Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sun, 29 Nov 2020 01:26:25 -0500
Subject: [PATCH] Added code-splitting with React.lazy
---
src/App.tsx | 56 +++++++++++++++++++++++++++--------------------------
1 file changed, 29 insertions(+), 27 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 40b3580..baba821 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,37 +1,39 @@
-import React from 'react';
+import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Layout from './components/Layout';
import './App.css';
-import index from './pages/index';
-import initiatives from './pages/initiatives';
-import involved from './pages/involved';
-import mission from './pages/mission';
-import news from './pages/news';
-import newsarticle from './pages/newsarticle';
-import notFound from './pages/404';
-import officers from './pages/officers';
-import committee from './pages/committee';
-import classcouncil from './pages/classcouncil';
+const index = React.lazy(() => import('./pages/index'));
+const initiatives = React.lazy(() => import('./pages/initiatives'));
+const involved = React.lazy(() => import('./pages/involved'));
+const mission = React.lazy(() => import('./pages/mission'));
+const news = React.lazy(() => import('./pages/news'));
+const newsarticle = React.lazy(() => import('./pages/newsarticle'));
+const notfound = React.lazy(() => import('./pages/404'));
+const officers = React.lazy(() => import('./pages/officers'));
+const committee = React.lazy(() => import('./pages/committee'));
+const classcouncil = React.lazy(() => import('./pages/classcouncil'));
export default function App() {
return (
- <BrowserRouter>
- <Layout>
- <Switch>
- <Route path='/initiatives' exact component={initiatives} />
- <Route path='/involved' exact component={involved} />
- <Route path='/news/:articleId' component={newsarticle} />
- <Route path='/news' exact component={news} />
- <Route path='/mission' exact component={mission} />
- <Route path='/officers' exact component={officers} />
- <Route path='/committee' exact component={committee} />
- <Route path='/class-council' exact component={classcouncil} />
- <Route path='/:path' component={notFound} />
- <Route path='/' exact component={index} />
- </Switch>
- </Layout>
- </BrowserRouter>
+ <Suspense fallback="Loading...">
+ <BrowserRouter>
+ <Layout>
+ <Switch>
+ <Route path='/initiatives' exact component={initiatives} />
+ <Route path='/involved' exact component={involved} />
+ <Route path='/news/:articleId' component={newsarticle} />
+ <Route path='/news' exact component={news} />
+ <Route path='/mission' exact component={mission} />
+ <Route path='/officers' exact component={officers} />
+ <Route path='/committee' exact component={committee} />
+ <Route path='/class-council' exact component={classcouncil} />
+ <Route path='/:path' component={notfound} />
+ <Route path='/' exact component={index} />
+ </Switch>
+ </Layout>
+ </BrowserRouter>
+ </Suspense>
);
}