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