Merge pull request #335 from topcoder-platform/TCA-505-reduce-js-bundle-size

TCA-505 reduce js bundle size

Author: brooketopcoder

README.md

@@ -272,6 +272,36 @@ These routes then need to be added to the routes file for the parent tools/utils
 Simply adding the routes to one of thes files above will register the tool/util
 with the application and will display the new component.
 
+### Lazy loading and code splitting
+
+When loading a route component, please use the `lazyLoad()` method defined in the application lib.
+
+| param | description|
+| ----- | ---------- |
+| `moduleImport: () => Promise<any>` | Function which imports the desired module |
+| `namedExport?: string` | The name of the exported module (if the module has named exports) |
+
+Eg:
+```
+// Lazy load the WelcomePage component
+const WelcomePage: LazyLoadedComponent = lazyLoad(() => import('./welcome'), 'WelcomePage')
+...
+// Use the component as route element
+export const learnRoutes: Array<PlatformRoute> = [
+    {
+        children: [
+            {
+                children: [],
+                element: <WelcomePage />,
+                ...
+            },
+            ...
+        ]
+    }
+]
+```
+
+
 ### Platform Route
 
 The PlatformRoute model has several useful options:

src-ts/lib/route-provider/index.ts

@@ -3,3 +3,4 @@ export * from './platform-route.model'
 export * from './route-context-data.model'
 export { default as routeContext } from './route.context'
 export * from './route.provider'
+export * from './router.utils'

src-ts/lib/route-provider/route.provider.tsx

@@ -4,13 +4,15 @@ import {
     ReactElement,
     ReactNode,
     SetStateAction,
+    Suspense,
     useContext,
     useEffect,
     useState,
 } from 'react'
 import { Location, Route, useLocation } from 'react-router-dom'
 
 import { authUrlLogin } from '../functions'
+import { LoadingSpinner } from '../loading-spinner'
 import { profileContext, ProfileContextData } from '../profile-provider'
 
 import { PlatformRoute } from './platform-route.model'
@@ -154,9 +156,11 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
     ])
 
     return (
-        <routeContext.Provider value={routeContextData}>
-            {props.children}
-        </routeContext.Provider>
+        <Suspense fallback={<LoadingSpinner />}>
+            <routeContext.Provider value={routeContextData}>
+                {props.children}
+            </routeContext.Provider>
+        </Suspense>
     )
 }
 

src-ts/lib/route-provider/router.utils.ts

@@ -0,0 +1,18 @@
+import { get } from 'lodash'
+import { ComponentType, lazy, LazyExoticComponent } from 'react'
+
+export type LazyLoadedComponent = LazyExoticComponent<ComponentType<any>>
+
+export type LazyLoadType = (
+    moduleImport: () => Promise<any>,
+    namedExport?: string
+) => LazyLoadedComponent
+
+/**
+ * Utility wrapper around react's `lazy` method,
+ * it allows importing default and named exports from modules using the same unique method
+ * (while react's `lazy` method only allows to import default exports)
+ */
+export const lazyLoad: LazyLoadType = (moduleImport: () => Promise<any>, namedExport: string = 'default') => (
+    lazy(() => moduleImport().then(m => ({default: get(m, namedExport)})))
+)

src-ts/tools/dev-center/DevCenter.tsx

@@ -6,7 +6,7 @@ import {
     RouteContextData,
 } from '../../lib'
 
