React 代码拆分 - 在初始页面后加载其他组件

Question

我刚刚在我的应用程序中实现了基于路由器的代码分割（延迟加载）。AFAIK，当实现延迟加载时，访问页面的用户将仅加载整个包的某个块，而不会加载其他内容。

那么，有没有一种方法可以让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'))

Answer 1

我现在意识到我正在尝试做的事情叫做“预加载组件”。// component/home/App.js// Preloading Game.js from App.jsconst 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随时随地预加载组件，包括加载初始页面时（这解决了我的问题）。