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:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user