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,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 />

packages/app/shell/App.tsx

@@ -4,20 +4,28 @@ 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}>
-    <Switch>
-      <Route path="/oauth2/code/success" component={SuccessOauthPage} />
-      <AuthFlowRoute
-        path="/oauth2/:version(v\d+)/:clientId?"
-        component={() => null}
-      />
-      <Route path="/" component={RootPage} />
-    </Switch>
+    <React.Suspense fallback={<ComponentLoader />}>
+      <Switch>
+        <Route path="/oauth2/code/success" component={SuccessOauthPage} />
+        <AuthFlowRoute
+          path="/oauth2/:version(v\d+)/:clientId?"
+          component={() => null}
+        />
+        <Route path="/" component={RootPage} />
+      </Switch>
+    </React.Suspense>
   </ContextProvider>
 );