Next.js Bundle Analyzer基于交互式 Treemap 的 Bundle 體積與依賴分析工具深度解析【免費下載鏈接】next.jsThe React Framework項目地址: https://gitcode.com/GitHub_Trending/next/next.js本篇技術(shù)文章聚焦 Next.js 倉庫中的 Bundle Analyzer 應用apps/bundle-analyzer/README.md它是一個專門用于可視化 bundle 體積、分析依賴關(guān)系的 Next.js 應用。讀完后你將掌握它的五大核心功能交互式 Treemap、路由級分析、依賴鏈追蹤、環(huán)境/文件類型過濾、文件搜索、它與主next包構(gòu)建期內(nèi)嵌vendor的分發(fā)機制以及底層二進制分析數(shù)據(jù)格式analyze.data/modules.data的解析原理并知道如何通過next experimental-analyze在實際項目中使用它。它是什么一個內(nèi)嵌于 next 包的獨立 Next.js 應用根據(jù) README 的定義Bundle Analyzer 是A Next.js application for visualizing bundle sizes and analyzing dependencies using interactive treemaps.從 package.json 可以確認其工程屬性包名為next/bundle-analyzer-ui且聲明了private: true—— 它不會發(fā)布到 npmREADME 明確指出This package is not published to npm. Instead its built and vendored into the mainnextpackage during its build process.它不發(fā)布到 npm而是在主next包的構(gòu)建過程中被構(gòu)建并內(nèi)嵌進去它本身就是一個用 React 19 Tailwind CSS 4 Radix UI 組件構(gòu)建的完整 Next.js App Router 應用入口為 app/page.tsx 和 app/layout.tsx頁面元數(shù)據(jù)標題即為 Next.js Bundle Analyzer。從源碼結(jié)構(gòu)看vendor 內(nèi)嵌是如何落地的這一分發(fā)機制在倉庫中有兩處源碼證據(jù)構(gòu)建依賴聲明packages/next/turbo.json 中主next包的build任務聲明了dependsOn: [next/bundle-analyzer-ui#build, ^build]即每次構(gòu)建next包時會先觸發(fā) Bundle Analyzer UI 的構(gòu)建其構(gòu)建腳本為next build --no-mangling見 package.json 的 scripts 字段。運行時復制在 packages/next/src/build/analyze/index.ts 中analyze函數(shù)完成 Turbopack 分析后執(zhí)行await cp(path.join(__dirname, ../../bundle-analyzer), analyzeDir, { recursive: true, })也就是說next包內(nèi)dist/bundle-analyzer目錄即構(gòu)建期內(nèi)嵌的靜態(tài)站點會被整體復制到目標項目的.next/diagnostics/analyze目錄下與data/數(shù)據(jù)目錄放在一起供本地服務器托管。核心功能README 五大特性的源碼印證README 的 Features 一節(jié)列出了五項核心能力下文逐項結(jié)合源碼展開。1. 交互式 TreemapInteractive Treemap頁面主體由 TreemapVisualizer 組件渲染布局算法實現(xiàn)在 lib/treemap-layout.ts 與 lib/layout-treemap.ts 中。從 page.tsx 的渲染代碼可以看到Treemap 以SizeMode.Compressed壓縮后體積作為默認尺寸模式TreemapVisualizer analyzeData{analyzeData} sourceIndex{rootSourceIndex} selectedSourceIndex{selectedSourceIndex ?? rootSourceIndex} ... sizeMode{SizeMode.Compressed} /交互細節(jié)還包括底部狀態(tài)欄實時顯示懸停文件的名稱、壓縮體積以及 client / server / traced 徽標見 page.tsx 底部hoveredNodeInfo渲染邏輯按Escape鍵可將 Treemap 選區(qū)重置回當前路由的根 sourcehandleKeyDown邏輯右側(cè)詳情面板Sidebar寬度可在 10%–50% 之間拖拽調(diào)整。2. 路由級分析Route-based Analysis分析數(shù)據(jù)按路由組織存儲根路由讀取data/analyze.data其余路由讀取data/route/analyze.data。page.tsx 中的數(shù)據(jù)路徑推導邏輯let analyzeDataPath if (selectedRoute selectedRoute /) { analyzeDataPath data/analyze.data } else if (selectedRoute) { analyzeDataPath data/${selectedRoute.replace(/^\//, )}/analyze.data }路由列表來源是 packages/next/src/build/analyze/index.ts 中collectRoutesForAnalyze函數(shù)生成的routes.json它同時掃描app與pages目錄支持 hybrid 項目經(jīng)discoverRoutesgenerateRoutesManifest得到全部靜態(tài)/動態(tài)路由后序列化寫入analyzeDir/data/routes.json。UI 側(cè)由 RouteTypeahead 組件提供路由輸入聯(lián)想。數(shù)據(jù)文件類型定義RouteManifest見 lib/types.ts。3. 依賴鏈追蹤Dependency Tracking點擊某個文件后import-chain 組件基于模塊圖展示導入鏈路與依賴關(guān)系。底層計算依賴 lib/module-graph.ts 中的computeActiveEntries與computeModuleDepthMap數(shù)據(jù)則來自全局共享的modules.data所有路由共用一份模塊表每路由只持有自己的analyze.dataconst { data: modulesData } useSWRModulesData(data/modules.data, fetchModulesData)4. 過濾控制Filter ControlsREADME 說明可以按環(huán)境client/server和文件類型JS/CSS/JSON/Assets過濾。page.tsx 頂欄提供環(huán)境單選Monitor/Server圖標對應的 Client/Server與文件類型多選JavaScript/CSS/JSON/Asset過濾謂詞filterSource通過analyzeData.getSourceFlags(sourceIndex)判定每個 source 的歸屬const hasEnvironment (environmentFilter Environment.Client flags.client) || (environmentFilter Environment.Server flags.server)getSourceFlags的判定規(guī)則見 lib/analyze-data.ts頗具信息量輸出文件以[client-fs]/開頭 → 標記為client以[project]/開頭 → 標記為server traced即被追蹤保留到運行時的服務端文件其余 →server按擴展名區(qū)分類型.js/.mjs/.cjs→ js.css→ css.json→ json其他 → asset。5. 文件搜索Search FunctionalityFileSearch 組件基于 cmdk 實現(xiàn)對 bundle 內(nèi)文件進行搜索搜索詞searchQuery傳入 Treemap 高亮匹配項。文件索引由AnalyzeData構(gòu)造時建立的pathToSourceIndex路徑映射與ModulesData的pathToModuleIndex映射提供支撐。數(shù)據(jù)協(xié)議JSON 頭 二進制邊的.data文件格式這是本應用最有技術(shù)含量的部分。lib/analyze-data.ts 注釋說明這些類型匹配 Rust 側(cè) analyze.rs 的結(jié)構(gòu)——即 TurbopackRust產(chǎn)出分析數(shù)據(jù)TypeScript 側(cè)負責解析與渲染。文件布局為[ u32: JSON 頭長度 ][ JSON 頭 ][ 二進制邊數(shù)據(jù)u32 數(shù)組 ]其中AnalyzeDataHeaderanalyze.datasourcessource 樹含parent_source_index組成目錄層級、chunk_parts每個 chunk 分片記錄source_index/output_file_index/size/compressed_size、output_files輸出文件名、三組EdgesDataReferenceoutput_file_chunk_parts、source_chunk_parts、source_children以及source_rootsModulesDataHeadermodules.datamodules表加上module_dependents、module_dependencies及其 async/traced 變體共 6 組邊引用。readEdgesDataAtIndex用 CSR壓縮稀疏行風格讀取邊表只讀取目標索引所需的前后兩個 offset避免整表反序列化使單文件依賴查詢接近 O(出度) 而非 O(總邊數(shù))。在此基礎上封裝了getOwnSizes/getRecursiveSizes遞歸體積支持過濾謂詞、sourceChunks所在 chunk 列表、getRecursiveModuleCount等 API供 Treemap 布局與側(cè)邊欄統(tǒng)計調(diào)用。如何使用next experimental-analyze的完整鏈路雖然本應用不發(fā)布 npm但它是next experimental-analyze命令的可視端。從 packages/next/src/build/analyze/index.ts 可以還原完整調(diào)用鏈與參數(shù)export type AnalyzeOptions { dir: string reactProductionProfiling?: boolean noMangling?: boolean appDirOnly?: boolean output?: boolean port?: number }參數(shù)默認值作用dir-項目目錄.next作為 distDirnoManglingfalse不做符號混淆便于閱讀模塊名appDirOnlyfalse僅分析app目錄路由路由收集時傳入discoverRoutesoutputfalsetrue時僅產(chǎn)出結(jié)果文件到.next/diagnostics/analyze不啟動服務器port4000交互式結(jié)果服務器的監(jiān)聽端口僅監(jiān)聽localhost執(zhí)行流程強制process.env.TURBOPACK ?? 1——analyze 是 Turbopack 專屬能力源碼注釋analyze is Turbopack-only以PHASE_ANALYZE階段加載項目配置調(diào)用turbopackAnalyze執(zhí)行生產(chǎn)構(gòu)建級分析并返回耗時將next包內(nèi)嵌的bundle-analyzer靜態(tài)站點復制到.next/diagnostics/analyze寫入data/routes.json若未指定output調(diào)用startServer基于serve-handler在localhost:port默認 4000啟動靜態(tài)服務器打印Bundle analyzer available at http://address后阻塞等待。開發(fā)該應用本身時next.config.mjs 有一個值得注意的配置開發(fā)模式下將/data/:path*重寫代理到http://localhost:4000/data/:path*即從正在運行的next experimental-analyze服務器實時拉取分析數(shù)據(jù)調(diào)試 UI而構(gòu)建發(fā)布時使用output: export導出純靜態(tài)站點到dist。此外構(gòu)建腳本攜帶NEXT_TEST_NATIVE_IGNORE_LOCAL_INSTALLtrue環(huán)境變量表明它使用next包內(nèi)置的原生二進制而非本地工作區(qū)安裝。維護約定重要變更需同步更新 Demo 站點README 的 Updating 一節(jié)給出了一條明確的維護約定當落地非平凡non-trivial的改動時應考慮同步更新官方 demo 站點README 中附帶了 demo 站點的 URL 與獨立倉庫地址此處不再重復外鏈。這說明 Bundle Analyzer 的 UI 迭代是以一個獨立演示倉庫為回歸/展示基線的。小結(jié)Bundle Analyzer 是 Next.js 倉庫中一個私有、構(gòu)建期內(nèi)嵌進next包的工具型 Next.js 應用服務于next experimental-analyze命令的交互式結(jié)果展示其數(shù)據(jù)協(xié)議由 TurbopackRust以JSON 頭 CSR 邊表的二進制格式產(chǎn)出TypeScript 端按需解析兼顧體積與查詢效率功能面覆蓋 Treemap 可視化、按路由下鉆、import 依賴鏈、client/server 環(huán)境與 JS/CSS/JSON/Asset 類型過濾、文件搜索并支持--output離線產(chǎn)出與--port自定義端口相關(guān)關(guān)鍵文件README、數(shù)據(jù)解析、類型定義、路由與模塊圖、分析入口。適用前提說明analyze功能基于 Turbopack且分析的是生產(chǎn)構(gòu)建源碼日志提示 Analyzing a production build...在開發(fā)本倉庫內(nèi)的該應用需按 package.json 中的 scripts 執(zhí)行并配合localhost:4000的數(shù)據(jù)服務?！久赓M下載鏈接】next.jsThe React Framework項目地址: https://gitcode.com/GitHub_Trending/next/next.js創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Next.js Bundle Analyzer：基于交互式 Treemap 的 Bundle 體積與依賴分析工具深度解析
Next.js Bundle Analyzer基于交互式 Treemap 的 Bundle 體積與依賴分析工具深度解析【免費下載鏈接】next.jsThe React Framework項目地址: https://gitcode.com/GitHub_Trending/next/next.js本篇技術(shù)文章聚焦 Next.js 倉庫中的 Bundle Analyzer 應用apps/bundle-analyzer/README.md它是一個專門用于可視化 bundle 體積、分析依賴關(guān)系的 Next.js 應用。讀完后你將掌握它的五大核心功能交互式 Treemap、路由級分析、依賴鏈追蹤、環(huán)境/文件類型過濾、文件搜索、它與主next包構(gòu)建期內(nèi)嵌vendor的分發(fā)機制以及底層二進制分析數(shù)據(jù)格式analyze.data/modules.data的解析原理并知道如何通過next experimental-analyze在實際項目中使用它。它是什么一個內(nèi)嵌于 next 包的獨立 Next.js 應用根據(jù) README 的定義Bundle Analyzer 是A Next.js application for visualizing bundle sizes and analyzing dependencies using interactive treemaps.從 package.json 可以確認其工程屬性包名為next/bundle-analyzer-ui且聲明了private: true—— 它不會發(fā)布到 npmREADME 明確指出This package is not published to npm. Instead its built and vendored into the mainnextpackage during its build process.它不發(fā)布到 npm而是在主next包的構(gòu)建過程中被構(gòu)建并內(nèi)嵌進去它本身就是一個用 React 19 Tailwind CSS 4 Radix UI 組件構(gòu)建的完整 Next.js App Router 應用入口為 app/page.tsx 和 app/layout.tsx頁面元數(shù)據(jù)標題即為 Next.js Bundle Analyzer。從源碼結(jié)構(gòu)看vendor 內(nèi)嵌是如何落地的這一分發(fā)機制在倉庫中有兩處源碼證據(jù)構(gòu)建依賴聲明packages/next/turbo.json 中主next包的build任務聲明了dependsOn: [next/bundle-analyzer-ui#build, ^build]即每次構(gòu)建next包時會先觸發(fā) Bundle Analyzer UI 的構(gòu)建其構(gòu)建腳本為next build --no-mangling見 package.json 的 scripts 字段。運行時復制在 packages/next/src/build/analyze/index.ts 中analyze函數(shù)完成 Turbopack 分析后執(zhí)行await cp(path.join(__dirname, ../../bundle-analyzer), analyzeDir, { recursive: true, })也就是說next包內(nèi)dist/bundle-analyzer目錄即構(gòu)建期內(nèi)嵌的靜態(tài)站點會被整體復制到目標項目的.next/diagnostics/analyze目錄下與data/數(shù)據(jù)目錄放在一起供本地服務器托管。核心功能README 五大特性的源碼印證README 的 Features 一節(jié)列出了五項核心能力下文逐項結(jié)合源碼展開。1. 交互式 TreemapInteractive Treemap頁面主體由 TreemapVisualizer 組件渲染布局算法實現(xiàn)在 lib/treemap-layout.ts 與 lib/layout-treemap.ts 中。從 page.tsx 的渲染代碼可以看到Treemap 以SizeMode.Compressed壓縮后體積作為默認尺寸模式TreemapVisualizer analyzeData{analyzeData} sourceIndex{rootSourceIndex} selectedSourceIndex{selectedSourceIndex ?? rootSourceIndex} ... sizeMode{SizeMode.Compressed} /交互細節(jié)還包括底部狀態(tài)欄實時顯示懸停文件的名稱、壓縮體積以及 client / server / traced 徽標見 page.tsx 底部hoveredNodeInfo渲染邏輯按Escape鍵可將 Treemap 選區(qū)重置回當前路由的根 sourcehandleKeyDown邏輯右側(cè)詳情面板Sidebar寬度可在 10%–50% 之間拖拽調(diào)整。2. 路由級分析Route-based Analysis分析數(shù)據(jù)按路由組織存儲根路由讀取data/analyze.data其余路由讀取data/route/analyze.data。page.tsx 中的數(shù)據(jù)路徑推導邏輯let analyzeDataPath if (selectedRoute selectedRoute /) { analyzeDataPath data/analyze.data } else if (selectedRoute) { analyzeDataPath data/${selectedRoute.replace(/^\//, )}/analyze.data }路由列表來源是 packages/next/src/build/analyze/index.ts 中collectRoutesForAnalyze函數(shù)生成的routes.json它同時掃描app與pages目錄支持 hybrid 項目經(jīng)discoverRoutesgenerateRoutesManifest得到全部靜態(tài)/動態(tài)路由后序列化寫入analyzeDir/data/routes.json。UI 側(cè)由 RouteTypeahead 組件提供路由輸入聯(lián)想。數(shù)據(jù)文件類型定義RouteManifest見 lib/types.ts。3. 依賴鏈追蹤Dependency Tracking點擊某個文件后import-chain 組件基于模塊圖展示導入鏈路與依賴關(guān)系。底層計算依賴 lib/module-graph.ts 中的computeActiveEntries與computeModuleDepthMap數(shù)據(jù)則來自全局共享的modules.data所有路由共用一份模塊表每路由只持有自己的analyze.dataconst { data: modulesData } useSWRModulesData(data/modules.data, fetchModulesData)4. 過濾控制Filter ControlsREADME 說明可以按環(huán)境client/server和文件類型JS/CSS/JSON/Assets過濾。page.tsx 頂欄提供環(huán)境單選Monitor/Server圖標對應的 Client/Server與文件類型多選JavaScript/CSS/JSON/Asset過濾謂詞filterSource通過analyzeData.getSourceFlags(sourceIndex)判定每個 source 的歸屬const hasEnvironment (environmentFilter Environment.Client flags.client) || (environmentFilter Environment.Server flags.server)getSourceFlags的判定規(guī)則見 lib/analyze-data.ts頗具信息量輸出文件以[client-fs]/開頭 → 標記為client以[project]/開頭 → 標記為server traced即被追蹤保留到運行時的服務端文件其余 →server按擴展名區(qū)分類型.js/.mjs/.cjs→ js.css→ css.json→ json其他 → asset。5. 文件搜索Search FunctionalityFileSearch 組件基于 cmdk 實現(xiàn)對 bundle 內(nèi)文件進行搜索搜索詞searchQuery傳入 Treemap 高亮匹配項。文件索引由AnalyzeData構(gòu)造時建立的pathToSourceIndex路徑映射與ModulesData的pathToModuleIndex映射提供支撐。數(shù)據(jù)協(xié)議JSON 頭 二進制邊的.data文件格式這是本應用最有技術(shù)含量的部分。lib/analyze-data.ts 注釋說明這些類型匹配 Rust 側(cè) analyze.rs 的結(jié)構(gòu)——即 TurbopackRust產(chǎn)出分析數(shù)據(jù)TypeScript 側(cè)負責解析與渲染。文件布局為[ u32: JSON 頭長度 ][ JSON 頭 ][ 二進制邊數(shù)據(jù)u32 數(shù)組 ]其中AnalyzeDataHeaderanalyze.datasourcessource 樹含parent_source_index組成目錄層級、chunk_parts每個 chunk 分片記錄source_index/output_file_index/size/compressed_size、output_files輸出文件名、三組EdgesDataReferenceoutput_file_chunk_parts、source_chunk_parts、source_children以及source_rootsModulesDataHeadermodules.datamodules表加上module_dependents、module_dependencies及其 async/traced 變體共 6 組邊引用。readEdgesDataAtIndex用 CSR壓縮稀疏行風格讀取邊表只讀取目標索引所需的前后兩個 offset避免整表反序列化使單文件依賴查詢接近 O(出度) 而非 O(總邊數(shù))。在此基礎上封裝了getOwnSizes/getRecursiveSizes遞歸體積支持過濾謂詞、sourceChunks所在 chunk 列表、getRecursiveModuleCount等 API供 Treemap 布局與側(cè)邊欄統(tǒng)計調(diào)用。如何使用next experimental-analyze的完整鏈路雖然本應用不發(fā)布 npm但它是next experimental-analyze命令的可視端。從 packages/next/src/build/analyze/index.ts 可以還原完整調(diào)用鏈與參數(shù)export type AnalyzeOptions { dir: string reactProductionProfiling?: boolean noMangling?: boolean appDirOnly?: boolean output?: boolean port?: number }參數(shù)默認值作用dir-項目目錄.next作為 distDirnoManglingfalse不做符號混淆便于閱讀模塊名appDirOnlyfalse僅分析app目錄路由路由收集時傳入discoverRoutesoutputfalsetrue時僅產(chǎn)出結(jié)果文件到.next/diagnostics/analyze不啟動服務器port4000交互式結(jié)果服務器的監(jiān)聽端口僅監(jiān)聽localhost執(zhí)行流程強制process.env.TURBOPACK ?? 1——analyze 是 Turbopack 專屬能力源碼注釋analyze is Turbopack-only以PHASE_ANALYZE階段加載項目配置調(diào)用turbopackAnalyze執(zhí)行生產(chǎn)構(gòu)建級分析并返回耗時將next包內(nèi)嵌的bundle-analyzer靜態(tài)站點復制到.next/diagnostics/analyze寫入data/routes.json若未指定output調(diào)用startServer基于serve-handler在localhost:port默認 4000啟動靜態(tài)服務器打印Bundle analyzer available at http://address后阻塞等待。開發(fā)該應用本身時next.config.mjs 有一個值得注意的配置開發(fā)模式下將/data/:path*重寫代理到http://localhost:4000/data/:path*即從正在運行的next experimental-analyze服務器實時拉取分析數(shù)據(jù)調(diào)試 UI而構(gòu)建發(fā)布時使用output: export導出純靜態(tài)站點到dist。此外構(gòu)建腳本攜帶NEXT_TEST_NATIVE_IGNORE_LOCAL_INSTALLtrue環(huán)境變量表明它使用next包內(nèi)置的原生二進制而非本地工作區(qū)安裝。維護約定重要變更需同步更新 Demo 站點README 的 Updating 一節(jié)給出了一條明確的維護約定當落地非平凡non-trivial的改動時應考慮同步更新官方 demo 站點README 中附帶了 demo 站點的 URL 與獨立倉庫地址此處不再重復外鏈。這說明 Bundle Analyzer 的 UI 迭代是以一個獨立演示倉庫為回歸/展示基線的。小結(jié)Bundle Analyzer 是 Next.js 倉庫中一個私有、構(gòu)建期內(nèi)嵌進next包的工具型 Next.js 應用服務于next experimental-analyze命令的交互式結(jié)果展示其數(shù)據(jù)協(xié)議由 TurbopackRust以JSON 頭 CSR 邊表的二進制格式產(chǎn)出TypeScript 端按需解析兼顧體積與查詢效率功能面覆蓋 Treemap 可視化、按路由下鉆、import 依賴鏈、client/server 環(huán)境與 JS/CSS/JSON/Asset 類型過濾、文件搜索并支持--output離線產(chǎn)出與--port自定義端口相關(guān)關(guān)鍵文件README、數(shù)據(jù)解析、類型定義、路由與模塊圖、分析入口。適用前提說明analyze功能基于 Turbopack且分析的是生產(chǎn)構(gòu)建源碼日志提示 Analyzing a production build...在開發(fā)本倉庫內(nèi)的該應用需按 package.json 中的 scripts 執(zhí)行并配合localhost:4000的數(shù)據(jù)服務?！久赓M下載鏈接】next.jsThe React Framework項目地址: https://gitcode.com/GitHub_Trending/next/next.js創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考