Эффективно разделите маршруты большого приложения React - PullRequest
Новая
       6

Эффективно разделите маршруты большого приложения React

0 голосов
/ 09 апреля 2020

У меня довольно большое приложение React, которое использует множество маршрутов разных типов: для неаутентифицированных / publi c пользователей (PublicRoute), для аутентифицированных пользователей (PrivateRoute), для аутентифицированных пользователей, которые подтвердили свою электронную почту (VerifiedEmailRoute) ), затем PremiumRoute для премиум-пользователей, а затем обычный старый React Router Route для всех пользователей.

Однако, несмотря на то, что я загружаю импорт для компонентов, загрузка страницы идет медленно, а размер пакета довольно велик. Поэтому я хотел загрузить только те части приложения, которые должны быть загружены, в зависимости от состояния пользователя. Таким образом, я также смогу импортировать шрифты, которые нужны только аутентифицированным пользователям, вместо загрузки их в индекс. css. Есть ли способ структурировать и оптимизировать его?

PS: приложение было создано с использованием create-реагировать-приложение, и я не извлек, следовательно, нет веб-пакета.

В настоящее время мои маршруты следующие:

AppRoutes. js: 

const AppRoutes = ({ pageLoading }) => {
    return (
        <Router history={history}>
            <PersistGate persistor={persistor}>
                <div className='container'>
                    <Suspense fallback={<PageLoader />}>
                        <Snackbars />
                        <Switch>
                            <PublicRoute exact path='/' component={LandingPage} />
                            <Route path='/about' component={AboutPage} />
                            <PublicRoute path='/login' component={LoginPage} />
                            <PublicRoute path='/register' component={LoginPage} />
                            <PrivateRoute path='/verify-email' component={VerifyEmail} />
                            <VerifiedEmailRoute path='/home' component={(!pageLoading) ? HomePage : PageLoader } />
                            <VerifiedEmailRoute path='/page1' component={Page1} />
                            <VerifiedEmailRoute path='/page2' component={Page2} />
                            <VerifiedEmailRoute path='/page3' component={Page3} />
                            <VerifiedEmailRoute path='/page4' component={Page4} />
                            <VerifiedEmailRoute path='/page5' component={Page5} />
                            <PremiumRoute path='/premium-path1' component={PremComp1} />
                            <PremiumRoute path='/premium-path2' component={PremComp2} />
                            <PremiumRoute path='/premium-path3' component={PremComp3} />
                            <Route component={NotFound} />
                        </Switch>
                    </Suspense>
                </div>
            </PersistGate>
        </Router>
    )
};

PrivateRoute. js

const PrivateRoute = ({
    isAuthenticated,
    component: Component,
    ...rest
}) => {
    const location = useLocation();
    return (
        <Route {...rest} component={(props) => (
            !!isAuthenticated ? (
                <div><Component {...props} /></div>
            ) : (
                    <Redirect to={{
                        pathname: '/',
                        state: { prevPath: location.pathname } 
                    }} />
                )
        )} />
    );
};

PublicRoute . js

const PublicRoute = ({
    isAuthenticated,
    component: Component,
    ...rest
}) => {
    const location = useLocation();
    return (
        <Route {...rest} component={(props) => (
            !isAuthenticated ? (
                <Component {...props} />
            ) : (
                    <Redirect to={{
                        state: { prevPath: location.pathname },
                        pathname: '/home',
                    }} />
                )
        )} />
    );
}

VerifiedEmailRoute. js

const VerifiedEmailRoute = ({
    isEmailVerified,
    component: Component,
    ...rest
}) => {
    const location = useLocation();
    return (
        <PrivateRoute {...rest} component={(props) => (
            isEmailVerified ? (
                <Component {...props} />
            ) : (
                    <Redirect to={{ 
                        pathname: '/verify-email', 
                        state: { prevPath: location.pathname } 
                    }} />
            )
        )} />
    );
}

PremiumRoute. js

const PremiumRoute = ({
    subscriptionState,
    component: Component,
    ...rest
}) => {
    return (
        <VerifiedEmailRoute {...rest} component={(props) => (
            subscriptionState === 'Valid' ? (
                <Component {...props} />
            ) : (
                <Suspense fallback={<PageLoader />}>
                    <PremiumOnly />
                </Suspense>
            )
        )} />
    );
}
...