UD5工具箱
stats.json
Webpack 编译后生成的打包统计文件，包含模块依赖图、chunk 划分、资源大小、编译耗时等完整信息。通过 npx webpack --json > stats.json 命令生成，是本工具的核心输入数据源。stats.json 的数据完整性直接影响分析结果的准确性。
Module（模块）
Webpack 构建中的最小处理单元，可以是 JavaScript 文件、CSS 文件、图片或其他资源。每个模块都会被解析、转换和打包，其大小直接影响最终产物体积。在本工具的表格和 Treemap 中，模块是最主要的展示对象。
Chunk（代码块）
Webpack 将模块分组打包后生成的代码块，是最终输出的 bundle 文件的基础。一个 chunk 可能包含多个模块，通过 splitChunks 配置可以控制 chunk 的拆分策略。本工具的统计信息中展示 Chunks 数量，帮助了解代码拆分情况。
Treemap（矩形树图）
一种数据可视化方式，将层级数据以嵌套矩形展示，面积与数据值成正比。在本工具中，Treemap 将模块按目录层级展示，大面积矩形直观反映体积最大的模块或目录，帮助快速定位优化目标。
Tree Shaking（摇树优化）
Webpack 移除未使用导出代码的优化技术，依赖 ES Module 的静态导入特性。通过分析 stats.json 中的模块大小，可以判断 Tree Shaking 是否生效，例如整个 lodash 库被引入而非按需导入的 lodash-es，说明存在优化空间。
Code Splitting（代码分割）
将代码拆分成多个 chunk 的技术，实现按需加载和缓存优化。通过动态 import() 和 splitChunks 配置可以实现路由级拆分和公共依赖提取。分析 stats.json 中各 chunk 的组成有助于验证代码分割策略的效果。
Externals（外部依赖）
告诉 Webpack 某些模块不需要打包到产物中，而是从外部获取（如通过 CDN 引入）。将大型库（如 React、Vue）配置为 externals 可以显著减小打包体积，是生产环境优化的常用策略之一。
splitChunks
Webpack 的代码分割配置项，用于控制如何将公共模块提取到独立的 chunk 中。合理的 splitChunks 配置可以避免同一模块被重复打包到多个 chunk，减少总体积并提升缓存命中率。通过分析 stats.json 可以验证配置效果。
Bundle Size（打包体积）
Webpack 构建产物的总文件大小，是衡量打包优化效果的核心指标。本工具统计的总模块大小帮助开发者了解所有模块的体积总和，是制定优化策略的重要参考数据。
Production Mode（生产模式）
Webpack 的 --mode production 编译模式，会自动启用 Tree Shaking、代码压缩、作用域提升等优化。建议始终使用生产模式生成 stats.json 进行分析，确保结果反映真实部署环境的打包情况。