[New Feature] Support lazy loading for async components

src/hoc/asyncComponent/asyncComponent.tsx

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+
+const asyncComponent = (importComponent: any) => {
+    return class extends Component {
+        state = {
+            component: null
+        }
+
+        componentDidMount () {
+            importComponent()
+                .then((cmp: any) => {
+                    this.setState({component: cmp.default})
+                })
+        }
+        
+        render () {
+            const C: any = this.state.component
+
+            return C ? <C {...this.props} /> : null
+        }
+    }
+}
+
+export default asyncComponent

src/routes/HomeRouter.tsx

@@ -6,31 +6,43 @@ import { connect } from 'react-redux'
 import { Route, Switch, withRouter, Redirect, NavLink } from 'react-router-dom'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 
-// - Import app components
+import asyncComponent from 'hoc/asyncComponent/asyncComponent'
-import StreamComponent from 'containers/stream'
-import Profile from 'containers/profile'
-import PostPage from 'containers/postPage'
-import People from 'containers/people'
-
 import { IRouterProps } from './IRouterProps'
 
+// - Async Components
+const AsyncStream = asyncComponent(() => {
+  return import('containers/stream')
+})
+
+const AsyncProfile = asyncComponent(() => {
+  return import('containers/profile')
+})
+
+const AsyncPostPage = asyncComponent(() => {
+  return import('containers/postPage')
+})
+
+const AsyncPeople = asyncComponent(() => {
+  return import('containers/people')
+})
+
 /**
  * Home Router
  */
 export class HomeRouter extends Component<IRouterProps, any> {
   render () {
     const { enabled, match, data, translate } = this.props
-    const St = StreamComponent as any
+    const St = AsyncStream as any
     return (
           enabled ? (
           <Switch>
-            <PrivateRoute path='/people/:tab?' component={<People />} />
+            <PrivateRoute path='/people/:tab?' component={<AsyncPeople />} />
 
             <PrivateRoute path='/tag/:tag' component={(
             <div><St displayWriting={false} homeTitle={`#${match.params.tag}`} posts={data.mergedPosts} /></div>
             )} />
-            <Route path='/:userId/posts/:postId/:tag?' component={PostPage} />
+            <Route path='/:userId/posts/:postId/:tag?' component={AsyncPostPage} />
-            <Route path='/:userId' component={Profile} />
+            <Route path='/:userId' component={AsyncProfile} />
             <PrivateRoute path='/' component={(
             <div>
             <St

src/routes/MasterRouter.tsx

@@ -6,16 +6,34 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Route, Switch, withRouter, Redirect, NavLink } from 'react-router-dom'
 
-// - Import app components
+import asyncComponent from 'hoc/asyncComponent/asyncComponent'
-import Home from 'containers/home'
-import Signup from 'containers/signup'
-import EmailVerification from 'containers/emailVerification'
-import Login from 'containers/login'
-import ResetPassword from 'containers/resetPassword'
-import Setting from 'containers/setting'
-
 import { IRouterProps } from './IRouterProps'
 
+// - Async Components
+const AsyncHome: any = asyncComponent(() => {
+  return import('containers/home')
+})
+
+const AsyncSignup = asyncComponent(() => {
+  return import('containers/signup')
+})
+
+const AsyncEmailVerification = asyncComponent(() => {
+  return import('containers/emailVerification')
+})
+
+const AsyncResetPassword = asyncComponent(() => {
+  return import('containers/resetPassword')
+})
+
+const AsyncLogin = asyncComponent(() => {
+  return import('containers/login')
+})
+
+const AsyncSetting = asyncComponent(() => {
+  return import('containers/setting')
+})
+
 /**
  * Master router
  */
@@ -25,12 +43,12 @@ export class MasterRouter extends Component<IRouterProps, any> {
     return (
         enabled ? (
         <Switch>
-          <Route path='/signup' component={Signup} />
+          <Route path='/signup' component={AsyncSignup} />
-          <Route path='/emailVerification' component={EmailVerification} />
+          <Route path='/emailVerification' component={AsyncEmailVerification} />
-          <Route path='/settings' component={Setting} />
+          <Route path='/settings' component={AsyncSetting} />
-          <Route path='/resetPassword' component={ResetPassword} />
+          <Route path='/resetPassword' component={AsyncResetPassword} />
-          <PublicRoute path='/login' component={<Login />} />
+          <PublicRoute path='/login' component={<AsyncLogin />} />
-          <Route render={() => <Home uid={data.uid} />} />
+          <Route render={() => <AsyncHome uid={data.uid} />} />
         </Switch>)
           : ''