React 项目性能瓶颈分析

1. 使用 rollup-plugin-visualizer 分析构建

借助 rollup-plugin-visualizer 插件，可以分析通过 rollup 构建出的产物内容，并生成可视化图表，帮助你分析打包后的文件大小以及各个模块的占用情况。

1.1. 安装插件

你需要在你的项目中安装 rollup-plugin-visualizer：

npm install --save-dev rollup-plugin-visualizer

1.2. 配置插件

在 Rollup 的配置文件（如 rollup.config.js）中引入并配置 visualizer 插件。

// rollup.config.js
import { defineConfig } from 'rollup'
import visualizer from 'rollup-plugin-visualizer'

export default defineConfig({
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es',
  },
  plugins: [
    // 其他插件...
    visualizer({
      filename: './dist/stats.html', // 输出文件路径
      open: true, // 构建完成后自动打开浏览器
      template: 'treemap' // 图表类型 (sunburst, treemap, network)
    })
  ]
})

1.3. 运行构建命令

运行 Rollup 构建命令来生成构建文件和可视化报告：

npx rollup -c

这将生成一个 stats.html 文件并自动在浏览器中打开（取决于配置）。

1.4. 分析输出报告

打开生成的 stats.html 文件，你会看到一个可视化图表，显示了每个模块的大小和在最终打包文件中的占用比例。这些信息可以帮助你识别出哪些模块占用了过多的空间，进而优化你的项目（如移除未使用的库、按需加载等）。

2. 使用 React DevTools 进行分析

使用 React DevTools 进行分析是调试和优化 React 应用程序的重要工具。React DevTools 是一个浏览器扩展，允许开发者在运行时检查 React 组件的结构、查看组件的状态和属性、分析性能等。以下是详细的使用步骤：

2.1. 安装 React DevTools

React DevTools 可以在 Chrome、Firefox 和其他支持扩展的浏览器中使用。安装步骤如下：

• Chrome 浏览器：访问 Chrome 网上应用店 搜索 "React Developer Tools" 并安装。

• Firefox 浏览器：访问 Firefox 附加组件页面 搜索 "React Developer Tools" 并安装。

• 安装完成后，浏览器右上角会出现 React 的图标，表示安装成功。

2.2. 打开 React DevTools

1. 打开浏览器的开发者工具（快捷键F12 或 Ctrl+Shift+I）。

2. 在开发者工具，找到 "Components" 和 "Profiler" 这两个新选项卡。这些是 React DevTools 的主要功能。

2.3. 使用 Components 面板

Components 面板 允许你查看 React 组件的层次结构、查看每个组件的 props 和 state，并检查组件的 hooks。

• 组件树：在左侧，您会看到应用程序的组件树结构，类似于 DOM 树。在组件树中，点击任意组件即可查看其详细信息。

• Props 和 State：在右侧，可以查看当前选中组件的 props 和 state。可以直接在这里查看和修改组件的 props 或 state，方便调试。

• Hooks：如果组件使用了 hooks，hooks 的状态也会在这里显示。点击 hooks 可以查看其内部状态。

2.4. 编辑 Props 和 State

React DevTools 提供了一些修改 props 和 state 的功能：

• 双击想要修改的值（例如数字、字符串）即可编辑 props state。对于对象类型，点击展开后也可以直接编辑内部值。

• 这些修改不会永久更改代码，而是只影响浏览器中当前运行的实例，适用于快速验证假设和调试。

2.5. 使用 Profiler 面板

Profiler 面板 用于性能分析，帮助找出哪些组件消耗了较多的渲染时间。

• 开始和停止记录：点击 "Start profiling" 按钮来开始记录应用的性能数据。进行一些交互操作后，点击 "Stop profiling" 停止记录。

• 分析渲染时间：停止记录后，您可以看到渲染的火焰图（Flamegraph）和排名图（Ranked），显示每个组件的渲染时间。

• 查找性能瓶颈：可以查看每个组件的 "Render duration" 和 "Commit duration" 时间，找出渲染慢的组件。

• 原因分析：Profiler 还会显示渲染的原因，如 props 改变、state 更新、强制更新等，这有助于理解组件更新的触发点。

2.6. 其他功能

• Highlight Updates：可以启用组件更新高亮功能，帮助可视化了解哪些组件在重新渲染。

• Debug Hooks：对于使用 hooks 的组件，可以通过 DevTools 查看 hooks 的状态和变化过程。

3. 使用 Performance 面板进行性能分析

在 React 应用中，使用 Chrome DevTools 的 Performance 面板进行性能分析是优化应用性能的关键步骤。以下是详细步骤和关键点，以帮助你更好地理解和使用 Performance 面板来分析 React 应用的性能：

3.1. 打开 Performance 面板

1. 在 Chrome 浏览器中打开你的 React 应用。

2. 按下 F12 或 Ctrl + Shift + I（Windows）/ Cmd + Option + I（Mac），打开 DevTools。

3. 点击"Performance"面板。

3.2. 录制性能数据

1. 点击 Performance 面板中的 "Record" 按钮（红色圆点）。

2. 在应用中执行你想分析的操作，如页面加载、组件渲染、用户交互等。

3. 完成操作后，点击 "Stop" 按钮停止录制。

3.3. 分析录制结果

录制完成后，Performance 面板会显示一段时间内的性能数据。关键部分包括：

• Timings（时间线）：展示了页面执行各类任务的时间，如脚本执行、样式计算、布局、绘制等。

• Frames（帧）：展示了页面渲染帧的速率。绿色表示帧率良好，黄色或红色表示帧率不佳。

