用途
ln-832-bundle-optimizer 用于减小 JavaScript 或 TypeScript 项目的打包体积,采用 keep/discard(保留/丢弃)验证机制。仅适用于 JS/TS 项目。
主要能力
该技能围绕以下优化类别展开:
- 移除未使用依赖:通过 depcheck 或同类工具找出未被任何地方导入的包,典型节省约 10-50KB/包。
- 改进 tree-shaking 与导入方式:例如将 lodash 改为 lodash-es 命名导入,典型节省约 50-200KB。
- 替换重型库:用更轻量的日期或工具库替代重型库,典型节省约 50-300KB。
- 引入代码分割:对重型组件使用动态导入(懒加载),降低初始 bundle 体积。
- CSS 优化:移除未使用 CSS 并压缩,典型节省约 10-100KB。
使用方式
工作流分为五个阶段:
- 预检(Pre-flight):检查 package.json 是否存在、构建命令是否可用、输出目录(dist/ 或 build/)是否可检测、工作区基线是否安全。任一必需项缺失则阻止优化。
- 建立基线(Baseline):运行检测到的构建命令,测量输出目录总大小(排除 source map),记录基线字节数与各 chunk 大小。
- 分析机会(Analyze):使用 depcheck 检测未使用依赖,使用 bundle analyzer 分析打包组成,手动扫描 tree-shaking 缺口,分析路由以寻找代码分割候选。
- 优化循环(Optimize Loop):对每项优化依次执行——应用改动、构建、测量新体积、仅当体积小于当前基线时保留、记录结果。优化顺序为:移除未使用依赖 → 改进 tree-shaking 与导入 → 替换重型库 → 引入代码分割 → 优化 CSS。停止条件包括:所有优化处理完毕、连续 3 次丢弃(进入平台期)、构建基础设施损坏(回退到上次保留并停止)、bundle 已低于目标。
- 报告结果(Report):输出项目路径、基线字节数、最终字节数、节省字节数、减少百分比、已应用优化数、已丢弃优化数及原因、移除的依赖列表、每项优化的节省明细,以及持久化报告路径(如已写入)。
配置选项包括:build_command(自动检测)、output_dir(自动检测)、run_depcheck、run_bundle_analyzer、remove_unused_deps、fix_tree_shaking、replace_heavy_libraries、enable_code_splitting。
适用场景
适用于需要优化前端打包体积的 JS/TS 项目,尤其是存在未使用依赖、tree-shaking 不充分、重型库、缺少代码分割或 CSS 冗余的情况。
限制
- 仅支持 JS/TS 项目。
- 需要 package.json 和可用的构建命令,否则阻止优化。
- 需要可检测的输出目录(dist/ 或 build/)。
- 若分析器工具不可用,则退回到手动检查。
- 构建失败或未减小体积的优化会被丢弃并回退。
- 关于收费、价格、平台支持等具体信息暂未提供。