Next.js Bundle Analyzer基于交互式 Treemap 的 Bundle 体积与依赖分析工具深度解析【免费下载链接】next.jsThe React Framework项目地址: https://gitcode.com/GitHub_Trending/next/next.js本篇技术文章聚焦 Next.js 仓库中的 Bundle Analyzer 应用apps/bundle-analyzer/README.md它是一个专门用于可视化 bundle 体积、分析依赖关系的 Next.js 应用。读完后你将掌握它的五大核心功能交互式 Treemap、路由级分析、依赖链追踪、环境/文件类型过滤、文件搜索、它与主next包构建期内嵌vendor的分发机制以及底层二进制分析数据格式analyze.data/modules.data的解析原理并知道如何通过next experimental-analyze在实际项目中使用它。它是什么一个内嵌于 next 包的独立 Next.js 应用根据 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—— 它不会发布到 npmREADME 明确指出This package is not published to npm. Instead its built and vendored into the mainnextpackage during its build process.它不发布到 npm而是在主next包的构建过程中被构建并内嵌进去它本身就是一个用 React 19 Tailwind CSS 4 Radix UI 组件构建的完整 Next.js App Router 应用入口为 app/page.tsx 和 app/layout.tsx页面元数据标题即为 Next.js Bundle Analyzer。从源码结构看vendor 内嵌是如何落地的这一分发机制在仓库中有两处源码证据构建依赖声明packages/next/turbo.json 中主next包的build任务声明了dependsOn: [next/bundle-analyzer-ui#build, ^build]即每次构建next包时会先触发 Bundle Analyzer UI 的构建其构建脚本为next build --no-mangling见 package.json 的 scripts 字段。运行时复制在 packages/next/src/build/analyze/index.ts 中analyze函数完成 Turbopack 分析后执行await cp(path.join(__dirname, ../../bundle-analyzer), analyzeDir, { recursive: true, })也就是说next包内dist/bundle-analyzer目录即构建期内嵌的静态站点会被整体复制到目标项目的.next/diagnostics/analyze目录下与data/数据目录放在一起供本地服务器托管。核心功能README 五大特性的源码印证README 的 Features 一节列出了五项核心能力下文逐项结合源码展开。1. 交互式 TreemapInteractive Treemap页面主体由 TreemapVisualizer 组件渲染布局算法实现在 lib/treemap-layout.ts 与 lib/layout-treemap.ts 中。从 page.tsx 的渲染代码可以看到Treemap 以SizeMode.Compressed压缩后体积作为默认尺寸模式TreemapVisualizer analyzeData{analyzeData} sourceIndex{rootSourceIndex} selectedSourceIndex{selectedSourceIndex ?? rootSourceIndex} ... sizeMode{SizeMode.Compressed} /交互细节还包括底部状态栏实时显示悬停文件的名称、压缩体积以及 client / server / traced 徽标见 page.tsx 底部hoveredNodeInfo渲染逻辑按Escape键可将 Treemap 选区重置回当前路由的根 sourcehandleKeyDown逻辑右侧详情面板Sidebar宽度可在 10%–50% 之间拖拽调整。2. 路由级分析Route-based Analysis分析数据按路由组织存储根路由读取data/analyze.data其余路由读取data/route/analyze.data。page.tsx 中的数据路径推导逻辑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函数生成的routes.json它同时扫描app与pages目录支持 hybrid 项目经discoverRoutesgenerateRoutesManifest得到全部静态/动态路由后序列化写入analyzeDir/data/routes.json。UI 侧由 RouteTypeahead 组件提供路由输入联想。数据文件类型定义RouteManifest见 lib/types.ts。3. 依赖链追踪Dependency Tracking点击某个文件后import-chain 组件基于模块图展示导入链路与依赖关系。底层计算依赖 lib/module-graph.ts 中的computeActiveEntries与computeModuleDepthMap数据则来自全局共享的modules.data所有路由共用一份模块表每路由只持有自己的analyze.dataconst { data: modulesData } useSWRModulesData(data/modules.data, fetchModulesData)4. 过滤控制Filter ControlsREADME 说明可以按环境client/server和文件类型JS/CSS/JSON/Assets过滤。page.tsx 顶栏提供环境单选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的判定规则见 lib/analyze-data.ts颇具信息量输出文件以[client-fs]/开头 → 标记为client以[project]/开头 → 标记为server traced即被追踪保留到运行时的服务端文件其余 →server按扩展名区分类型.js/.mjs/.cjs→ js.css→ css.json→ json其他 → asset。5. 文件搜索Search FunctionalityFileSearch 组件基于 cmdk 实现对 bundle 内文件进行搜索搜索词searchQuery传入 Treemap 高亮匹配项。文件索引由AnalyzeData构造时建立的pathToSourceIndex路径映射与ModulesData的pathToModuleIndex映射提供支撑。数据协议JSON 头 二进制边的.data文件格式这是本应用最有技术含量的部分。lib/analyze-data.ts 注释说明这些类型匹配 Rust 侧 analyze.rs 的结构——即 TurbopackRust产出分析数据TypeScript 侧负责解析与渲染。文件布局为[ u32: JSON 头长度 ][ JSON 头 ][ 二进制边数据u32 数组 ]其中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(总边数)。在此基础上封装了getOwnSizes/getRecursiveSizes递归体积支持过滤谓词、sourceChunks所在 chunk 列表、getRecursiveModuleCount等 API供 Treemap 布局与侧边栏统计调用。如何使用next experimental-analyze的完整链路虽然本应用不发布 npm但它是next experimental-analyze命令的可视端。从 packages/next/src/build/analyze/index.ts 可以还原完整调用链与参数export type AnalyzeOptions { dir: string reactProductionProfiling?: boolean noMangling?: boolean appDirOnly?: boolean output?: boolean port?: number }参数默认值作用dir-项目目录.next作为 distDirnoManglingfalse不做符号混淆便于阅读模块名appDirOnlyfalse仅分析app目录路由路由收集时传入discoverRoutesoutputfalsetrue时仅产出结果文件到.next/diagnostics/analyze不启动服务器port4000交互式结果服务器的监听端口仅监听localhost执行流程强制process.env.TURBOPACK ?? 1——analyze 是 Turbopack 专属能力源码注释analyze is Turbopack-only以PHASE_ANALYZE阶段加载项目配置调用turbopackAnalyze执行生产构建级分析并返回耗时将next包内嵌的bundle-analyzer静态站点复制到.next/diagnostics/analyze写入data/routes.json若未指定output调用startServer基于serve-handler在localhost:port默认 4000启动静态服务器打印Bundle analyzer available at http://address后阻塞等待。开发该应用本身时next.config.mjs 有一个值得注意的配置开发模式下将/data/:path*重写代理到http://localhost:4000/data/:path*即从正在运行的next experimental-analyze服务器实时拉取分析数据调试 UI而构建发布时使用output: export导出纯静态站点到dist。此外构建脚本携带NEXT_TEST_NATIVE_IGNORE_LOCAL_INSTALLtrue环境变量表明它使用next包内置的原生二进制而非本地工作区安装。维护约定重要变更需同步更新 Demo 站点README 的 Updating 一节给出了一条明确的维护约定当落地非平凡non-trivial的改动时应考虑同步更新官方 demo 站点README 中附带了 demo 站点的 URL 与独立仓库地址此处不再重复外链。这说明 Bundle Analyzer 的 UI 迭代是以一个独立演示仓库为回归/展示基线的。小结Bundle Analyzer 是 Next.js 仓库中一个私有、构建期内嵌进next包的工具型 Next.js 应用服务于next experimental-analyze命令的交互式结果展示其数据协议由 TurbopackRust以JSON 头 CSR 边表的二进制格式产出TypeScript 端按需解析兼顾体积与查询效率功能面覆盖 Treemap 可视化、按路由下钻、import 依赖链、client/server 环境与 JS/CSS/JSON/Asset 类型过滤、文件搜索并支持--output离线产出与--port自定义端口相关关键文件README、数据解析、类型定义、路由与模块图、分析入口。适用前提说明analyze功能基于 Turbopack且分析的是生产构建源码日志提示 Analyzing a production build...在开发本仓库内的该应用需按 package.json 中的 scripts 执行并配合localhost:4000的数据服务。【免费下载链接】next.jsThe React Framework项目地址: https://gitcode.com/GitHub_Trending/next/next.js创作声明：本文部分内容由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本篇技术文章聚焦 Next.js 仓库中的 Bundle Analyzer 应用apps/bundle-analyzer/README.md它是一个专门用于可视化 bundle 体积、分析依赖关系的 Next.js 应用。读完后你将掌握它的五大核心功能交互式 Treemap、路由级分析、依赖链追踪、环境/文件类型过滤、文件搜索、它与主next包构建期内嵌vendor的分发机制以及底层二进制分析数据格式analyze.data/modules.data的解析原理并知道如何通过next experimental-analyze在实际项目中使用它。它是什么一个内嵌于 next 包的独立 Next.js 应用根据 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—— 它不会发布到 npmREADME 明确指出This package is not published to npm. Instead its built and vendored into the mainnextpackage during its build process.它不发布到 npm而是在主next包的构建过程中被构建并内嵌进去它本身就是一个用 React 19 Tailwind CSS 4 Radix UI 组件构建的完整 Next.js App Router 应用入口为 app/page.tsx 和 app/layout.tsx页面元数据标题即为 Next.js Bundle Analyzer。从源码结构看vendor 内嵌是如何落地的这一分发机制在仓库中有两处源码证据构建依赖声明packages/next/turbo.json 中主next包的build任务声明了dependsOn: [next/bundle-analyzer-ui#build, ^build]即每次构建next包时会先触发 Bundle Analyzer UI 的构建其构建脚本为next build --no-mangling见 package.json 的 scripts 字段。运行时复制在 packages/next/src/build/analyze/index.ts 中analyze函数完成 Turbopack 分析后执行await cp(path.join(__dirname, ../../bundle-analyzer), analyzeDir, { recursive: true, })也就是说next包内dist/bundle-analyzer目录即构建期内嵌的静态站点会被整体复制到目标项目的.next/diagnostics/analyze目录下与data/数据目录放在一起供本地服务器托管。核心功能README 五大特性的源码印证README 的 Features 一节列出了五项核心能力下文逐项结合源码展开。1. 交互式 TreemapInteractive Treemap页面主体由 TreemapVisualizer 组件渲染布局算法实现在 lib/treemap-layout.ts 与 lib/layout-treemap.ts 中。从 page.tsx 的渲染代码可以看到Treemap 以SizeMode.Compressed压缩后体积作为默认尺寸模式TreemapVisualizer analyzeData{analyzeData} sourceIndex{rootSourceIndex} selectedSourceIndex{selectedSourceIndex ?? rootSourceIndex} ... sizeMode{SizeMode.Compressed} /交互细节还包括底部状态栏实时显示悬停文件的名称、压缩体积以及 client / server / traced 徽标见 page.tsx 底部hoveredNodeInfo渲染逻辑按Escape键可将 Treemap 选区重置回当前路由的根 sourcehandleKeyDown逻辑右侧详情面板Sidebar宽度可在 10%–50% 之间拖拽调整。2. 路由级分析Route-based Analysis分析数据按路由组织存储根路由读取data/analyze.data其余路由读取data/route/analyze.data。page.tsx 中的数据路径推导逻辑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函数生成的routes.json它同时扫描app与pages目录支持 hybrid 项目经discoverRoutesgenerateRoutesManifest得到全部静态/动态路由后序列化写入analyzeDir/data/routes.json。UI 侧由 RouteTypeahead 组件提供路由输入联想。数据文件类型定义RouteManifest见 lib/types.ts。3. 依赖链追踪Dependency Tracking点击某个文件后import-chain 组件基于模块图展示导入链路与依赖关系。底层计算依赖 lib/module-graph.ts 中的computeActiveEntries与computeModuleDepthMap数据则来自全局共享的modules.data所有路由共用一份模块表每路由只持有自己的analyze.dataconst { data: modulesData } useSWRModulesData(data/modules.data, fetchModulesData)4. 过滤控制Filter ControlsREADME 说明可以按环境client/server和文件类型JS/CSS/JSON/Assets过滤。page.tsx 顶栏提供环境单选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的判定规则见 lib/analyze-data.ts颇具信息量输出文件以[client-fs]/开头 → 标记为client以[project]/开头 → 标记为server traced即被追踪保留到运行时的服务端文件其余 →server按扩展名区分类型.js/.mjs/.cjs→ js.css→ css.json→ json其他 → asset。5. 文件搜索Search FunctionalityFileSearch 组件基于 cmdk 实现对 bundle 内文件进行搜索搜索词searchQuery传入 Treemap 高亮匹配项。文件索引由AnalyzeData构造时建立的pathToSourceIndex路径映射与ModulesData的pathToModuleIndex映射提供支撑。数据协议JSON 头 二进制边的.data文件格式这是本应用最有技术含量的部分。lib/analyze-data.ts 注释说明这些类型匹配 Rust 侧 analyze.rs 的结构——即 TurbopackRust产出分析数据TypeScript 侧负责解析与渲染。文件布局为[ u32: JSON 头长度 ][ JSON 头 ][ 二进制边数据u32 数组 ]其中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(总边数)。在此基础上封装了getOwnSizes/getRecursiveSizes递归体积支持过滤谓词、sourceChunks所在 chunk 列表、getRecursiveModuleCount等 API供 Treemap 布局与侧边栏统计调用。如何使用next experimental-analyze的完整链路虽然本应用不发布 npm但它是next experimental-analyze命令的可视端。从 packages/next/src/build/analyze/index.ts 可以还原完整调用链与参数export type AnalyzeOptions { dir: string reactProductionProfiling?: boolean noMangling?: boolean appDirOnly?: boolean output?: boolean port?: number }参数默认值作用dir-项目目录.next作为 distDirnoManglingfalse不做符号混淆便于阅读模块名appDirOnlyfalse仅分析app目录路由路由收集时传入discoverRoutesoutputfalsetrue时仅产出结果文件到.next/diagnostics/analyze不启动服务器port4000交互式结果服务器的监听端口仅监听localhost执行流程强制process.env.TURBOPACK ?? 1——analyze 是 Turbopack 专属能力源码注释analyze is Turbopack-only以PHASE_ANALYZE阶段加载项目配置调用turbopackAnalyze执行生产构建级分析并返回耗时将next包内嵌的bundle-analyzer静态站点复制到.next/diagnostics/analyze写入data/routes.json若未指定output调用startServer基于serve-handler在localhost:port默认 4000启动静态服务器打印Bundle analyzer available at http://address后阻塞等待。开发该应用本身时next.config.mjs 有一个值得注意的配置开发模式下将/data/:path*重写代理到http://localhost:4000/data/:path*即从正在运行的next experimental-analyze服务器实时拉取分析数据调试 UI而构建发布时使用output: export导出纯静态站点到dist。此外构建脚本携带NEXT_TEST_NATIVE_IGNORE_LOCAL_INSTALLtrue环境变量表明它使用next包内置的原生二进制而非本地工作区安装。维护约定重要变更需同步更新 Demo 站点README 的 Updating 一节给出了一条明确的维护约定当落地非平凡non-trivial的改动时应考虑同步更新官方 demo 站点README 中附带了 demo 站点的 URL 与独立仓库地址此处不再重复外链。这说明 Bundle Analyzer 的 UI 迭代是以一个独立演示仓库为回归/展示基线的。小结Bundle Analyzer 是 Next.js 仓库中一个私有、构建期内嵌进next包的工具型 Next.js 应用服务于next experimental-analyze命令的交互式结果展示其数据协议由 TurbopackRust以JSON 头 CSR 边表的二进制格式产出TypeScript 端按需解析兼顾体积与查询效率功能面覆盖 Treemap 可视化、按路由下钻、import 依赖链、client/server 环境与 JS/CSS/JSON/Asset 类型过滤、文件搜索并支持--output离线产出与--port自定义端口相关关键文件README、数据解析、类型定义、路由与模块图、分析入口。适用前提说明analyze功能基于 Turbopack且分析的是生产构建源码日志提示 Analyzing a production build...在开发本仓库内的该应用需按 package.json 中的 scripts 执行并配合localhost:4000的数据服务。【免费下载链接】next.jsThe React Framework项目地址: https://gitcode.com/GitHub_Trending/next/next.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考