react 首屏性能优化
2024-08-31 09:12:02
首屏优化点: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={} placeholder={<Diag/>} debounce={}> //懒加载图片,当页面滚动此位置时,加载Imgshow组件 <Imgshow src={item}/> </LazyLoad> </li>)} </ul> </div> ) } } export default B;
滚动前:
滚动后:
多了一个4.chunk.js,页面滚动到此组件位置,采取加载此组件,减小了bundle 的文件大小,配合懒加载使用
react-lazyload : https://www.npmjs.com/package/react-lazyload
最新文章
- Scala 中下划线的用途
- Docker的学习--命令使用详解
- Leetcode 95. Unique Binary Search Tree II
- backtracking(回溯算法)
- Mysql 中有关日期的函数(sql)
- 怎样学法学?——民法学泰斗王利明教授的演讲 z
- Android 设置ListView不可滚动 及在ScrollView中不可滚动的设置
- bootstrapUI
- php获取二维数组中某一列的值集合
- 51nod 1204 Parity(并查集应用)
- 一文读懂ES6(附PY3对比)
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
- 通过Nginx使全站页面变灰
- 莫烦theano学习自修第四天【激励函数】
- Codeforces Edu Round 63(Rated for Div. 2)
- Deeplearning 两层cnn卷积网络详解
- python flask大型项目目录
- Unity 3D中 Ulua-UGUI简单的Demo——热更新的具体流程、使用说明
- C#学习笔记(基础知识回顾)之枚举
- erlang调优方法
热门文章
- 设置普通用户输入sudo,免密进入root账户
- Storm VS Flink ——性能对比
- Windows服务器远程桌面不能复制粘贴的解决方法
- Django与mongodb数据库的连接
- Android的消息循环与Handler机制理解
- .Net基础篇_学习笔记_第四天_关系运算符和逻辑运算符
- Winform中通过代码给PanelControl添加子控件并进行定位
- Winform中实现读取xml配置文件并动态配置ZedGraph的RadioGroup的选项
- SpringBoot 2.0 + Nacos + Sentinel 流控规则集中存储
- Single Number 普通解及最小空间解(理解异或)