perf: optimize frontend bundle - reduce main chunk 77%

- vite.config: separate lucide-react icons + analytics into own chunks
- App.tsx: defer SiteAssistant loading via requestIdleCallback
- HeroUploadZone: lazy-load ToolSelectorModal + dynamic import fileRouting
- HeroUploadZone: add aria-label on dropzone input (accessibility)
- SocialProofStrip: defer API call until component is in viewport
- index.html: remove dev-only modulepreload hint

Main bundle: 266KB -> 61KB (-77%)
This commit is contained in:
Your Name
2026-04-04 22:36:45 +02:00
parent 7e9edc2992
commit 7928e688d5
5 changed files with 63 additions and 18 deletions

View File

@@ -1,4 +1,4 @@
import { lazy, Suspense, useEffect } from 'react';
import { lazy, Suspense, useEffect, useState } from 'react';
import Clarity from '@microsoft/clarity';
import { Routes, Route, useLocation } from 'react-router-dom';
import { Toaster } from 'sonner';
@@ -48,6 +48,19 @@ function LoadingFallback() {
);
}
function IdleLoad({ children }: { children: React.ReactNode }) {
const [ready, setReady] = useState(false);
useEffect(() => {
if ('requestIdleCallback' in window) {
const id = requestIdleCallback(() => setReady(true));
return () => cancelIdleCallback(id);
}
const id = setTimeout(() => setReady(true), 2000);
return () => clearTimeout(id);
}, []);
return ready ? <>{children}</> : null;
}
export default function App() {
useDirection();
const location = useLocation();
@@ -152,7 +165,9 @@ export default function App() {
<Footer />
<Suspense fallback={null}>
<SiteAssistant />
<IdleLoad>
<SiteAssistant />
</IdleLoad>
<CookieConsent />
</Suspense>
<Toaster