mcpField
B
bundle-size-optimization

bundle-size-optimization

github.com/aj-geddes开发373563 次安装34 周前更新
代码仓库

关于 bundle-size-optimization

面向构建与性能优化的开发技能，介绍如何分析并缩减 JavaScript 包体积。提供包分析、优化技术和实施策略的参考指南。

主要功能

  1. 01分析包的组成
  2. 02包体积优化技术
  3. 03实施策略指导
  4. 04部署前分析指导

适用场景

  1. 01部署前检查包体积
  2. 02改善移动端性能
  3. 03评估新增依赖的影响

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill bundle-size-optimization

安装后在 Claude Code 中输入/bundle-size-optimization确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
best-practices.md
bundle-analysis.md
implementation-strategy.md
optimization-techniques.md
templates/
component-template.tsx

详细介绍

包体积优化

目录

概述

更小的包体积可以加快下载、解析和执行速度，显著提升感知性能，尤其是在较慢的网络环境下。

适用场景

  • 优化构建流程
  • 部署前分析包体积
  • 改善性能基线
  • 关注移动端性能
  • 添加新依赖后

快速入门

最简可运行示例：

// Analyze bundle composition

class BundleAnalysis {
  analyzeBundle() {
    return {
      tools: [
        "webpack-bundle-analyzer",
        "Source Map Explorer",
        "Bundle Buddy",
        "Bundlephobia",
      ],
      metrics: {
        total_size: "850KB gzipped",
        main_js: "450KB",
        main_css: "120KB",
        vendor: "250KB",
        largest_lib: "moment.js (67KB)",
      },
      breakdown: {
        react: "85KB (10%)",
        lodash: "45KB (5%)",
        moment: "67KB (8%)",
        other: "653KB (77%)",
      },
    };
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
包体积分析包体积分析
优化技术优化技术
实施策略实施策略
最佳实践最佳实践

最佳实践

✅ 应该做
  • 遵循既定模式和约定
  • 编写整洁、易维护的代码
  • 添加适当的文档
  • 部署前进行全面测试
❌ 不要做
  • 跳过测试或验证
  • 忽略错误处理
  • 将配置值硬编码

评论

支持 Markdown