React优化—路由懒加载

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

目标：能够对路由进行懒加载实现代码分隔

1、在 App 组件中，导入 Suspense 组件

//导入lazy，
import { lazy，, Suspense } from 'react'

2、在 Router 内部，使用 Suspense 组件包裹组件内容

3、为 Suspense里的 组件提供 fallback 属性，指定 loading 占位内容

Suspense里的fallback回调函数的作用是，当组件没有加载出来的时候，展示这个div替代

import { lazy, Suspense } from 'react'
// 导入页面组件
const App = () => {
return (
<Router history={history}>
  <Suspense
    fallback={
    // 组件没有加载出来的适合显示的内容
      <div
        style={{
          textAlign: 'center',
          marginTop: 200
        }}
      >
        loading...
      </div>
    }
  >
    <div className="app">
      <Route exact path="/" render={() => <Redirect to="/home" />}></Route>
      <Route path="/login" component={Login}></Route>
      <AuthRoute path="/home" component={Layout}></AuthRoute>
    </div>
  </Suspense>
</Router>
 )
 }
export default App

4、用lazy方法导入组件实现路由懒加载

// 使用 lazy 导入组件
const Home = lazy(() => import('../Home'))
const Article = lazy(() => import('../Article'))
const Publish = lazy(() => import('../Publish'))