Add some split points for routes

This commit is contained in:
SleepWalker 2019-12-30 10:15:40 +02:00
parent 5428e53a86
commit 03e26209f4
4 changed files with 113 additions and 57 deletions

View File

@ -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

View File

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

View File

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

View File

@ -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>
);