如何在REACT中实现懒人加载--代码拆分

这里是一个简单的App组件：

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需要一些时间来加载所有的组件，而且只有在所有的组件都被导入后，App才能被访问。
因此，如果你的网站或App的用户没有访问8个组件中的7个，它们仍然会被加载，这对你的App的性能会有影响。

幸运的是，REACT为我们提供了一个解决方案。

懒惰加载
我们可以选择何时加载所需的组件。因此，只有在访问相关路由时，REACT App才会导入组件。

下面是实现这一目的的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>
   )

}