前端包体积治理（Tree Shaking、Code Split 与 SideEffects）

前端包体积治理（Tree Shaking、Code Split 与 SideEffects）概述合理的模块组织与构建配置可显著降低首次加载体积并改善 LCP。关键实践与参数Tree Shaking：ESM 导出与纯函数；`package.json#sideEffects` 正确标注。Code Split：按路由与组件层级使用 `import()` 动态导入，控制并发与优先级。构建分析：使用 `webpack-bundle-analyzer`/`rollup-plugin-visualizer` 定位大依赖与重复。验证方法比对构建前后体积与请求数；Lighthouse 指标改善。RUM 统计真实用户的 LCP/TBT 变化；评估长尾资源影响。监控缓存命中与重复依赖比重，修正依赖版本锁定策略。注意事项动态导入需配合预取/预加载与路由重要性；避免破坏交互连续性。SideEffects 标注错误会导致功能被摇掉；需单测与可视化验证。依赖版本锁定与去重，避免多个副本混用。