‹ 首页

bundle-size-optimization

@aj-geddes · 收录于 5 天前 · 上游提交 4 个月前

Reduce JavaScript and CSS bundle sizes through code splitting, tree shaking, and optimization techniques. Improve load times and overall application performance.

场景前端性能优化上线前检查

适合你，如果希望减少打包体积、加快应用加载速度

/ 下载安装
https://github.com/aj-geddes/useful-ai-prompts/tree/main/skills/bundle-size-optimization ↗
/ 通过 npx 安装 校验哈希
npx oh-my-skill add aj-geddes/useful-ai-prompts/bundle-size-optimization
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- aj-geddes/useful-ai-prompts/bundle-size-optimization
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify aj-geddes/useful-ai-prompts/bundle-size-optimization
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
300GitHub stars
~355最小装载
~1K含声明引用
~1.1K文本包总量
索引托管

怎么用

商店整理自技能原文 · 版本 3f5182c · 表述以原文为准
它做什么

当你需要优化项目中的 JavaScript 和 CSS 包大小时，Claude 会分析当前包的组成，找出最大的依赖，并推荐使用代码拆分、tree shaking 等方法来减小包大小，从而加快网页加载速度。

什么时候触发

当你提到“包大小分析”、“构建优化”、“页面加载慢”等关键词，或要求进行性能基线改进时触发。

装好后可以这样说
Claude会列出各模块大小并给出优化建议
Claude会讲解配置方法
Claude会建议代码拆分策略
技能原文 SKILL.md作者撰写 · MIT · 3f5182c

Bundle Size Optimization

Table of Contents
  • [Overview](#overview)
  • [When to Use](#when-to-use)
  • [Quick Start](#quick-start)
  • [Reference Guides](#reference-guides)
  • [Best Practices](#best-practices)
Overview

Smaller bundles download faster, parse faster, and execute faster, dramatically improving perceived performance especially on slower networks.

When to Use
  • Build process optimization
  • Bundle analysis before deployment
  • Performance baseline improvement
  • Mobile performance focus
  • After adding new dependencies
Quick Start

Minimal working example:

// 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)
Reference Guides

Detailed implementations in the references/ directory:

| Guide | Contents | |---|---| | [Bundle Analysis](references/bundle-analysis.md) | Bundle Analysis | | [Optimization Techniques](references/optimization-techniques.md) | Optimization Techniques | | [Implementation Strategy](references/implementation-strategy.md) | Implementation Strategy | | [Best Practices](references/best-practices.md) | Best Practices |

Best Practices
✅ DO
  • Follow established patterns and conventions
  • Write clean, maintainable code
  • Add appropriate documentation
  • Test thoroughly before deploying
❌ DON'T
  • Skip testing or validation
  • Ignore error handling
  • Hard-code configuration values
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…