Víctor Julio Molano Bolívar
PreguntaEs muy bonito todo en un bundle pero y cuando la aplicación crezca(si lo hace) que va pasar con la experiencia de usuario?
Aqui con el ejercicio del curso muy práctico todo porque el bundle queda pesando muy poco.
Pero una vez que tenga uno muchas páginas y componentes descargar todo eso en un bundle inicial sería innecesario y además arruinaría la experiencia de usuario al tener que esperar quien sabe cuando para descargar toda la lógica de la app y posiblemente solo use 1 o 2 páginas.
Sé que webpack permite hacer carga asíncrona de módulos y creo seria un MUY BUEN PLUS para el curso, ver un ejemplo del trabajo con esa funcionalidad tanto en desarrollo como en producción.
Se me ocurre que podríamos crear/cargar un mini-bundle por cada página o grupo de páginas de la app.
**Ejemplo:
Imaginen un software administrativo que tenga diferentes modulos (de negocio) como por ejemplo (nomina, ventas, inventario, almacén, etc…)**
Cada módulo a su vez tendría varias/muchas páginas para gestionar datos básicos, para hacer transacciones y demás.
Mi punto es que si un usuario quiere ver el reporte de nómina por ejemplo y todo está en un bundle sería muy mala la experiencia de esperar a que se baje todo el js de todos los módulos.
No sería mejor que por ejemplo si entramos al home de la página
http://myapp.com<Home />Luego al ingresar a la ruta
http://myapp.com/loginhttp://myapp.com/nominaEl punto es que se va descargando asíncronamente el js que se va necesitando y no todo el de la app.
De antemano gracias y espero pueda ser tomada esta sugerencia como un BONUS para el curso, seria de gran utilidad.
Saludos!
Víctor Julio Molano Bolívar
Hola Sergio, no hay lio, gracias por la info.
Yo he estado mirando un poco sobre esto:
Y aquí pusieron un demo en línea que, al revisar con las herramientas de desarrollo de chrome, es justo lo que pretendo hacer que es separación de código por rutas de react-router:
https://burning-heat-4609.firebaseapp.com/
Ahí hacen la separación con los 2 entry points (más o menos como ud dice, separando dependencias y lógica)
Sin embargo lo que no me queda claro es la integración con redux y con react-redux, no se si depronto me pueda ayudar de alguna forma con ese tema, pues no se como se “repartirian” las acciones y reducers en cada mini-bundle.
La idea es usar de una vez Webpack2 y aprovecharme de ese pseudo-feature “automático”, para hacer el code splitting. He estado leyendo mucho entre otras sobre esto:
Y no me queda muy claro cómo sería el despliegue de la app.
Entonces cualquier info o ejemplo al respecto sería de gran ayuda.
Gracias
Off-topic: finalmente descartado este tema como un Bonus para el curso?
Sergio Daniel Xalambrí
Hola Victor, lamento mucho haber tardado tanto en responderte, soy una mala persona por eso y me siento muy mal 😦.
Tu idea es excelente, y de hecho es lo mejor que se puede hacer en aplicaciones grandes como mencionas 😃
Hay varias formas de hacerlo, en Webpack v1 (la usada en el curso, aunque probablemente se pueda usar en la v2 también) existe un plugin muy interesante llamado DLL que te permite definir ciertos archivos y generar un bundled separado de tu aplicación con estos, por ejemplo con tus dependencias instaladas de npm, este archivo se puede generar 1 vez, agregarle una cache muy grande (o inmutable) y enviarlo por separado de tu código.
Con solo hacer esto ya extrajiste un montón de kb de peso de tu aplicación y al tener una cache a largo plazo te evitas que el usuario tenga que descargar este archivo una y otra vez, pero te permitís cambiar tu código muy seguido sin problemas.
En mi experiencia con generar este archivo podés quitar 1 o 2 mb de peso y la verdad normalmente el código que uno crea no pesa tanto, son más las dependencias que usamos (React, React Router, Redux, React Redux, Immutable, etc. etc.) las que pesan mucho.
Te dejo un enlace que me ayudó a entender como funciona este plugin y como implementarlo: https://robertknight.github.io/posts/webpack-dll-plugins/
Ahora si querés separar tu código hay varias formas, una es crear multiples entry points, esto sirve para tener aplicaciones multi página, de esta forma cada página tiene su propio JS, aunque de esta forma es más difícil usar rutas en el navegador, esto sirve mucho si las rutas las maneja solo el backend y no hacemos una SPA, lo cual depende de la necesidad puede ser una buena idea.
Otra opción es separar dinamicamente el código, por ejemplo en Webpack v2 podés usar
import('ruta/al/modulo')Como vez siempre hay pros y contras de cada implementación, y depende de las necesidades de nuestra aplicación debemos decidir cual opción usar y que cosas sacrificar (como con todas las librerías y decisiones que tomamos al programar)
En la nueva documentación de Webpack v2 hay una guía de como hacer separación de código con
import();https://webpack.js.org/guides/code-splitting-import/
https://webpack.js.org/guides/lazy-load-react/
Por última hay una opción muy buena que es Next.js, en el curso vemos un material bonus sobre como usar la v1, y actualmente está por salir la v2 la cual incluye muchas mejoras.
Una de las cosas más interesantes (que existe tanto en la v1 como la v2) es que Next.js separa código por página, nos de server-render y a su vez maneja un sistema de SPA que se encarga de cargar el código de otra página y hacer render en el cliente. Next es una muy buena opción para empezar proyectos listos para producción.
Obviamente no es perfecto, en Next es difícil usar CSS de forma normal ya que nos propone usar CSS en JS mediante styled-jsx en vez de tener archivos
.css
