Разделение кода React — загрузка другого компонента после начальной страницы

Я только что реализовал разделение кода на основе маршрутизатора (ленивую загрузку) в своем приложении. Насколько я знаю, когда реализована ленивая загрузка, пользователь, посещающий страницу, будет загружать только определенный фрагмент всего пакета и ничего больше.

Итак, есть ли способ, с помощью которого мы можем указать React начать загрузку другого компонента после загрузки начальной страницы, чтобы пользователю не приходилось ждать перехода на другую страницу?

const App = React.lazy(() => import('./components/home/App'))
const Game = React.lazy(() => import('./components/game/Game'))
const Custom = React.lazy(() => import('./components/custom/Custom'))
const Credits = React.lazy(() => import('./components/credits/Credits'))
const Rules = React.lazy(() => import('./components/rules/Rules'))
const NotFound = React.lazy(() => import('./components/404/404'))

reactjs javascript optimization lazy-loading code-splitting
person SnekNOTSnake    schedule 21.11.2020    source источник
comment
возможно, этот ответ поможет вам: stackoverflow.com /вопросы/58687397/   -  person Yash Joshi    schedule 21.11.2020

Ответы (1)


arrow_upward
0
arrow_downward

Благодаря просвещению Яша Джоши я теперь понимаю, что то, что я пытаюсь сделать, называется предварительной загрузкой компонента.

// component/home/App.js
// Preloading Game.js from App.js
const lazyWithPreload = (factory) => {
    const Component = React.lazy(factory)
    Component.preload = factory
    return Component
}
 
const Game = lazyWithPreload(() => import('../game/Game'))
 
const App = () => {
    React.useEffect(() => {
        Game.preload()
    }, [])
    return (<div>Something cool</div>)
}

lazyWithPreload предварительно загружает компонент в любое время и в любом месте, в том числе при загрузке начальной страницы (что решает мою проблему).

Источник: https://medium.com/hackernoon/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d

person SnekNOTSnake    schedule 21.11.2020