Performance Optimization
🤖 AI Summary
Dynamically imports React page components using `lazy()` and `Suspense` to enable route-level code splitting, reducing initial bundle size and improving load times.
How to Install
Claude Code:
git clone --depth 1 https://github.com/rohitg00/awesome-claude-code-toolkit.git && cp awesome-claude-code-toolkit/skills/performance-optimization ~/.claude/skills/SKILL.md -r// Dynamic import for route-level code splitting const Dashboard = lazy(() => import("./pages/Dashboard")); const Settings = lazy(() => import("./pages/Settings")); function App() {
Details
| Category | Coding → generation |
| Source | rohitg00/awesome-claude-code-toolkit |
| SKILL.md | View on GitHub → |
| Repo Stars | ★ 2.2K |
| Est. per Skill | 54 (shared across 40 skills from this repo) |
| Difficulty | Advanced |
| Risk Level | N/A |
Related Skills
fp-pipe-ref
pipe & flow Quick Reference pipe - Transform a Value import { pipe } from 'fp-ts/function' // pi
react-flow-architect
ReactFlow Architect Build production-ready ReactFlow applications with hierarchical navigation, perf
threejs-materials
Three.js Materials Quick Start import as THREE from "three"; // PBR material (recommended
n8n-code-javascript
JavaScript Code Node Expert guidance for writing JavaScript code in n8n Code nodes. --- Quick Start
Works Well With
Skills from the same repository — often designed to work together