-export const toolTitle: string = 'Dev Center'
+import { toolTitle } from './dev-center.routes'
 
 const DevCenter: FC<{}> = () => {
 

src-ts/tools/dev-center/dev-center-pages/community-app/getting-started/GettingStartedGuide.tsx

@@ -4,7 +4,7 @@ import { Breadcrumb, BreadcrumbItemModel, ContentLayout } from '../../../../../l
 import useMarkdown from '../../../dev-center-lib/hooks/useMarkdown'
 import MarkdownDoc from '../../../dev-center-lib/MarkdownDoc'
 import LayoutDocHeader from '../../../dev-center-lib/MarkdownDoc/LayoutDocHeader'
-import { toolTitle } from '../../../DevCenter'
+import { toolTitle } from '../../../dev-center.routes'
 
 import gettingStartedGuide from './GettingStartedGuide.md'
 import styles from './GettingStartedGuide.module.scss'

src-ts/tools/dev-center/dev-center.routes.tsx

@@ -1,8 +1,10 @@
-import { PlatformRoute } from '../../lib'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-import GettingStartedGuide from './dev-center-pages/community-app/getting-started/GettingStartedGuide'
-import DevCenterLandingPage from './dev-center-pages/community-app/landing-page/DevCenterLandingPage'
-import DevCenter, { toolTitle } from './DevCenter'
+const GettingStartedGuide: LazyLoadedComponent = lazyLoad(() => import('./dev-center-pages/community-app/getting-started/GettingStartedGuide'))
+const DevCenterLandingPage: LazyLoadedComponent = lazyLoad(() => import('./dev-center-pages/community-app/landing-page/DevCenterLandingPage'))
+const DevCenter: LazyLoadedComponent = lazyLoad(() => import('./DevCenter'))
+
+export const toolTitle: string = 'Dev Center'
 
 export const devCenterRoutes: Array<PlatformRoute> = [
     {

src-ts/tools/gamification-admin/gamification-admin.routes.tsx

@@ -1,9 +1,11 @@
-import { PlatformRoute, UserRole } from '../../lib'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute, UserRole } from '../../lib'
 
-import GamificationAdmin, { toolTitle } from './GamificationAdmin'
-import BadgeDetailPage from './pages/badge-detail/BadgeDetailPage'
-import BadgeListingPage from './pages/badge-listing/BadgeListingPage'
-import CreateBadgePage from './pages/create-badge/CreateBadgePage'
+import { toolTitle } from './GamificationAdmin'
+
+const GamificationAdmin: LazyLoadedComponent = lazyLoad(() => import('./GamificationAdmin'))
+const BadgeDetailPage: LazyLoadedComponent = lazyLoad(() => import('./pages/badge-detail/BadgeDetailPage'))
+const BadgeListingPage: LazyLoadedComponent = lazyLoad(() => import('./pages/badge-listing/BadgeListingPage'))
+const CreateBadgePage: LazyLoadedComponent = lazyLoad(() => import('./pages/create-badge/CreateBadgePage'))
 
 export const baseDetailPath: string = '/badge-detail'
 export const createBadgePath: string = '/create-badge'

src-ts/tools/learn/learn.routes.tsx

@@ -1,13 +1,16 @@
-import { authUrlLogin, PlatformRoute } from '../../lib'
+import { authUrlLogin, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-import { MyCertificate, UserCertificate } from './course-certificate'
-import { CourseCompletedPage } from './course-completed'
-import { CourseDetailsPage } from './course-details'
-import { FreeCodeCamp } from './free-code-camp'
-import { default as Learn, toolTitle } from './Learn'
+import { toolTitle } from './Learn'
 import { LearnConfig } from './learn-config'
-import { MyLearning } from './my-learning'
-import { WelcomePage } from './welcome'
+
+const WelcomePage: LazyLoadedComponent = lazyLoad(() => import('./welcome'), 'WelcomePage')
+const CourseDetailsPage: LazyLoadedComponent = lazyLoad(() => import('./course-details'), 'CourseDetailsPage')
+const CourseCompletedPage: LazyLoadedComponent = lazyLoad(() => import('./course-completed/'), 'CourseCompletedPage')
+const MyCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-certificate'), 'MyCertificate')
+const UserCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-certificate'), 'UserCertificate')
+const FreeCodeCamp: LazyLoadedComponent = lazyLoad(() => import('./free-code-camp'), 'FreeCodeCamp')
+const MyLearning: LazyLoadedComponent = lazyLoad(() => import('./my-learning'), 'MyLearning')
+const LandingLearn: LazyLoadedComponent = lazyLoad(() => import('./Learn'))
 
 export enum LEARN_PATHS {
     certificate = '/certificate',
@@ -112,7 +115,7 @@ export const learnRoutes: Array<PlatformRoute> = [
                 title: 'My Learning',
             },
         ],
-        element: <Learn />,
+        element: <LandingLearn />,
         memberOnly: true,
         route: rootRoute,
         title: toolTitle,

src-ts/tools/work/work.routes.tsx

@@ -1,28 +1,28 @@
 import { Navigate } from 'react-router-dom'
 
-import { contactSupportPath, PlatformRoute } from '../../lib'
+import { contactSupportPath, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-import { dashboardTitle, default as WorkComponent, toolTitle } from './Work'
+import { dashboardTitle, toolTitle } from './Work'
 import { Work, WorkIntakeFormRoutes, WorkStatus, WorkType } from './work-lib'
 import { WorkLoginPrompt } from './work-login-prompt'
-import { WorkNotLoggedIn } from './work-not-logged-in'
-import {
-    BugHuntIntakeForm,
-    IntakeForms,
-    intakeFormsTitle,
-    Review,
-} from './work-self-service'
-import SaveAfterLogin from './work-self-service/intake-forms/save-after-login/SaveAfterLogin'
-import { WorkTable } from './work-table'
-import { WorkThankYou } from './work-thank-you'
+import { intakeFormsTitle } from './work-self-service'
+
+const WorkComponent: LazyLoadedComponent = lazyLoad(() => import('./Work'))
+const WorkNotLoggedIn: LazyLoadedComponent = lazyLoad(() => import('./work-not-logged-in'), 'WorkNotLoggedIn')
+const BugHuntIntakeForm: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'BugHuntIntakeForm')
+const IntakeForms: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'IntakeForms')
+const Review: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'Review')
+const SaveAfterLogin: LazyLoadedComponent = lazyLoad(() => import('./work-self-service/intake-forms/save-after-login/SaveAfterLogin'))
+const WorkTable: LazyLoadedComponent = lazyLoad(() => import('./work-table'), 'WorkTable')
+const WorkThankYou: LazyLoadedComponent = lazyLoad(() => import('./work-thank-you'), 'WorkThankYou')
 
 export const rootRoute: string = '/work'
 export const selfServiceRootRoute: string = '/self-service'
 export const selfServiceStartRoute: string = `${selfServiceRootRoute}/wizard`
 export const dashboardRoute: string = `${rootRoute}/dashboard`
 
 export function workDashboardRoute(active: string): string {
-return `${dashboardRoute}/${active}`
+    return `${dashboardRoute}/${active}`
 }
 
 export function workDetailOrDraftRoute(selectedWork: Work): string {

src-ts/utils/contact-support/ContactSupport.tsx

@@ -9,7 +9,7 @@ import {
     formOnReset
 } from '../../lib'
 
-export const toolTitle: string = 'Contact Support'
+import { toolTitle } from './contact-support.routes'
 
 const ContactSupport: FC<{}> = () => {
 

src-ts/utils/contact-support/contact-support.routes.tsx

@@ -1,6 +1,8 @@
-import { contactSupportPath, PlatformRoute } from '../../lib'
+import { contactSupportPath, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-import { default as ContactSupport, toolTitle } from './ContactSupport'
+export const toolTitle: string = 'Contact Support'
+
+const ContactSupport: LazyLoadedComponent = lazyLoad(() => import('./ContactSupport'))
 
 export const contactSupportRoutes: Array<PlatformRoute> = [
     {

src-ts/utils/home/home.routes.tsx

@@ -1,6 +1,6 @@
-import { PlatformRoute } from '../../lib'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-import { default as Home } from './Home'
+const Home: LazyLoadedComponent = lazyLoad(() => import('./Home'))
 
 export const homeRoute: string = ''
 

src-ts/utils/settings/settings.routes.tsx

@@ -1,8 +1,8 @@
 import { ToolTitle } from '../../config'
-import { PlatformRoute } from '../../lib'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib'
 
-import { Account } from './account'
-import Settings from './Settings'
+const Account: LazyLoadedComponent = lazyLoad(() => import('./account'), 'Account')
+const Settings: LazyLoadedComponent = lazyLoad(() => import('./Settings'))
 
 export const settingsRoutes: Array<PlatformRoute> = [
     {

src/App.jsx

@@ -5,11 +5,14 @@ import "react-responsive-modal/styles.css";
 import { profileContext } from "../src-ts";
 
 import { UNDER_MAINTENANCE } from "./constants";
-import IntakeForm from "./IntakeForm";
-import WorkItem from "./routes/WorkItems";
 import { ScrollToTop } from "./ScrollToTop";
 import styles from "./styles/main.module.scss";
-import UnderMaintenance from "./routes/UnderMaintenance";
+import { lazyLoad, LoadingSpinner } from "../src-ts/lib";
+import { Suspense } from "react";
+
+const WorkItem = lazyLoad(() => import("./routes/WorkItems"));
+const IntakeForm = lazyLoad(() => import("./IntakeForm"));
+const UnderMaintenance = lazyLoad(() => import("./routes/UnderMaintenance"));
 
 
 const App = () => {
@@ -40,16 +43,18 @@ const App = () => {
   return (
     <div className={styles["topcoder-platform-ui"]}>
       <ScrollToTop path="/">
-        <Routes>
-          <Route
-            element={<IntakeForm />}
-            path="/self-service/*"
-          />
-          <Route
-            element={<WorkItem />}
-            path="/self-service/work-items/:workItemId"
-          />
-        </Routes>
+        <Suspense fallback={<LoadingSpinner />}>
+            <Routes>
+                <Route
+                    element={<IntakeForm />}
+                    path="/self-service/*"
+                />
+                <Route
+                    element={<WorkItem />}
+                    path="/self-service/work-items/:workItemId"
+                />
+            </Routes>
+        </Suspense>
       </ScrollToTop>
     </div >
   );