wehub-resource-sync
405 lines
10 KiB
Markdown
405 lines
10 KiB
Markdown
---
|
|
allowed-tools: Read, Edit, Bash
|
|
argument-hint: [--build] [--analyze] [--report]
|
|
description: Analyze and optimize Next.js bundle size with detailed recommendations
|
|
---
|
|
|
|
## 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. |