Codesplit at route level

src/OHIFStandaloneViewer.js

@@ -1,48 +1,58 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
-import PropTypes from 'prop-types';
+import PropTypes from 'prop-types'
-import { withRouter } from 'react-router';
+import asyncComponent from './components/AsyncComponent.js'
-import { Route, Switch } from 'react-router-dom';
+import { withRouter } from 'react-router'
-import { connect } from 'react-redux';
+import { Route, Switch } from 'react-router-dom'
-import { ViewerbaseDragDropContext } from 'react-viewerbase';
+import { connect } from 'react-redux'
-import ViewerRouting from './routes/ViewerRouting.js';
+import { ViewerbaseDragDropContext } from 'react-viewerbase'
-import StudyListRouting from './studylist/StudyListRouting.js'
-import StandaloneRouting from './routes/StandaloneRouting.js';
-import IHEInvokeImageDisplay from './routes/IHEInvokeImageDisplay.js';
-import CallbackPage from './CallbackPage.js';
 
-import './OHIFStandaloneViewer.css';
+import './OHIFStandaloneViewer.css'
-import './variables.css';
+import './variables.css'
-import './theme-tide.css';
+import './theme-tide.css'
 
-const reload = () => window.location.reload();
+// Dynamic Import Routes (CodeSplitting)
+const IHEInvokeImageDisplay = asyncComponent(() =>
+  import('./routes/IHEInvokeImageDisplay.js')
+)
+const ViewerRouting = asyncComponent(() => import('./routes/ViewerRouting.js'))
+const StudyListRouting = asyncComponent(() =>
+  import('./studylist/StudyListRouting.js')
+)
+const StandaloneRouting = asyncComponent(() =>
+  import('./routes/StandaloneRouting.js')
+)
+const CallbackPage = asyncComponent(() => import('./CallbackPage.js'))
+//
+
+const reload = () => window.location.reload()
 
 class OHIFStandaloneViewer extends Component {
   static propTypes = {
     history: PropTypes.object.isRequired,
-    user: PropTypes.object
+    user: PropTypes.object,
-  };
+  }
 
   componentDidMount() {
     this.unlisten = this.props.history.listen((location, action) => {
       if (this.props.setContext) {
-        this.props.setContext(window.location.pathname);
+        this.props.setContext(window.location.pathname)
       }
-    });
+    })
   }
 
   componentWillUnmount() {
-    this.unlisten();
+    this.unlisten()
   }
 
   render() {
-    const { user, userManager } = this.props;
+    const { user, userManager } = this.props
 
-    const userNotLoggedIn = userManager && (!user || user.expired);
+    const userNotLoggedIn = userManager && (!user || user.expired)
     if (userNotLoggedIn) {
-      const pathname = this.props.location.pathname;
+      const pathname = this.props.location.pathname
 
       if (pathname !== '/callback') {
-        sessionStorage.setItem('ohif-redirect-to', pathname);
+        sessionStorage.setItem('ohif-redirect-to', pathname)
       }
 
       return (
@@ -55,24 +65,20 @@ class OHIFStandaloneViewer extends Component {
           />
           <Route
             component={() => {
-              userManager.signinRedirect();
+              userManager.signinRedirect()
 
-              return null;
+              return null
             }}
           />
         </Switch>
-      );
+      )
     }
 
     return (
       <Switch>
         <Route exact path="/silent-refresh.html" onEnter={reload} />
         <Route exact path="/logout-redirect.html" onEnter={reload} />
-        <Route
+        <Route exact path="/studylist" component={StudyListRouting} />
-            exact
-            path="/studylist"
-            component={StudyListRouting}
-        />
         <Route exact path="/" component={StudyListRouting} />
         <Route exact path="/viewer" component={StandaloneRouting} />
         <Route path="/viewer/:studyInstanceUids" component={ViewerRouting} />
@@ -86,21 +92,21 @@ class OHIFStandaloneViewer extends Component {
         />
         <Route render={() => <div> Sorry, this page does not exist. </div>} />
       </Switch>
-    );
+    )
   }
 }
 
 const mapStateToProps = state => {
   return {
-    user: state.oidc.user
+    user: state.oidc.user,
-  };
+  }
-};
+}
 
 const ConnectedOHIFStandaloneViewer = connect(
   mapStateToProps,
   null
-)(OHIFStandaloneViewer);
+)(OHIFStandaloneViewer)
 
 export default ViewerbaseDragDropContext(
   withRouter(ConnectedOHIFStandaloneViewer)
-);
+)