react项目 性能优化 首页优化 加载优化 Create-React-app项目首屏加载优化，二--CDN加速  参考https://www.cnblogs.com/njuclc/p/13359388.htmlWebpack nginx gzip实现前端加载优化 参考 https://www.cnblogs.com/njuclc/p/12883661.html

react路由懒加载（异步组件）------react-loadable(以路由组件分割代码) 或者参考 https://www.cnblogs.com/SRH151219/p/11207919.html

安装

cnpm install react-loadable -S

如果项目有100个页面，那laodable.js就需要写100遍，这样就感觉有点冗余了，所以这个我们可以封装一下

首先，我们建一个util src/util/loadable.js

import React from 'react';
import Loadable from 'react-loadable';
import { Spin } from 'antd';
//通用的过场组件
function loadingComponent() {
  return (
    <div style={{
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      textAlign: 'center',
      width: "100%",
      height: "1000px"
    }}> <Spin size="large" /></div >
  )
}

//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export default (loader, loading = loadingComponent) => {
  return Loadable({
    loader,
    loading
  });
}

不难看出，我们可以将按需加载的组件和过渡组件通过参数传入最后返回包装后的组件，

router里面调用方式改为如下

import React, { Fragment } from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import loadable from '../util/loadable'

const Home = loadable(()=>import('@pages/home'))

const Routes = () => (
    <BrowserRouter>
        <Route path="/home" component={Home}/>
    </BrowserRouter>
);

export default Routes

react-loadable是以组件级别来分割代码的，这意味着，我们不仅可以根据路由按需加载，还可以根据组件按需加载，使用方式和路由分割一样，只用修改组件的引入方式即可

React 16 加载性能优化指南

https://www.jianshu.com/p/d7c30b590f8a

https://www.cnblogs.com/njuclc/p/12883661.html