什么是 延时加载分析器？

延时加载分析器是一款高性能实用工具，旨在解决 JavaScript 包过于臃肿的问题。该工具通过利用 AI 扫描您的源代码，识别出不需要包含在初始有效负载中的组件，例如首屏以下元素或特定路由模块。对于使用 Openclaw Skills 框架且希望改善核心 Web 指标（Core Web Vitals）并提供更快用户体验的开发者来说，此技能至关重要。

与容易出错且耗时的手动代码分割不同，该工具在何处实施动态导入方面提供了精准建议。它通过提供零配置分析，完美适配 React 和 Next.js 等现代框架，架起了开发与性能工程之间的桥梁。

下载入口:https://github.com/openclaw/skills/tree/main/skills/lxgicstudios/lazy-loader

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

延时加载分析器 应用场景

• 当您的初始包体积（gzip 压缩后）超过 200KB 且影响 SEO 排名时。
• 解决 Lighthouse 审核警告，如“减少未使用的 JavaScript”或“最小化主线程工作”。
• 扩展大型应用程序，此时手动跟踪组件依赖关系已不再可行。
• 在重大遗留前端代码重构期间提高可交互时间 (TTI)。

1. 该工具解析您项目的组件导入并构建全面的依赖图。
2. 它会识别条件渲染、由用户交互触发或位于初始视口下方的组件。
3. AI 模型评估每个组件，以确定延时加载带来的性能提升是否超过其架构复杂性。
4. 系统提供详细报告，包括实施步骤、建议的 Suspense 边界以及估计的包体积影响。

延时加载分析器 配置指南

该工具专为零配置使用而设计，不需要永久安装。请确保您已安装 Node.js 18+。您可以直接从终端运行分析：

npx ai-lazy-load ./src

对于特定框架的分析，请使用专用标志：

npx ai-lazy-load ./src --framework next

延时加载分析器 数据架构与分类体系

延时加载分析器根据以下数据点将其发现整理成结构化报告：

name: lazy-loader
description: Identify components that should be lazy loaded using AI. Use when optimizing bundle size and initial load.

Lazy Load Analyzer

Your bundle is huge and your initial load is slow. This tool finds components that should be dynamically imported and tells you exactly how to split them. Stop shipping the entire app on first load.

One command. Zero config. Just works.

Quick Start

npx ai-lazy-load ./src

What It Does

• Analyzes your component tree for lazy loading opportunities
• Identifies below-the-fold components that don't need immediate loading
• Finds route-based splits for Next.js and React Router
• Suggests React.lazy() implementations with Suspense boundaries
• Estimates bundle size impact for each suggestion

Usage Examples

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

# Focus on pages/routes
npx ai-lazy-load ./src/pages --routes-only

# Show bundle impact estimates
npx ai-lazy-load ./src --with-sizes

# Generate ready-to-use code
npx ai-lazy-load ./src --generate-code

# Next.js specific analysis
npx ai-lazy-load ./src --framework next

Best Practices

• Don't lazy load everything - Above-the-fold components should load immediately
• Group related components - Lazy load a feature module, not individual buttons
• Add proper loading states - Every Suspense boundary needs a fallback
• Measure the difference - Check your bundle analyzer before and after

When to Use This

• Initial bundle size is over 200KB gzipped
• Lighthouse says "reduce unused JavaScript"
• Adding features and worried about bloat
• Refactoring an app to improve TTI

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:

• GitHub: https://github.com/LXGIC-Studios
• Twitter: https://x.com/lxgicstudios
• Substack: https://lxgicstudios.substack.com
• Website: https://lxgic.dev

Requirements

No install needed. Just run with npx. Node.js 18+ recommended.

npx ai-lazy-load --help

How It Works

The tool parses your component imports and builds a dependency graph. It identifies components that are conditionally rendered, below viewport, or behind user interactions. AI evaluates which splits give you the best performance gains with minimal complexity.

License

MIT. Free forever. Use it however you want.