claude-code-templates 1.21.0 → 1.21.1

package/cli-tool/components/commands/nextjs-vercel/nextjs-bundle-analyzer.md

@@ -0,0 +1,406 @@
+---
+allowed-tools: Read, Edit, Bash
+argument-hint: [--build] [--analyze] [--report]
+description: Analyze and optimize Next.js bundle size with detailed recommendations
+model: sonnet
+---
+
+## Next.js Bundle Analyzer
+
+**Analysis Mode**: $ARGUMENTS
+
+## Current Project Analysis
+
+### Build Configuration
+- Next.js config: @next.config.js
+- Package.json: @package.json
+- TypeScript config: @tsconfig.json (if exists)
+- Build output: !`ls -la .next/ 2>/dev/null || echo "No build found"`
+
+### Dependencies Analysis
+- Production dependencies: !`npm list --prod --depth=0 2>/dev/null || echo "Run npm install first"`
+- Development dependencies: !`npm list --dev --depth=0 2>/dev/null || echo "Run npm install first"`
+- Package vulnerabilities: !`npm audit --audit-level=moderate 2>/dev/null || echo "No audit available"`
+
+## Bundle Analysis Setup
+
+### 1. Install Bundle Analyzer
+```bash
+# Install webpack-bundle-analyzer
+npm install --save-dev @next/bundle-analyzer
+
+# Or use built-in Next.js analyzer
+npm install --save-dev cross-env
+```
+
+### 2. Configure Next.js Bundle Analyzer
+```javascript
+// next.config.js
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Your existing config
+  experimental: {
+    optimizePackageImports: [
+      'lucide-react',
+      '@heroicons/react',
+      'date-fns',
+      'lodash',
+    ],
+  },
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    // Bundle analysis optimizations
+    if (!dev && !isServer) {
+      config.optimization.splitChunks = {
+        chunks: 'all',
+        cacheGroups: {
+          default: false,
+          vendors: false,
+          // Vendor chunk for common libraries
+          vendor: {
+            name: 'vendors',
+            chunks: 'all',
+            test: /node_modules/,
+            priority: 20,
+          },
+          // Common chunk for shared code
+          common: {
+            name: 'commons',
+            minChunks: 2,
+            chunks: 'all',
+            priority: 10,
+            reuseExistingChunk: true,
+            enforce: true,
+          },
+          // UI libraries chunk
+          ui: {
+            name: 'ui-libs',
+            chunks: 'all',
+            test: /node_modules\/(react|react-dom|@radix-ui|@headlessui)/,
+            priority: 15,
+          },
+          // Utility libraries chunk
+          utils: {
+            name: 'utils',
+            chunks: 'all',
+            test: /node_modules\/(lodash|date-fns|clsx|classnames)/,
+            priority: 15,
+          },
+        },
+      };
+    }
+
+    return config;
+  },
+};
+
+module.exports = withBundleAnalyzer(nextConfig);
+```
+
+### 3. Package.json Scripts
+```json
+{
+  "scripts": {
+    "analyze": "cross-env ANALYZE=true next build",
+    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
+    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
+    "build:analyze": "npm run build && npm run analyze"
+  }
+}
+```
+
+## Bundle Analysis Execution
+
+### 1. Generate Analysis Report
+```bash
+# Full bundle analysis
+ANALYZE=true npm run build
+
+# Server-side bundle analysis
+BUNDLE_ANALYZE=server npm run build
+
+# Client-side bundle analysis  
+BUNDLE_ANALYZE=browser npm run build
+
+# Production build with analysis
+npm run analyze
+```
+
+### 2. Bundle Size Check
+```bash
+# Check current bundle size
+ls -lah .next/static/chunks/ | head -20
+
+# Check bundle sizes with details
+find .next/static/chunks -name "*.js" -exec ls -lah {} \; | sort -k5 -hr
+
+# Gzipped size analysis
+find .next/static/chunks -name "*.js" -exec gzip -c {} \; | wc -c
+```
+
+## Bundle Analysis Results
+
+### 1. Bundle Size Breakdown
+Analyze the generated webpack-bundle-analyzer report for:
+
+#### Client Bundles
+- **Main bundle**: Core application code
+- **Framework bundle**: Next.js runtime and React
+- **Vendor bundles**: Third-party libraries
+- **Page bundles**: Individual page chunks
+- **Shared bundles**: Common code between pages
+
+#### Server Bundles
+- **API routes**: Server-side API handlers  
+- **Middleware**: Edge and server middleware
+- **Server components**: RSC bundles
+
+### 2. Size Thresholds and Recommendations
+```javascript
+// Bundle size thresholds
+const bundleThresholds = {
+  // First Load JS (critical)
+  firstLoadJS: {
+    warning: 200 * 1024, // 200KB
+    error: 300 * 1024,   // 300KB
+  },
+  // Individual chunks
+  chunk: {
+    warning: 150 * 1024, // 150KB
+    error: 250 * 1024,   // 250KB
+  },
+  // Total bundle size
+  total: {
+    warning: 1024 * 1024, // 1MB
+    error: 2048 * 1024,   // 2MB
+  }
+};
+```
+
+## Bundle Optimization Strategies
+
+### 1. Code Splitting Optimization
+```typescript
+// Dynamic imports for large components
+import dynamic from 'next/dynamic';
+
+const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
+  loading: () => <p>Loading...</p>,
+  ssr: false, // Disable SSR for client-only components
+});
+
+// Route-based code splitting
+const AdminDashboard = dynamic(() => import('./AdminDashboard'), {
+  loading: () => <DashboardSkeleton />,
+});
+
+// Conditional loading
+const ChartComponent = dynamic(
+  () => import('./ChartComponent'),
+  { 
+    ssr: false,
+    loading: () => <ChartSkeleton />
+  }
+);
+```
+
+### 2. Library Optimization
+```javascript
+// Optimize lodash imports
+// ❌ Imports entire lodash library
+import _ from 'lodash';
+
+// ✅ Import only needed functions
+import { debounce, throttle } from 'lodash';
+
+// ✅ Even better - use tree-shaking friendly alternatives
+import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';
+```
+
+```javascript
+// Date library optimization
+// ❌ Moment.js (large bundle)
+import moment from 'moment';
+
+// ✅ date-fns (tree-shakable)
+import { format, parseISO } from 'date-fns';
+
+// ✅ Day.js (smaller alternative)
+import dayjs from 'dayjs';
+```
+
+### 3. Next.js Specific Optimizations
+```javascript
+// next.config.js optimizations
+const nextConfig = {
+  // Optimize package imports
+  experimental: {
+    optimizePackageImports: [
+      'react-icons',
+      '@heroicons/react',
+      'lucide-react',
+      'date-fns',
+      'lodash',
+    ],
+  },
+  
+  // Tree shaking for CSS
+  experimental: {
+    optimizeCss: true,
+  },
+  
+  // Minimize client-side JavaScript
+  compiler: {
+    removeConsole: process.env.NODE_ENV === 'production',
+  },
+  
+  // Webpack optimizations
+  webpack: (config, { dev, isServer }) => {
+    if (!dev && !isServer) {
+      // Analyze bundle size
+      config.optimization.concatenateModules = true;
+      
+      // Enable compression
+      config.plugins.push(
+        new (require('compression-webpack-plugin'))({
+          algorithm: 'gzip',
+          test: /\.(js|css|html|svg)$/,
+          threshold: 8192,
+          minRatio: 0.8,
+        })
+      );
+    }
+    return config;
+  },
+};
+```
+
+### 4. Image Optimization
+```typescript
+// Next.js Image component with optimization
+import Image from 'next/image';
+
+// Optimize images with proper sizing
+<Image
+  src="/hero-image.jpg"
+  alt="Hero"
+  width={1200}
+  height={600}
+  priority={isAboveFold}
+  placeholder="blur"
+  blurDataURL="data:image/jpeg;base64,..."
+  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+/>
+```
+
+## Performance Impact Analysis
+
+### 1. Core Web Vitals Impact
+Analyze bundle size impact on:
+- **Largest Contentful Paint (LCP)**: Large bundles delay content rendering
+- **First Input Delay (FID)**: JavaScript blocking main thread
+- **Cumulative Layout Shift (CLS)**: Dynamic imports causing layout shifts
+
+### 2. Network Performance
+```javascript
+// Simulate network conditions for testing
+const networkConditions = {
+  'Fast 3G': { downloadThroughput: 1500, uploadThroughput: 750, latency: 562.5 },
+  'Slow 3G': { downloadThroughput: 500, uploadThroughput: 500, latency: 2000 },
+  'Offline': { downloadThroughput: 0, uploadThroughput: 0, latency: 0 }
+};
+```
+
+### 3. Bundle Loading Strategies
+```typescript
+// Preload critical chunks
+useEffect(() => {
+  // Preload likely next page
+  router.prefetch('/dashboard');
+  
+  // Preload critical components
+  import('./CriticalComponent');
+}, []);
+
+// Lazy load non-critical features
+const LazyFeature = lazy(() => 
+  import('./LazyFeature').then(module => ({
+    default: module.LazyFeature
+  }))
+);
+```
+
+## Optimization Recommendations
+
+### 1. Immediate Actions
+- **Remove unused dependencies**: Audit and remove packages not in use
+- **Optimize imports**: Use tree-shaking friendly import patterns
+- **Enable compression**: Configure gzip/brotli compression
+- **Minimize polyfills**: Use modern JavaScript features with targeted polyfills
+
+### 2. Medium-term Improvements
+- **Code splitting strategy**: Implement route and component-based splitting
+- **Library replacements**: Replace large libraries with smaller alternatives
+- **Bundle caching**: Implement long-term caching strategies
+- **Performance monitoring**: Set up bundle size monitoring in CI/CD
+
+### 3. Long-term Optimization
+- **Micro-frontends**: Consider architecture changes for large applications
+- **Edge computing**: Move computation closer to users
+- **Progressive enhancement**: Implement progressive loading strategies
+- **Performance budgets**: Establish and enforce bundle size budgets
+
+## Monitoring and Maintenance
+
+### 1. Automated Bundle Monitoring
+```yaml
+# GitHub Action for bundle monitoring
+name: Bundle Size Check
+on: [pull_request]
+
+jobs:
+  bundle-analysis:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - run: npm ci
+      - run: npm run build
+      - uses: nextjs-bundle-analysis/bundle-analyzer@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+```
+
+### 2. Performance Budgets
+```javascript
+// webpack.config.js performance budgets
+module.exports = {
+  performance: {
+    maxAssetSize: 250000, // 250KB
+    maxEntrypointSize: 350000, // 350KB
+    hints: 'error',
+  },
+};
+```
+
+### 3. Regular Audit Schedule
+- **Weekly**: Dependency updates and security audit
+- **Monthly**: Full bundle analysis and optimization review  
+- **Quarterly**: Architecture review and major optimizations
+
+## Analysis Report Generation
+
+Generate comprehensive report including:
+1. **Current Bundle Sizes**: Detailed breakdown by chunk type
+2. **Optimization Opportunities**: Specific recommendations with size impact
+3. **Performance Metrics**: Core Web Vitals impact analysis
+4. **Implementation Roadmap**: Prioritized optimization tasks
+5. **Monitoring Setup**: Tools and processes for ongoing monitoring
+
+Provide specific, actionable recommendations for immediate and long-term bundle optimization.