Tree Shaking 的首屏体积缩减效果必须通过构建产物精确对比量化：固定环境、提取首屏关键 JS、比对 gzip 前后字节数，并关联 FMP/LCP 性能指标验证真实收益。
Tree Shaking 的首屏体积缩减效果不能靠估算，必须通过构建产物的精确对比来量化。核心方法是：固定构建环境、提取关键 JS 文件、比对压缩后字节差异，并关联到实际加载指标。
明确对比基准：生产模式下开启/关闭 Tree Shaking
Webpack 默认在 mode: 'production' 下启用 Tree Shaking，但它的生效依赖完整条件（如 ES6 模块语法、无副作用声明干扰）。要真实评估效果，需人为构造“关闭”状态作为对照：
- 将项目临时改为 mode: 'development' 并手动添加
TerserPlugin压缩（仅压缩，不摇树） - 或保留 production 模式，但在
package.json中设 "sideEffects": true（强制禁用摇树） - 确保两次构建使用完全相同的源码、依赖版本、插件配置，仅变动 Tree Shaking 相关开关
聚焦首屏关键产物：识别并提取真正参与首屏渲染的 chunk
首屏体积 ≠ 整个 bundle.js。应定位实际由 HTML <script></script> 标签加载、且在 LCP（最大内容绘制）前执行的 JS 文件：
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
- 查看构建输出目录中带
-main.、-entry.或app.等命名的 chunk（Next.js 是main-app.js，Vue CLI 是js/app.xxx.js） - 用
webpack-bundle-analyzer可视化依赖图，过滤出被entry直接或间接引用的模块 - 排除
vendor、polyfill、runtime等非业务逻辑 chunk（它们不受 Tree Shaking 影响）
用字节数 + gzip 后大小双维度衡量缩减量
浏览器传输的是 gzip 压缩后的资源，所以必须对比 gzip 后体积 才反映真实网络收益：
- 用
gzip-size工具快速计算：npx gzip-size dist/js/app.xxx.js - 记录开启 Tree Shaking 前后的 gzip 大小，例如：从 142 KB → 98 KB，缩减 44 KB（-31%）
- 同步记录未压缩体积变化（如 410 KB → 275 KB），用于判断是否真有代码被剔除，而非仅压缩率提升
关联首屏性能指标验证实际收益
体积缩减最终要落到用户可感知的加载体验上。建议在本地模拟弱网（如 Chrome DevTools 的 “Slow 3G”）下实测：
- 对比两次构建产物在相同环境下的 FMP（首次有意义绘制） 和 LCP 时间差
- 若体积减少 40 KB，LCP 缩短约 120–250 ms（按 2G/3G 典型下载速度 0.3–0.6 MB/s 估算）
- 注意排除缓存干扰：每次测试前清空浏览器缓存并禁用 HTTP 缓存（Network 面板勾选 Disable cache）
