Qué hacen los empaquetadores de módulos en JS
Contenido del curso
Webpack
Parcel
ESBuild
Rollup
Vite
Conclusiones
Qué hacen los empaquetadores de módulos en JS
Qué hacen los empaquetadores de módulos en JS
Contenido del curso
Joan Sebastian Giraldo Morales
Bryan Figueroa
Sebastian Flores Guasace
Irving Juárez
Henry Alexander Velásquez Rosas
fabio andres zamora osorio
Jhonny Rafael Varela Visbal
Diego Reyes Cabrera
Héctor Galindo
Kenneth Angulo L
Kenneth Angulo L
Jefred Bedoya
VALERIA VALENTINA MESA VARGAS
Un empaquetador te permite gestionar tu código, ver que se utiliza y que no, poner restricciones y reglar, ver que tipo de recursos admitir también como referenciar estos recursos al momento de hacer un deploy a producción para gestionar mejor el tema de optimización y seguridad.
Resumen: Optimizan todo nuestro código y recursos para llevarlo a producción
Gracias, la verdad que prefiero que vaya directo al grano, y si lo va explicar, que lo haga con diapositivas mostrando el paso a paso o un pequeño ejemplo ya que explicar solo con palabras directo a la cámara no capta para nada la atención
Antes no me gustaba como el profe daba las explicaciones, sentía que le daba muchas vueltas al asunto. . Sin embargo en esta clase, me gusto como explicó el concepto. No se si será porque yo ya tengo un conocimiento más amplio del desarrollo web y ya entiendio lo que dice o porque el profe mejoro su manera de explicar. . Talvez un poco de ambos
¿Los empaquetadores solo se utilizan para proyectos de frontend o tambien se pueden utilizar para proyectos de backend?
Hasta el momento desconozco que se usen empaquetadores para el backend, si bien en nodejs tal vez es posible realmente no tiene sentido hacerlo puesto que el propósito de los empaquetadores es principalmente reducir el tamaño de los archivos que se envían al cliente, el backend no envía su codigo al cliente, a final de cuentas el codigo no va a dejar el server
En realidad, sí tiene sentido usar un empaquetador para el backend, aunque no sea taaan claro. . Es verdad que en el frontend aprovechamos el hecho de reducir la cantidad de archivos enviados desde el servidor, pero no es la única ventaja que ofrece un empaquetador. . El backend puede aprovechar un empaquetador para:
And so on. Solo serían algunos motivos, debe haber más.
La necesidad de usar un empaquetador web nace a partir del crecimiento de un proyecto web. Una aplicación web se compone de muchos módulos pequeños, que al final se unen para formar una aplicación entera, dentro de nuestros módulos tenemos archivos de todo tipo, por lo que se hace uso de una arquitectura para organizar todos los archivos de nuestra aplicación en diferentes directorios.
El trabajo del empaquetador web es tomar como entrada todos los archivos que componen nuestra aplicación, realiza una serie de procesos pre configurados sobre estos archivos dependiendo qué tipo de archivo sea, y finalmente entregar un paquete de archivos que será nuestro proyecto listo para ejecutarse en producción.
Algunos de los procesos que ocurren en el empaquetador web pueden ser:
Además, estos también se pueden integrar con otras herramientas, como compiladores de código (como Babel), preprocesadores de CSS (como Sass) y sistemas de construcción (como Gulp).
¿Cuándo debo usar el Dynamic Import?
Debes usar Dynamic Import cuando tu aplicación crece y no quieres que el usuario descargue código que aún no necesita. Piensa en una tienda en línea: no tiene sentido cargar la lógica del carrito de compras o del panel de pago si el usuario apenas está viendo la página de inicio. Al implementar importaciones dinámicas (import()), le indicas al empaquetador que divida tu código en fragmentos más pequeños llamados chunks. Estos fragmentos se cargarán bajo demanda, por ejemplo, cuando el usuario hace scroll hacia una sección específica, hace clic en un botón o pasa el mouse sobre un menú. Esta estrategia, conocida como Lazy Loading, reduce drásticamente el tiempo de carga inicial de tu sitio, haciendo que la primera interacción sea casi instantánea.
El Rol de los Empaquetadores
Los empaquetadores como Webpack resuelven la complejidad de las dependencias transformando código fuente en assets optimizados para el navegador mediante loaders y plugins.
Alternativas Modernas
Hay alguna forma de luego poner esos css, js e imagenes dendro del html de forma automatizada?