Webpack, Parcel, Rollup y Vite comparados
Contenido del curso
Webpack
Parcel
ESBuild
Rollup
Vite
Conclusiones
Webpack, Parcel, Rollup y Vite comparados
Webpack, Parcel, Rollup y Vite comparados
Contenido del curso
Royer Guerrero Pinilla
Irving Juárez
Federico Ivan Llano
Miguel Angel Hernandez Colombo
milton coronado
Miguel Angel Hernandez Colombo
Gilbert Ardila
Victor Hugo Vázquez Gómez
Gilbert Ardila
Albert Valls
Neils Alfaro Bendezu
Kenneth Angulo L
Jefred Bedoya
Seba Cardoso
Web Packagers
🏛️ History
JavaScript in the war between Microsoft and NetScape for the internet marketNode.js a runtime of JavaScript in the server sidenpm a packager for Node and JavaScriptBrowserify the tool for packaging arrives to JavaScript environmentGulp show a new way for work with our JavaScript appsBabel a JavaScript compiler📁 What is a module?
Is just a file with code that we can call from the other files in the same way as we can import other modules to our file
What is IIFE?
Is a way in JavaScript for invoking a function immediately and stand for Immediately Invoked Function Expression
Example
(function () { console.log('Hi from IIFE') })()
What is CommonJS (CJS)?
Is a alternative for create modules in JavaScript that born with Node.js in 2009
What is AMD (Asynchronous Module Definition)?
Is a propose for solve some limitations that has CJS for load modules in the client side
What is ES Modules (ESM)?
Is the native way implemented with Ecmascript6+ that allows you use export and import for can works with modules in an easy way
Web packager
It's a piece software that allows have all the items (code, images, fonts, etc) in a single file, this is useful to reduce the size of the code.
✨ Most popular packagers
Webpack
Parcel
ESBuild
Rollup
Vite
Bundlers es el nombre que se les da en inglés
Hace una semana Vercel anuncio TurboPack, un empaquetador que esta desarrollado en el lenguaje Rust. En el anuncio dicen que es 700 veces mas rapido que Webpack y 10 veces mas rapido que Vite.
woow!
parece que vite va a reemplazar a webpack aunque siempre me gustó webpack, ojalá que vite no le quite mercado
RT
Oscar cómo estás, me surge una pregunta sobre webPack vs Vite, hay mitos que se construyen al rededor de las nuevas tecnologías siempre y es difícil poder decantar que tan ciertos o no son, he oído que webPack ya no tendrá soporte debido ala ventaja que Vite está teniendo entre los desarrolladores¿Que tan cierto es eso? No he podido encontrar la página oficial de webPack para corroborar si va a tener o no soporte de la comunidad a futuro
Hola Gilbert. No se donde escuchaste eso, pero que yo sepa Webpack va a seguir teniendo soporte. Puedes ir a su repositorio en GitHub y ver que tienen pocas issues abiertas (191 a la fecha de 17/12/22).
Pero si, que Vite sea mejor no quiere decir que Webpack vaya a desaparecer ya que la mayoria de los proyectos aun necesitan de Webpack y sigue siendo sponsoreado tambien.
Muchas gracias por la aclaración Hugo!!
Después de concluir el curso de empaquetadores web, es ideal seguir con React primero, ya que es fundamental para crear interfaces interactivas y te permitirá aplicar los conceptos de JavaScript y TypeScript en un contexto práctico. Luego, puedes complementar tu formación con Node.js, que te enseñará sobre el desarrollo del backend y cómo integrar tu aplicación frontend con un servidor. Este orden te proporcionará una comprensión completa del desarrollo full-stack.
Algo con esbuild es el hecho de que está usando Go por debajo lo que hace diferenciarse del resto en cuanto velocidad.
¿Cuándo debería elegir Vite sobre Webpack?
Deberías inclinarte por Vite cuando priorices la velocidad extrema en tu entorno de desarrollo local y estés iniciando un proyecto moderno. Vite utiliza ESBuild (escrito en Go) por debajo, lo que hace que el servidor local levante casi instantáneamente, sin importar qué tan grande sea tu aplicación. Es ideal para proyectos con React, Vue o TypeScript donde quieres ver los cambios reflejados en el navegador en tiempo real.
Por otro lado, Webpack es el rey indiscutible si estás trabajando en un proyecto legacy (heredado) o necesitas una configuración altamente personalizada con reglas muy específicas. Al tener la comunidad más antigua y grande, si tienes un problema complejo o necesitas un plugin muy particular para transformar un archivo raro, es casi seguro que alguien ya lo inventó para Webpack.
Empaquetadores de Módulos en JavaScript
Los empaquetadores gestionan dependencias, ejecutan tareas de optimización y preparan proyectos para producción, soportando CommonJS y ES Modules.
Consideración clave: Muchos frameworks actuales (como Next.js o SvelteKit) ya integran estas herramientas en su núcleo, por lo que entender su funcionamiento interno es vital para realizar configuraciones avanzadas o personalizadas.
En mi camino use Grunt, despues Gulp, luego webpack, y desde el año pasado Vite.