前端開發項目性能瓶頸分析

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.?使用 Vue Devtools 進行分析

3.1.?安裝 Vue Devtools

你可以在 Chrome 網上應用商店或者 Firefox 附加組件頁面上找到 Vue Devtools 插件進行安裝。

Chrome 網上應用商店 - Vue Devtools
Firefox 附加組件 - Vue Devtools

3.2.?打開 Vue Devtools

打開開發者工具（F12 或右鍵菜單 > 檢查），選擇 Vue 選項卡。Vue Devtools 會顯示應用中的組件樹、Vuex 狀態（如果使用了 Vuex）、事件等信息。

3.3.?進行組件分析

組件樹：可以查看組件的層級關系，選擇一個組件會顯示該組件的 Props、State、Computed 等信息。
事件：可以查看事件的觸發情況。
性能分析：通過切換到 Performance 標簽，你可以記錄并分析應用的渲染時間。你可以點擊 Start recording performance 按鈕，然后與應用交互，完成后點擊 Stop recording，Vue Devtools 會顯示一個性能圖表，顯示每個組件的渲染時間。你可以識別出渲染時間較長的組件，從而優化性能。