React 路由懒加载

// React.lazy方法可以异步加载组件文件。
import React, { Suspense, lazy } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { Spin } from 'antd'

// 通过 webpack 独立打包成 HomePage 文件
const HomePage = lazy(() => import(/* webpackChunkName: "HomePage" */ './pages/HomePage'))
const Login = lazy(() => import(/* webpackChunkName: "Login" */ './pages/Login'))
const FAQ = lazy(() => import(/* webpackChunkName: "FAQ" */ './pages/FAQ'))

function App() {
  return (
    <>
	  <Router>
        <Switch>
        	{/* React.lazy不能单独使用，需要配合React.suspense，suspence是用来包裹异步组件，添加loading效果等 */}
        	<Suspense
               fallback={
                 <div>
                   <Spin size="large"></Spin>
                 </div>
               }
            >
	           <Route path="/" exact component={HomePage}></Route>
	           <Route path="/login" component={Login} />
	           <Route path="/faq" component={FAQ} />
	        </Suspense>
        </Switch>
      </Router>
	</>
  )
}