lazy-load-suggester

What This Skill Does

The lazy-load-suggester is a specialized developer tool designed to audit your codebase and identify components that are contributing to bloated bundle sizes. By scanning your project's import graph and component usage patterns, this agent intelligently flags heavy modules—such as modals, charts, complex data grids, and secondary pages—that are currently being loaded into the main bundle unnecessarily. It provides actionable insights and code transformation suggestions to help you implement dynamic imports, significantly improving your application's Time to Interactive (TTI) and overall performance score.

Installation

The tool is designed for seamless integration within your existing environment using the ClawHub ecosystem. Simply execute the following command in your terminal:

clawhub install openclaw/skills/skills/lxgicstudios/lazy-load-gen

Ensure you have Node.js 18 or higher installed on your machine. Because this tool utilizes AI to analyze your code structure, it requires an active OPENAI_API_KEY environment variable to be set in your current shell session. No global npm installation is required, as the tool is intended to be executed via npx for immediate, zero-config results.

Use Cases

• Bundle Optimization: Use this tool during post-development or refactoring phases to shrink your initial JavaScript payload for faster page loads.
• Performance Auditing: When Lighthouse or Web Vitals reports highlight a large main-thread blocking time, use the suggester to find candidates for code splitting.
• Legacy Codebases: Quickly identify modular components in a monolithic codebase that can be migrated to a lazy-loading pattern to improve user experience.
• Route Splitting: Automatically generate recommendations for lazy-loading entire page routes that users may not visit on their first session.

Example Prompts

1. "Analyze my ./src folder and tell me which three components are the best candidates for immediate lazy-loading to reduce my main bundle size."
2. "I am running into a slow initial load in my admin dashboard. Run the lazy-load-suggester on ./src/pages/admin and provide code snippets showing how to implement React.lazy for the identified heavy components."
3. "Show me a list of all components currently imported statically in my app that could be moved to dynamic imports without breaking my site's layout."

Tips & Limitations

• Prioritize Below-the-Fold: Focus on lazy-loading components that are not visible upon initial page load (e.g., footers, deep-nested tabs, or complex settings panels).
• Avoid Over-Splitting: While splitting is great, splitting too many tiny components can lead to a 'waterfall' of network requests. Use this tool as a guide, not an absolute rule.
• Critical Path: Never lazy-load components required for the 'Above-the-Fold' user experience, as this will cause visible layout shifts or a blank screen on load.
• Dependencies: The tool relies on static analysis of your imports; if your codebase uses highly dynamic or obfuscated imports, the suggester may require manual verification of the suggested changes.