Performance optimizations: Bundle size reduction

Optimizations implemented:
1. Font display: swap + preload for critical fonts
2. ReactQueryDevtools: Lazy load in dev only, exclude from production
3. Auth forms code splitting: LoginForm, PasswordResetRequestForm
4. Remove invalid swcMinify option (default in Next.js 15)

Results:
- Login page: 178 kB → 104 kB (74 kB saved, 42% reduction)
- Password reset: 178 kB → 104 kB (74 kB saved, 42% reduction)
- Homepage: 108 kB (baseline 102 kB shared + 6 kB page)

Remaining issue:
- 102 kB baseline shared by all pages (React Query + Auth loaded globally)
This commit is contained in:
2025-11-02 16:16:13 +01:00
parent 911d4a594e
commit 1b9854d412
8 changed files with 5163 additions and 7 deletions

View File

@@ -5,7 +5,22 @@
'use client';
import { PasswordResetRequestForm } from '@/components/auth/PasswordResetRequestForm';
import dynamic from 'next/dynamic';
// Code-split PasswordResetRequestForm
const PasswordResetRequestForm = dynamic(
() => import('@/components/auth/PasswordResetRequestForm').then((mod) => ({
default: mod.PasswordResetRequestForm
})),
{
loading: () => (
<div className="space-y-4">
<div className="animate-pulse h-10 bg-muted rounded" />
<div className="animate-pulse h-10 bg-primary/20 rounded" />
</div>
),
}
);
export default function PasswordResetPage() {
return (
@@ -14,7 +29,7 @@ export default function PasswordResetPage() {
<h2 className="text-3xl font-bold tracking-tight">
Reset your password
</h2>
<p className="mt-2 text-sm text-muted-foreground">
<p className="mt-2 text-muted-foreground">
We&apos;ll send you an email with instructions to reset your password
</p>
</div>