界面已本地化;技能介绍与说明文档按所选语言由 AI 自动翻译,代码、命令、路径和专业术语保留原文,以原作者文档为准。
探索技能
效率与协作 · SKILL.md

lazy-load-suggester

lazy-load-suggester

【效率与协作】Identify components that should be lazy loaded. Use when optimizing bundle size.

独立 GitHub 快照 · 自动分类 · 以原作者文档为准

技能说明

GitHub

name: lazy-load-suggester description: Identify components that should be lazy loaded. Use when optimizing bundle size.

Lazy Load Suggester

Not everything needs to load on first paint. This tool analyzes your components and tells you which ones should be lazy loaded for better performance.

One command. Zero config. Just works.

Quick Start

npx ai-lazy-load ./src/

What It Does

  • Analyzes your component usage patterns
  • Identifies heavy components that load upfront
  • Suggests lazy loading candidates
  • Provides code examples for implementation

Usage Examples

# Analyze all components
npx ai-lazy-load ./src/

# Focus on specific directory
npx ai-lazy-load ./src/components/

# Include pages
npx ai-lazy-load ./src/pages/

Best Practices

  • Lazy load routes - users don't need all pages at once
  • Heavy components - modals, charts, editors
  • Below the fold - content users scroll to
  • Keep critical path small - load what's visible first

When to Use This

  • Initial bundle is too large
  • Time to interactive is slow
  • Adding code splitting to existing app
  • Optimizing specific user flows

Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

Find more:

Requirements

No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable.

npx ai-lazy-load --help

How It Works

Scans your components to understand import relationships and component sizes. The AI identifies components that aren't needed immediately and would benefit from lazy loading.

License

MIT. Free forever. Use it however you want.

我的收藏