Javascript 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'））
常量规则=React.lazy（（）=>导入（'./组件/规则/规则'））
const NotFound=React.lazy（（）=>import（'./components/404/404'））

多亏了他的启发，我现在意识到我要做的就是“预加载组件”

//组件/home/App.js
//从App.js预加载Game.js
常量lazyWithPreload=（工厂）=>{
常量组件=React.lazy（工厂）
Component.preload=出厂
返回组件
}
const Game=lazyWithPreload（（）=>import（'../Game/Game'））
常量应用=（）=>{
React.useffect（（）=>{
Game.preload（）
}, [])
返回（酷的东西）
}

lazyWithPreload

在我想的任何时候和任何地方预加载组件，包括加载初始页面时（这解决了我的问题）

来源：

也许这个答案能帮助你：