---
description: Analyze and reduce JS bundle
---
1. **Analyze Bundle**:
// turbo
- Run
// turbo
- Run
2. **Replace Heavy Libraries**:
- moment.js → date-fns
- lodash → Native JS
3. **Use Dynamic Imports**:
4. **Pro Tips**:
- Aim for <200KB initial bundle.
- Use
description: Analyze and reduce JS bundle
---
1. **Analyze Bundle**:
// turbo
- Run
npm install @next/bundle-analyzer// turbo
- Run
ANALYZE=true npm run build2. **Replace Heavy Libraries**:
- moment.js → date-fns
- lodash → Native JS
3. **Use Dynamic Imports**:
const Chart = dynamic(() => import('@/components/Chart'), {
ssr: false
});4. **Pro Tips**:
- Aim for <200KB initial bundle.
- Use
npm dedupe.By Antigravity Team
How to Use This Workflow
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/workflows/ - Save the file as
reduce-javascript-bundle-size-optimization.md - In Antigravity, type
/reduce_javascript_bundle_size_optimizationor just describe what you want to do
Related Workflows
Optimize Images for Web
PerformanceImagesOptimization+1
--- description: Compress and serve images in modern formats for faster loading --- 1. **Use Next.js Image Component**: - Automatic optimization and lazy loading. ```tsx import Image from 'next/image'; <Image src="/hero.jpg" alt="Hero" width={1200} height={600} ...
Implement Request Deduplication
PerformanceAPIReact+1
--- description: Prevent duplicate API calls in React components --- 1. **Next.js 15 Fetch Caching**: - **Change:** `fetch` requests are no longer cached by default in `GET` handlers or Server Components unless configured. - **Fix:** Explicitly set `cache: 'force-cache'` if you want caching. ...
Setup Redis Caching
BackendCachingPerformance+1
--- description: Implement Redis caching (Upstash or self-hosted) --- 1. **Option A: Upstash Redis (Serverless Recommended)**: - Best for Vercel/Edge environments. // turbo - Run `npm install @upstash/redis` ```ts import { Redis } from '@upstash/redis'; const redis = new Redis...
Recommended Rules
View more rules →⚡ Performance Optimization Agent - Speed Expert
Agentic AIPerformanceOptimization
You are an expert performance optimization agent specialized in identifying and fixing performance bottlenecks. Apply systematic reasoning to measure,...
Web Performance Optimization Expert
PerformanceWeb VitalsOptimization
You are an expert in web performance optimization and Core Web Vitals. Key Principles: - Optimize for Core Web Vitals - Minimize Time to First Byte (...
Next.js Performance Optimization
Next.jsPerformanceOptimization
You are an expert in Next.js performance optimization. Key Principles: - Optimize images and fonts - Minimize client-side JavaScript - Use proper cac...
