React 的代码分割与懒加载通过 React.lazy 和 Suspense 实现动态加载组件，可以有效减少初始加载时间，提高页面的首屏性能。代码分割的核心思想是将大文件拆分为多个小文件，按需加载，从而避免一次性加载过多内容。 示例场景

合理使用useEffect，避免不必要的副作用 在 React 中，useEffect 是一个常用的钩子，用于处理副作用（例如数据获取、订阅等）。但是，如果 依赖数组 配置不当，会导致以下问题： 副作用重复执行：依赖数组过大或配置错误时，

优化图片和资源加载：使用现代图片格式和懒加载提升图片和资源加载性能是前端优化的重要环节，尤其在页面中存在大量图片时。下面是优化的几种方法以及代码示例。 优化方式 现代图片格式： WebP、AVIF 是现代图片格式，具有更高的压缩率和更小的文

在优化 React 应用时，有许多具体的细节可以关注，以提升性能、可维护性和用户体验。以下是一些关键的优化细节 1. 使用React.memo对于纯组件（Pure Components），使用 React.memo 包装 防止不必要的重

场景1： 移动端项目，有大量的图片需要访问，在4g或者wifi的网络状态下做不同的优化场景2：在后台系统访问，有时候会遇到断网或者网络不好得时候，所以这里需求是在请求发送之前判断网络环境，如果断网给出提示，弱网超过一定时间提示请求超时在面