date
Jul 20, 2024 07:58 AM
type
status
slug
summary
tags
category
updated
Aug 27, 2024 03:21 AM
icon
password
前言
在日常的React项目开发中,这些错误会让你的项目变慢。实际上如果你熟悉Vue项目的开发话,这些道理是相同的。这边文章分析的是路由懒加载和图片懒加载。
路由懒加载
- 通过
React.lzay()
实现组件的动态加载
import()
拆包
- 优化性能不需要一次加载全部的js文件
例子:
变成
在打包的时候也会根据懒加载而将文件进行分割。减小了首页JS文件的大小。
在组件中,对于子组件来说,也是通过
lazy
导入模块配合Suspense
来使用这样不仅会在加载的时候不干扰其他的组件加载,同时还能显示骨架屏。
图片懒加载
为什么要做图片懒加载呢,因为图片资源很多的话,会一直在请求下载,会对网站造成卡顿。所以我们应该暂时不加载那些看不见的图片。
这里用的JS自带的
IntersectionObserver
函数,具体可以去MDN上看他的说明。这里提供一个封装的Image懒加载的组件,以供参考