diff --git a/src/hoc/asyncComponent/asyncComponent.tsx b/src/hoc/asyncComponent/asyncComponent.tsx
new file mode 100644
index 0000000..3714bc6
--- /dev/null
+++ b/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 ? : null
+ }
+ }
+}
+
+export default asyncComponent
\ No newline at end of file
diff --git a/src/routes/HomeRouter.tsx b/src/routes/HomeRouter.tsx
index 7d581ff..c9b24fb 100644
--- a/src/routes/HomeRouter.tsx
+++ b/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 StreamComponent from 'containers/stream'
-import Profile from 'containers/profile'
-import PostPage from 'containers/postPage'
-import People from 'containers/people'
-
+import asyncComponent from 'hoc/asyncComponent/asyncComponent'
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 {
render () {
const { enabled, match, data, translate } = this.props
- const St = StreamComponent as any
+ const St = AsyncStream as any
return (
enabled ? (
- } />
+ } />
)} />
-
-
+
+
{
+ 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 {
return (
enabled ? (
-
-
-
-
- } />
- } />
+
+
+
+
+ } />
+ } />
)
: ''