• Main（主线程）：显示 JavaScript 代码在主线程的执行情况，帮助识别占用时间较长的任务。

• GPU：展示 GPU 处理图形任务的时间，帮助识别 GPU 相关的性能瓶颈。

在使用 Chrome DevTools 的 Performance 工具分析 React 应用时，了解每个指标的含义以及如何解读这些指标是优化性能的关键。以下是详细的查看指标、分析方法及相应的优化建议。

3.4. Performance 工具中的详细指标

1. Overview（概览图）

• FPS（Frames Per Second）：显示每秒渲染的帧数，理想情况下应接近 60 FPS。低于 30 FPS 表示页面出现卡顿。

• CPU 使用率：展示 CPU 在每个时间段的使用情况，反映页面在主线程上的繁忙程度。

• Net（网络请求）：显示页面加载过程中网络请求的时序图，帮助识别长时间加载的资源。

2. Main（主线程）

• 显示 JavaScript 的执行、样式计算、布局、绘制等任务在主线程上的时间分布。

• 关注任务的长度和频率。主线程任务过长会导致页面的交互性降低。

3. Scripting（脚本执行）

• 包括 React 组件的渲染、状态更新和事件处理。脚本执行时间过长会显著影响应用的响应速度。

4. Rendering（渲染）

• 包含浏览器对 DOM 元素的布局计算和样式应用。渲染时间过长通常是由复杂的 CSS 或频繁的布局变动引起的。

5. Painting（绘制）

• 包括将元素的像素绘制到屏幕上的过程。绘制时间长表明页面可能包含复杂的图形或频繁的绘制操作。

6. Composite Layers（合成图层）

• 浏览器将页面分为多个图层并合成，帮助优化渲染性能。合成图层过多或图层频繁更新会影响性能。

3.5. 优化方法及策略

1. 优化 JavaScript 执行

• 减少不必要的渲染：使用 React.memo、useMemo、useCallback 避免无意义的渲染。

• 分解复杂任务：将复杂的函数拆分，避免长时间的脚本执行。可以使用 requestIdleCallback 延迟执行不紧急的任务。

• 异步操作：使用 setTimeout 或 requestAnimationFrame 将非关键任务异步执行，保持主线程的空闲。

2. 优化渲染和布局

• 减少布局抖动：使用 will-change CSS 属性提前通知浏览器可能的变动，减少重排。

• 简化样式计算：避免使用复杂的 CSS 选择器和嵌套，减少浏览器的计算压力。

• 优化动画：尽量使用 transform 和 opacity，这些属性的变动可以通过 GPU 加速，减少对主线程的影响。

3. 优化绘制和图层合成

• 减少绘制区域：避免全局重绘。可以将动画或频繁更新的元素置于单独的图层，减少合成压力。

• 使用硬件加速：通过 translateZ(0) 或 will-change 强制元素进入合成层，从而利用 GPU 加速。

• 控制图层数量：合成图层过多会导致性能下降，尽量减少不必要的图层创建。

4. 网络优化

• 资源加载优化：使用懒加载（lazy loading）、预加载（preloading）等手段优化资源加载时序。

• 减少请求数量：合并 CSS 和 JavaScript 文件，压缩资源，减少请求的体积和数量。

• 缓存策略：合理配置缓存头，提高资源的缓存利用率，减少网络请求。

4. 使用 Lighthouse 进行性能和 SEO 分析

Lighthouse 是一个开源的自动化工具，用于提高网页质量，能够分析性能、可访问性、SEO、最佳实践等。

4.1. 打开 Lighthouse 面板

在 Chrome 中按 F12 打开开发者工具，选择 Lighthouse 选项卡。

4.2. 配置分析选项

选择要分析的内容（Performance、Accessibility、Best Practices、SEO、PWA）。根据需求勾选不同的选项。

4.3. 生成报告

点击 Generate report 按钮，Lighthouse 会在新标签页中加载并分析当前页面，生成一份详细的报告。

4.4. 分析报告

• Performance: 提供了详细的性能指标（如加载时间、交互时间等）和优化建议。

• Accessibility: 提供了可访问性问题的检测结果，并给出了相应的改进建议。

• Best Practices: 检查网页的安全性、资源加载情况等。

• SEO: 提供了针对搜索引擎优化的建议。

4.5. 根据建议进行优化

根据 Lighthouse 的优化建议，可以逐步改进页面性能和其他质量指标。

5. 使用 Memory 面板进行内存分析

Memory 面板用于分析网页的内存使用情况，帮助你找出内存泄漏和优化内存使用。

5.1. 打开 Memory 面板

在 Chrome 中按 F12 打开开发者工具，选择 Memory 选项卡。

5.2. 选择快照类型

• Heap Snapshot: 拍摄堆快照，显示内存中对象的分布情况。适用于检测内存泄漏。

• Allocation Instrumentation on Timeline: 显示内存分配情况，适用于查看内存分配频率。

• Allocation Sampling: 采样内存分配数据，适用于了解哪些对象占用了内存。

5.3. 开始分析

选择合适的选项后，点击 Take snapshot 或 Start 按钮，开始收集内存数据。

5.4. 分析内存使用情况

• 查看对象分布：通过查看堆快照，可以找到内存占用较大的对象或不再需要的对象。

• 检测内存泄漏：比较多次快照，查找不必要的对象是否仍然存在（如 Event Listeners 未正确移除、未清理的定时器等）。

• 优化内存使用：根据内存分析结果，优化对象的生命周期管理，释放不再需要的内存，避免内存泄漏。