React实现路由懒加载( 移动端 )react-loadable

React实现路由懒加载

https://www.runoob.com/w3cnote/free-html5-css3-loaders-preloaders.html

花蝴蝶在我身边围绕围绕，码代码我唯妙唯肖，还没抓到那诀窍，把握如今

安装:yarn add react-loadable

Loadadle是个函数函数中传了个对象对象中有两个参数
1.须要渲染的组件用import异步的方式
2.loading当组件加载不了时运行loading

开始使用：

用以前到上方官网找到本身想要的懒加载的样式

而后在common文件夹下建立一个新文件夹起名为Loading

注意：Loading文件中的class名要与你刚才在官网上找到的样式的class名相符,样式粘贴复制就能够了而后引到组件中使用就好了

import React from 'react';
import "./style";//引入路由样式
export default class Loading extends React.Component{
        render(){
              return <div className="路由样式中的名字"></div>
        }      
}

找到index.js入口文件(引入全部组件的组件)( 使用异步把之前的组件覆盖掉 )