Add some split points for routes

packages/app/components/ui/loader/ComponentLoader.tsx

@@ -4,6 +4,8 @@ import { Skin } from 'app/components/ui';
 
 import styles from './componentLoader.scss';
 
+// TODO: add mode to not show loader until first ~150ms
+
 function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) {
   return (
     <div

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,12 +62,17 @@ class ProfilePage extends React.Component<Props> {
             goToProfile: this.goToProfile,
           }}
         >
+          <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/mfa"
+                exact
+                component={MultiFactorAuthPage}
+              />
               <Route
                 path="/profile/change-password"
                 exact
@@ -64,6 +91,7 @@ class ProfilePage extends React.Component<Props> {
               <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,6 +104,7 @@ class RootPage extends React.PureComponent<{
             </div>
           </div>
           <div className={styles.body}>
+            <React.Suspense fallback={<ComponentLoader />}>
               <Switch>
                 <PrivateRoute path="/profile" component={ProfilePage} />
                 <Route path="/404" component={PageNotFound} />
@@ -104,6 +121,7 @@ class RootPage extends React.PureComponent<{
 
                 <Route component={PageNotFound} />
               </Switch>
+            </React.Suspense>
           </div>
         </div>
         <PopupStack />

packages/app/shell/App.tsx

@@ -4,12 +4,19 @@ import { Route, Switch } from 'react-router-dom';
 import { Store } from 'app/reducers';
 import AuthFlowRoute from 'app/containers/AuthFlowRoute';
 import RootPage from 'app/pages/root/RootPage';
-import SuccessOauthPage from 'app/pages/auth/SuccessOauthPage';
+import { ComponentLoader } from 'app/components/ui/loader';
 
 import ContextProvider from './ContextProvider';
 
+const SuccessOauthPage = React.lazy(() =>
+  import(
+    /* webpackChunkName: "page-oauth-success" */ 'app/pages/auth/SuccessOauthPage'
+  ),
+);
+
 const App = ({ store, history }: { store: Store; history: any }) => (
   <ContextProvider store={store} history={history}>
+    <React.Suspense fallback={<ComponentLoader />}>
       <Switch>
         <Route path="/oauth2/code/success" component={SuccessOauthPage} />
         <AuthFlowRoute
@@ -18,6 +25,7 @@ const App = ({ store, history }: { store: Store; history: any }) => (
         />
         <Route path="/" component={RootPage} />
       </Switch>
+    </React.Suspense>
   </ContextProvider>
 );