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入口文件(引入全部組件的組件)( 使用異步把之前的組件覆蓋掉 )