为什么要使用路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

react中怎么使用路由懒加载

通过 React.lzay() 实现组件的动态加载
import() 拆包
优化性能不需要一次加载全部的js文件

栗子：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 
import React, { Suspense, lazy } from 'react'; 

const Home = lazy(() => import('./routes/Home')); 
const Login = lazy(() => import('./routes/Login'));  

const App = () => (  
<Router>    
    <Suspense fallback={<div>Loading...</div>}>      
        <Switch>       
            <Route exact path="/" component={Home}/>        
            <Route path="/login" component={Login}/>      
        </Switch>    
    </Suspense>  
</Router> 
)

路由懒加载原理

懒加载的原理其实就是两步：

将需要进行懒加载的子模块打包成独立的文件（children chunk）
借助函数来实现延迟执行子模块的加载代码

打包成独立文件

因为懒加载是对子模块（子组件）进行延后加载。如果子模块（子组件）不单独打包，而是和别的模块合并在一起，那么当其他模块加载时就会将整个文件加载。那么如此就达不到懒加载的效果。

因此，第一步就是将懒加载的子模块（子组件）分离出来实现这一步主要就是es6中import()发挥的作用，例子就不赘述了

延迟加载

只要将需要进行懒加载的子模块文件（children chunk）的引入语句（即import()）放到一个函数内部。然后在需要加载的时候再执行该函数（比如点击登录加载登录相关文件，点击首页加载首页相关模块）。这样就可以实现懒加载（按需加载）。

关于suspense

suspense主要就是服务于打包优化的代码拆分。lazy和suspense配合使用比如上栗中的片段

const A = React.lazy(() => import('./A')) 
return (
<Suspense fallback={<p>loading</p>}> 
    <Route component={A} path="/a"> 
</Suspense> 
)

这样在打包代码时，可以显著减少主包的体积，加快加载速度，从而提升用户体验；而当路由切换时，加载新的组件代码，代码加载是异步的过程，此时suspense就会进如fallback，那我们看到的就是loading，显式的告诉用户正在加载，当代码加载完成就会展示A组件的内容，整个loading状态不用开发者去控制

react的路由懒加载