perf: eliminate next-themes and framer-motion from initial JS bundle
- Replace next-themes (38 KiB) with a tiny custom ThemeProvider (~< 1 KiB) using localStorage + classList.toggle for theme management - Add FOUC-prevention inline script in layout.tsx to apply saved theme before React hydrates - Remove framer-motion from Header.tsx: nav entry now uses CSS slideDown keyframe, mobile menu uses CSS opacity/translate transitions - Remove framer-motion from ThemeToggle.tsx: use Tailwind hover/active scale - Remove framer-motion from legal-notice and privacy-policy pages - Update useTheme import in ThemeToggle to use custom ThemeProvider - Add slideDown keyframe to tailwind.config.ts - Update tests to mock custom ThemeProvider instead of next-themes Result: framer-motion moves from "First Load JS shared by all" to lazy chunks; next-themes chunk eliminated entirely; -38 KiB from initial bundle Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -25,10 +25,10 @@ describe('Header', () => {
|
||||
render(<Header />);
|
||||
expect(screen.getByText('dk')).toBeInTheDocument();
|
||||
|
||||
// Check for navigation links
|
||||
expect(screen.getByText('Home')).toBeInTheDocument();
|
||||
expect(screen.getByText('About')).toBeInTheDocument();
|
||||
expect(screen.getByText('Projects')).toBeInTheDocument();
|
||||
expect(screen.getByText('Contact')).toBeInTheDocument();
|
||||
// Check for navigation links (appear in both desktop and mobile menus)
|
||||
expect(screen.getAllByText('Home').length).toBeGreaterThan(0);
|
||||
expect(screen.getAllByText('About').length).toBeGreaterThan(0);
|
||||
expect(screen.getAllByText('Projects').length).toBeGreaterThan(0);
|
||||
expect(screen.getAllByText('Contact').length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user