Estoy trabajando en una aplicación de reacción heredada, por lo tanto, muchas piezas no se pueden razonar, sino que simplemente se aceptan.
Entonces, tengo un par de componentes que cargan muchas dependencias y obviamente no son importantes para el primer renderizado. Por lo tanto, probé lo siguiente:
const HeavyComp = lazy(() => import("HeavyComponent.jsx"); function Home() { return <div> <HeavyComp /> </div> } Como resultado de esto, HeavyComponent se carga como parte del paquete principal y solo es visible después de cargar ese componente. Esto ayuda al romper el tiempo de creación de scripts, pero FCP aún está lejos.
Entonces, probé lo siguiente:
function Home() { const [ heavyComponent. setHeavyComponent ] = useState(null); useEffect(() => { setHeavyComponent( lazy(() => import("HeavyComponent.jsx") ); }, []); return <div> { heavyComponent && <heavyComponent /> } </div> } Pensé que esto ayudaría, pero al igual que antes, FCP aún se retrasó hasta que se descargó, analizó y heavyComponent . Entonces, mi única opción era hacerlo asíncrono usando setTimeout o mejor requestIdleCallback .
¿Es esta la mejor solución o hay algo mejor?
Suponiendo que con FCP te refieres a "pintura de primer contenido". La mejor opción es usar el componente Suspense . Con él, puede agregar un componente de cargador alternativo ( <Spinner /> en este ejemplo).
import { Suspense, lazy } from 'react'; const HeavyComp = lazy(() => import("HeavyComponent.jsx"); function Home() { return <div> <Suspense fallback={<Spinner />}> <HeavyComp /> </Suspense> </div> }