如何在 React 中实现懒加载 | 代码拆分
这是一个简单的应用程序组件：
import Bids from './components/Pages/OnlineAuction/Auctions/Bids'
import { GeneralGoods } from './components/Pages/Galleries/GeneralGoods/GeneralGoods'
class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<div>
<Routes>
<Route path="/galleries-general-goods" element={<GeneralGoods />} />
</Routes>
</div>
</BrowserRouter>
</div>
);
}
}
export default App;
React 会在应用程序启动时立即导入所有组件。但这存在一个问题。
React 需要一些时间来加载所有组件，只有在所有组件导入完毕后，应用才能被访问。
因此，即使用户访问您的网站或应用时没有访问 8 个组件中的 7 个，这些组件仍然会被加载，这会影响应用的性能。
幸运的是，REACT 为我们提供了一个解决方案。
延迟加载：
我们可以选择何时加载所需的组件。因此，只有当访问相关路由时，React 应用才会导入组件。
以下是实现此目的的 5 个简单步骤：
1- 从 REACT 导入 Lazy 和 Suspense。
import {lazy, Suspense} from 'react'
2- 使用导入功能
const myComponent = () => import('./components/myComponent')
3. 将导入语句包裹在 lazy() 函数中
const myComponent = lazy (() =>
import('./components/myComponent'))
4. 将返回值包装在 Suspense() 函数中
function App() {
return (
<Suspense>
//ALL YOUR RETURN COMPONENTS HERE
</Suspense>
)
}
5. 为 Suspense() 指定回退方案
<Suspense fallback={<div><p>I am Loading</p></div>}
//ALL YOUR RETURN COMPONENTS HERE
</Suspense>
完整的组件应该类似于这样：
import {lazy, Suspense} from 'react'
import {Switch, Route} from 'react-router-dom'
const Bids = lazy(() => import('./components/Bids'))
const GeneralGoods = lazy(() => import('./components/GeneralGoods'))
function App() {
return (
<Suspense fallback={<div><p>I am Loading</p></div>} >
<Switch>
<Route path="/bids" exact>
<Bids />
</Route>
<Route path="/goods" exact>
<GeneralGoods />
</Route>
</Switch>
</Suspense>
)
}
如果您能看到这里，非常感谢。我也在领英上发布类似内容，网址是[ https://www.linkedin.com/in/eng-sedrick-nyanyiwa-39110aa6 ]
文章来源：https://dev.to/nanyiwast/how-to-implement-lazy-loading-in-react-code-splitting-1je6