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

 

转载于:https://www.cnblogs.com/changyaoself/p/10326267.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值