React页面加载速度优化

用最直接方法，讲解如何用react-loadable优化页面加载速度慢的问题

事件背景，公司的项目刚刚接手过来。带我的老哥给的第一个任务就是优化一下页面的加载速度，每次打开一个页面速度都太慢了，我就开始着手弄上那么一弄。

这里主要用到了react-loadable

安装 npm i react-loadable --save

主要呢是采用按需加载路由，然后达到页面加速。

第一步：先写一个我们的高阶组件

//loadable.jsx
import React from 'react';
import Loadable from 'react-loadable';
 
import {Card} from 'antd';
// 按需加载组件
export default function withLoadable (comp) {
    return Loadable({
        loader:comp,
        loading:(props)=>{
            if (props.error) {
                return <Card style={{width:"100%",height:"100%"}} >
                    加载错误。请刷新
                </Card>;
            } else if (props.timedOut) {
                return <Card style={{width:"100%",height:"100%"}} >
                    加载超时。请刷新
                </Card>;
            } else if (props.pastDelay) {
                return <Card loading={true} style={{width:"100%",height:"100%"}} />;
            } else {
                return null;
            }
        },
        timeout:10000
    })
}

第二部：改造我们的路由

import React from 'react';
//引入我们第一步编写的高阶组件
import Loadable from '@/components/loadable/index';
import { Route, IndexRedirect } from 'react-router';

//import HomePage from '@/containers/homePage';
// 将我们之前的组件放在高阶组件里面包装一下然后再返回
const HomePage = Loadable(() => import('@/containers/homePage'));

export default (
    <div>
        <Route path="homePageOld" component={HomePage} />
    </div>
)

这样，你就会发现只有路由匹配的时候，组件才被import进来，达到了code splitting的效果，也就是我们常说的按需加载，代码分块，而不是一开始就将全部组件加载。 这样就OK了，对于我的项目这样就很舒服了。你们也可以尝试一下。

核心点 import()

不要把 import关键字和import()方法弄混了，该方法是为了进行动态加载才被引入的。

import关键字的引入是静态编译且存在提升的，这与我们按需加载是违背的，所以才有了import()，而react-loadable便是利用了import()来进行动态加载。