evo-nextjs-bundle-reduction
SkillDev toolsIdentifies and fixes bundle size issues including wildcard/barrel imports, missing dynamic imports for heavy components, unnecessary use client directives, and useEffect-based data fetching.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the evo-nextjs-bundle-reduction skill
What this skill tells your AI
The instructions your AI receives, as published by openlair/openskill in tasks-evolved/react-performance-debugging/environment/skills/evo-nextjs-bundle-reduction/SKILL.md and read by ahel’s review.
Reduces client bundle size by:
- Converting barrel lodash imports to individual module imports
- Applying next/dynamic for code splitting heavy components
- Minimizing 'use client' boundary scope
- Converting client-side useEffect fetches to server-side patterns
Key Patterns
Barrel Lodash Imports → Individual Imports
Anti-pattern:
import { groupBy, sortBy, meanBy } from 'lodash';
Fix:
import groupBy from 'lodash/groupBy';
import sortBy from 'lodash/sortBy';
import meanBy from 'lodash/meanBy';
Dynamic Import for Heavy Components
Anti-pattern: Static inline component using heavy library (mathjs)
Fix: Extract to separate file and use next/dynamic:
import dynamic from 'next/dynamic';
const AdvancedAnalysis = dynamic(() => import('@/components/AdvancedAnalysis'), {
ssr: false,
loading: () => <div data-testid="advanced-content">Loading...</div>
});
Usage
import sys
sys.path.insert(0, '/app/environment/skills/evo-nextjs-bundle-reduction/scripts')
from utils import fix_barrel_lodash_imports, extract_and_dynamify_component, apply_bundle_fixes
fix_barrel_lodash_imports('/app/src/app/compare/page.tsx')
extract_and_dynamify_component('/app/src/app/compare/page.tsx', 'AdvancedAnalysis')
Signals
- GitHub stars
- 89
- Forks
- 4
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
evo-nextjs-bundle-reduction- Source
- github.com/openlair/openskill