react 首屏性能優化

首屏優化點：1.加載包（bundle.js）文件的大小，越小，首屏渲染速度越快 (按需加載)

　　　　　　2.優先渲染用戶直觀看到的頁面部分（懶加載）

 

技術點：react-loadable 、 react-lazyload

 

import React,{Component} from "react"
import {Link} from "react-router-dom" import LazyLoad from 'react-lazyload'; //懶加載依賴 import Diag from "../component/diag" //懶加載佔位組件 import Loadable from 'react-loadable'; //按需加載依賴
import "../static/css/page2.scss"

const Loading = () => <div>Loading...</div>;

const Imgshow = Loadable({ //按需加載模塊配置 loader: () => import("../component/imgshow"), loading:Loading, }); class B extends Component{
    state={
        pics:[
            require("../static/imgs/link.jpg"),
            require("../static/imgs/link1.jpg"),
            require("../static/imgs/link2.jpg"),
            require("../static/imgs/link3.jpg"),
            require("../static/imgs/link4.jpg"),
            require("../static/imgs/link5.jpg"),
            require("../static/imgs/link6.jpg"),
            require("../static/imgs/link7.jpg"),
            require("../static/imgs/link8.jpg"),
        ]
    };
    render(){
        return (
            <div>
                <ul className="lazyLi">
                    <li style={{height:"600px"}}></li>
                    {this.state.pics.map((item,index)=><li  key={index}>
                        <LazyLoad  height={200} placeholder={<Diag/>} debounce={200}>   //懶加載圖片，當頁面滾動此位置時，加載Imgshow組件
                            <Imgshow src={item}/>
                        </LazyLoad>
                    </li>)}
                </ul>
            </div>
        )
    }
}
export default B;

滾動前：

滾動後：

 多了一個4.chunk.js,頁面滾動到此組件位置，採起加載此組件，減少了bundle 的文件大小，配合懶加載使用

 

react-lazyload : https://www.npmjs.com/package/react-lazyload