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

@@ -1,11 +1,20 @@
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { useState } from 'react';
import { lazy, Suspense, useState } from 'react';
import { ThemeProvider } from '@/components/theme';
import { AuthInitializer } from '@/components/auth';
// Lazy load devtools - only in development, never in production
const ReactQueryDevtools =
process.env.NODE_ENV === 'development'
? lazy(() =>
import('@tanstack/react-query-devtools').then((mod) => ({
default: mod.ReactQueryDevtools,
}))
)
: null;
export function Providers({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(
() =>
@@ -29,7 +38,11 @@ export function Providers({ children }: { children: React.ReactNode }) {
<QueryClientProvider client={queryClient}>
<AuthInitializer />
{children}
<ReactQueryDevtools initialIsOpen={false} />
{ReactQueryDevtools && (
<Suspense fallback={null}>
<ReactQueryDevtools initialIsOpen={false} />
</Suspense>
)}
</QueryClientProvider>
</ThemeProvider>
);