Add some split points for routes

packages/app/pages/profile/ProfilePage.tsx

@@ -7,17 +7,39 @@ import PasswordRequestForm from 'app/components/profile/passwordRequestForm/Pass
 import logger from 'app/services/logger';
 import { browserHistory } from 'app/services/history';
 import { FooterMenu } from 'app/components/footerMenu';
-import Profile from 'app/components/profile/Profile';
-import ChangePasswordPage from 'app/pages/profile/ChangePasswordPage';
-import ChangeUsernamePage from 'app/pages/profile/ChangeUsernamePage';
-import ChangeEmailPage from 'app/pages/profile/ChangeEmailPage';
-import MultiFactorAuthPage from 'app/pages/profile/MultiFactorAuthPage';
 import { FormModel } from 'app/components/ui/form';
 import { RootState } from 'app/reducers';
 import { Provider } from 'app/components/profile/Context';
+import { ComponentLoader } from 'app/components/ui/loader';
 
 import styles from './profile.scss';
 
+const Profile = React.lazy(() =>
+  import(
+    /* webpackChunkName: "page-profile-index" */ 'app/components/profile/Profile'
+  ),
+);
+const ChangePasswordPage = React.lazy(() =>
+  import(
+    /* webpackChunkName: "page-profile-change-password" */ 'app/pages/profile/ChangePasswordPage'
+  ),
+);
+const ChangeUsernamePage = React.lazy(() =>
+  import(
+    /* webpackChunkName: "page-profile-change-username" */ 'app/pages/profile/ChangeUsernamePage'
+  ),
+);
+const ChangeEmailPage = React.lazy(() =>
+  import(
+    /* webpackChunkName: "page-profile-change-email" */ 'app/pages/profile/ChangeEmailPage'
+  ),
+);
+const MultiFactorAuthPage = React.lazy(() =>
+  import(
+    /* webpackChunkName: "page-profile-mfa" */ 'app/pages/profile/MultiFactorAuthPage'
+  ),
+);
+
 interface Props {
   userId: number;
   onSubmit: (options: {
@@ -40,30 +62,36 @@ class ProfilePage extends React.Component<Props> {
             goToProfile: this.goToProfile,
           }}
         >
-          <Switch>
-            <Route
-              path="/profile/mfa/step:step([1-3])"
-              component={MultiFactorAuthPage}
-            />
-            <Route path="/profile/mfa" exact component={MultiFactorAuthPage} />
-            <Route
-              path="/profile/change-password"
-              exact
-              component={ChangePasswordPage}
-            />
-            <Route
-              path="/profile/change-username"
-              exact
-              component={ChangeUsernamePage}
-            />
-            <Route
-              path="/profile/change-email/:step?/:code?"
-              component={ChangeEmailPage}
-            />
-            <Route path="/profile" exact component={Profile} />
-            <Route path="/" exact component={Profile} />
-            <Redirect to="/404" />
-          </Switch>
+          <React.Suspense fallback={<ComponentLoader />}>
+            <Switch>
+              <Route
+                path="/profile/mfa/step:step([1-3])"
+                component={MultiFactorAuthPage}
+              />
+              <Route
+                path="/profile/mfa"
+                exact
+                component={MultiFactorAuthPage}
+              />
+              <Route
+                path="/profile/change-password"
+                exact
+                component={ChangePasswordPage}
+              />
+              <Route
+                path="/profile/change-username"
+                exact
+                component={ChangeUsernamePage}
+              />
+              <Route
+                path="/profile/change-email/:step?/:code?"
+                component={ChangeEmailPage}
+              />
+              <Route path="/profile" exact component={Profile} />
+              <Route path="/" exact component={Profile} />
+              <Redirect to="/404" />
+            </Switch>
+          </React.Suspense>
 
           <div className={styles.footer}>
             <FooterMenu />

packages/app/pages/root/RootPage.tsx

@@ -6,11 +6,6 @@ import { FormattedMessage as Message } from 'react-intl';
 import { Route, Link, Switch } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import clsx from 'clsx';
-import AuthPage from 'app/pages/auth/AuthPage';
-import ProfilePage from 'app/pages/profile/ProfilePage';
-import RulesPage from 'app/pages/rules/RulesPage';
-import DevPage from 'app/pages/dev/DevPage';
-import PageNotFound from 'app/pages/404/PageNotFound';
 import { ScrollIntoView } from 'app/components/ui/scroll';
 import PrivateRoute from 'app/containers/PrivateRoute';
 import AuthFlowRoute from 'app/containers/AuthFlowRoute';
@@ -21,10 +16,31 @@ import { getActiveAccount } from 'app/components/accounts/reducer';
 import { User } from 'app/components/user';
 import { Account } from 'app/components/accounts/reducer';
 import { RootState } from 'app/reducers';
+import { ComponentLoader } from 'app/components/ui/loader';
 
 import styles from './root.scss';
 import messages from './RootPage.intl.json';
 
+const ProfilePage = React.lazy(() =>
+  import(
+    /* webpackChunkName: "page-profile-all" */ 'app/pages/profile/ProfilePage'
+  ),
+);
+const PageNotFound = React.lazy(() =>
+  import(/* webpackChunkName: "page-not-found" */ 'app/pages/404/PageNotFound'),
+);
+const RulesPage = React.lazy(() =>
+  import(/* webpackChunkName: "page-rules" */ 'app/pages/rules/RulesPage'),
+);
+const DevPage = React.lazy(() =>
+  import(
+    /* webpackChunkName: "page-dev-applications" */ 'app/pages/dev/DevPage'
+  ),
+);
+const AuthPage = React.lazy(() =>
+  import(/* webpackChunkName: "page-auth" */ 'app/pages/auth/AuthPage'),
+);
+
 class RootPage extends React.PureComponent<{
   account: Account | null;
   user: User;
@@ -88,22 +104,24 @@ class RootPage extends React.PureComponent<{
             </div>
           </div>
           <div className={styles.body}>
-            <Switch>
-              <PrivateRoute path="/profile" component={ProfilePage} />
-              <Route path="/404" component={PageNotFound} />
-              <Route path="/rules" component={RulesPage} />
-              <Route path="/dev" component={DevPage} />
+            <React.Suspense fallback={<ComponentLoader />}>
+              <Switch>
+                <PrivateRoute path="/profile" component={ProfilePage} />
+                <Route path="/404" component={PageNotFound} />
+                <Route path="/rules" component={RulesPage} />
+                <Route path="/dev" component={DevPage} />
 
-              <AuthFlowRoute
-                exact
-                path="/"
-                key="indexPage"
-                component={user.isGuest ? AuthPage : ProfilePage}
-              />
-              <AuthFlowRoute path="/" component={AuthPage} />
+                <AuthFlowRoute
+                  exact
+                  path="/"
+                  key="indexPage"
+                  component={user.isGuest ? AuthPage : ProfilePage}
+                />
+                <AuthFlowRoute path="/" component={AuthPage} />
 
-              <Route component={PageNotFound} />
-            </Switch>
+                <Route component={PageNotFound} />
+              </Switch>
+            </React.Suspense>
           </div>
         </div>
         <PopupStack />