bundle-optimization

用途

该技能专注于 JavaScript 打包体积的分析与优化，帮助开发者识别打包中的性能问题，检测未使用代码，并监控性能预算。它适用于需要控制前端资源体积、提升加载性能的项目，尤其是基于 Next.js 和 webpack 构建的应用。

主要能力

• 完整打包分析：通过 npm run analyze 生成可视化报告，展示分块大小、依赖关系和代码分割效果。
• 优化检查与报告：提供 npm run bundle-optimization:check 快速检查，npm run bundle-optimization:analyze 详细分析，以及 npm run bundle-optimization:report 生成报告文件。
• 特定库分析：支持对 Recharts 等库进行单独分析，例如 npm run analyze:recharts，以及验证导入的 npm run verify:recharts-imports。
• 性能预算监控：内置预算限制，包括首次加载 JS 小于 128KB（警告阈值 100KB）、总打包体积小于 500KB（警告 400KB）、CSS 体积小于 50KB（警告 40KB）、分块数量小于 20（警告 15）。预算配置位于 performance-budgets.config.js、src/lib/optimization/performance-budget-monitor.ts 和 .github/workflows/performance-budgets.yml。
• 代码分割分析：检查 next.config.js 中的 splitChunks 配置，确保 Framer Motion、Swiper、Recharts、React Query、Redux 等库被分割到异步块中，并设置合适的 maxSize。

使用方式

1. 运行分析：执行 npm run analyze 打开交互式打包分析器。
2. 审查报告：关注大于 150KB 的大块、重复代码、未使用代码和代码分割效果。
3. 识别问题：查找超过 50KB 的重型依赖、跨块重复模块、缺失代码分割的大型初始块、未使用的导入。
4. 实施优化：根据发现采取懒加载重型组件（使用 dynamic() 导入）、模块化导入（如 import debounce from 'lodash-es/debounce'）、移除未使用依赖（npx depcheck 和 npm uninstall）、配置 webpack splitChunks 等策略。

适用场景

• 前端项目打包体积过大，需要定位和优化。
• 需要持续监控性能预算，防止体积膨胀。
• 使用 Next.js 和 webpack 的项目，希望优化代码分割和懒加载。
• 需要分析特定库（如 Recharts）的打包影响。

限制

• 该技能主要针对 JavaScript 打包，不涉及其他类型的性能优化。
• 性能预算的具体数值和配置依赖于项目自身的配置文件，不同项目可能不同。
• 优化策略需要结合项目实际情况调整，并非所有建议都适用于每个项目。
• 部分命令和配置细节（如 next.config.js 的具体内容）需参考项目文件，本介绍未提供完整代码。