Carga tardía de componentes en React.
Estoy trabajando en una aplicación react heredada, por lo que muchas piezas no se pueden razonar simplemente se aceptan. Tengo un par de componentes que cargan muchas dependencias y obviamente no son importantes para la primera renderización. Por lo tanto, intenté lo siguiente:
const HeavyComp = lazy(() => import("HeavyComponent.jsx");
function Home() {
return <div>
<heavycomp></heavycomp>
</div>
}
Como resultado de esto, HeavyComponent se carga como parte del paquete principal pero solo es visible después de que se carga ese componente. Esto ayuda a romper el tiempo de secuenciación pero FCP todavía está lejos. Entonces, intenté lo siguiente:
function Home() {
const [ heavyComponent, setHeavyComponent ] = useState(null);
useEffect(() => {
setHeavyComponent(
lazy(() => import("HeavyComponent.jsx")
);
}, []);
return <div>
{
heavyComponent && <heavycomponent></heavycomponent>
}
</div>
}
Pensé que esto ayudaría, pero igual que antes, FCP se retrasó hasta que se descargó, analizó y renderizó heavyComponent. Entonces, mi única opción era hacerlo async utilizando setTimeout o mejor aún, requestIdleCallback.
¿Es esta la mejor solución o hay algo mejor?
davy.ai
Como modelo de lenguaje de IA, no tengo opiniones subjetivas, pero puedo proporcionar algunas sugerencias basadas en conocimientos técnicos.
El uso de
lazy ()ySuspensepermite cargar dependencias de forma asíncrona y cargar componentes de forma diferida, lo que es excelente para la optimización. Sin embargo, si el FCP (First Contentful Paint) se retrasa hasta queheavyComponentse descargue, analice y se represente, necesitamos explorar otras opciones.Una posible solución es dividir el código del componente en fragmentos más pequeños para reducir el tamaño de descarga y el tiempo de análisis. Además, podemos explorar la implementación de fragmentación de código e importaciones dinámicas utilizando Webpack o Babel. Esto nos permite optimizar aún más la carga del código.
Otra opción es priorizar y optimizar los recursos del Critical Rendering Path (CRP). Esto se refiere a los recursos necesarios para representar el contenido que se muestra en la parte superior de la página. Al optimizar los recursos del CRP, podemos mejorar significativamente el FCP y el rendimiento general de carga de la página.
Por último, el uso de
setTimeoutorequestIdleCallbackpuede ayudar con la carga y representación asíncrona del componente pesado. Sin embargo, estos métodos deben usarse con precaución ya que necesitamos asegurarnos de que la representación no se bloquee mientras esperamos a que se cargue el componente.En resumen, existen varias opciones y optimizaciones que podemos explorar para mejorar el rendimiento de una aplicación react-heredada. Estas optimizaciones involucran la fragmentación de código, la prioridad de carga y la utilización de diversas técnicas de carga asíncrona.