Code Splitting
0 recomendaciones268 vistas
El code splitting es una técnica que permite dividir el código de una aplicación en diferentes fragmentos que se cargan bajo demanda, mejorando así el rendimiento y la experiencia del usuario. Webpack facilita este proceso al analizar las importaciones y crear chunks específicos. Se recomienda usarlo para archivos pesados o temporales y en rutas específicas.
Code Splitting
- 2. @EDERNEGRETE_ CODE SPLITTING ▸ ¿Qué es? ▸ ¿Por qué usarlo? ▸ ¿Cómo funciona por dentro? ▸ Patrones ▸ ¿Cuándo usarlo? ▸ ¿Por dónde empiezo?
- 4. CODE SPLITTING ES EL PROCESO DE DIVIDIR TU CÓDIGO EN DIFERENTES CHUNKS QUE PUEDEN SER LLAMADOS CUANDO QUIERAS (EN EL BUILD TIME) Documentación Webpack @EDERNEGRETE_
- 6. LLAMAR PIEZAS DE CÓDIGO CUANDO SE USAN Y NO MANDAR TODO AL CLIENTE DE GOLPE @EDERNEGRETE_
- 10. @EDERNEGRETE_ ¿POR QUÉ USARLO? ▸ Mejora el performance de nuestra app ▸ Menor tiempo de carga inicial ▸ Mejor experiencia de usuario ▸ Mejorar la primera interacción del usuario con nuestra aplicación
- 11. EJEMPLO
- 12. @EDERNEGRETE_
- 13. ¿CÓMO FUNCIONA?
- 14. @EDERNEGRETE- APP.JS MODAL.JS Usuario le da click al botón del modal El único archivo que se le dio al cliente Sólo se llama a este archivo cuando el usuario dio click en el modal
- 15. @EDERNEGRETE-
- 16. @EDERNEGRETE ¿CÓMO FUNCIONA? ▸ Webpack analiza nuestro código, busca cada import y dónde se está llamando. ▸ Crea un chunk por cada archivo ▸ Webpack busca las dependencias y los pone en un contenedor específico (archivos)
- 18. @EDERNEGRETE_ PATRONES DE CODE SPLITTING ▸Por página ▸Por “page fold” ▸Por condición
- 20. @EDERNEGRETE_
- 22. ¿CUÁNDO USARLO?
- 23. @EDERNEGRETE_ ¿CUÁNDO USARLO? ▸ Archivos de Javascript muy pesados ▸ Todo lo que es temporal ▸ Por páginas (rutas)
- 25. @EDERNEGRETE_ ¿CÓMO NO USARLO? ▸ Hacer code split automático ▸ No hacer code split de todo, hay que hacer un análisis
- 26. ¿POR DÓNDE EMPIEZO? Ejemplo live de uso de coverage en Chrome*