Optimización del Build
Clase 15 de 22 • Curso de Server Side Render con Express
Contenido del curso
José Alejandro Muñoz Ruiz
student•
hace 6 años
Mariangelica Useche
Team Platzi•
hace 6 años
Juan Roa
student•
hace 5 años
Clase 15 de 22 • Curso de Server Side Render con Express
Contenido del curso
José Alejandro Muñoz Ruiz
Mariangelica Useche
Juan Roa
Mario Salazar Vasquez
Juan Carlos Pinzón
Nicolas Esteban Manograsso
Gerson Montenegro
Dilan Santiago Ariza Cañon
Andres Caro
Wilson Fernando Antury Torres
José María Cuevas Ramírez
Victor Manuel Lopez Martinez
Daniel Hernández
Carlos Sampol
Abdiel Ortega
Cristofher Jumbo Jimenez
Migrant Cyborg
Gerson Montenegro
Félix Andersson
Cesar Fonseca
José Manuel Puicón Rodas
Cristian Caraballo
Fernando Cordero
Luis Carlos Kristen Ospitia
José María Cuevas Ramírez
Nicolás Posa
Andres Gallego
Junior Ulisse
Luis Gerardo López Hernández
Alejandro Jimenez
Naldo Duran
Para los que instalen la versión 6.0.2 de Compresion-webpack-plugin debe hacer un pequeño cambio en la configuración.
new CompressionWebpackPlugin({ test: /\.js$|\.css$/, filename: '[path][base].gz', })
gracias por tu aporte, José
¡Gracias!
La versión de compression-webpack-plugin 6.0.1 (última al momento de escribir este comentario) ya no es ya no es compatible con el curso.
Para probar deben instalar la version 3.1.0
La compresion .gz es la hostia
Si instalan el paquete compression-webpack-plugin con la version 7.1.2 o superior se tiene que hacer un upgrade de webpack a la version 5.1 como mínimo para que no tener el error
TypeError: Cannot read property 'tapPromise' of undefined
Ademas se tiene que hacer la modificación en la configuración del plugin que nos compartió José Alejandro Muñoz Ruiz
new CompressionWebpackPlugin({ test: /\.js$|\.css$/, filename: '[path][base].gz', })
En mi caso estoy usando la versión 6.0.4 de compression-webpack-plugin, y aunque en el build nunca me puso lío más allá de corregir el filename a '[path][base].gz', y los archivos se crearon, el reporte por pantalla nunca me nombró dichos archivoz gz.
Estamos igual, supongo que en las actualizaciones lo eliminaron o algo por el estilo, estuve buscando porque no me nombrabá los archivos.
Para los que tengan problemas traten de tener las librerias que tiene el profesor en el package.json en este caso me funciono instalar
"compression-webpack-plugin": "^3.1.0",
Realmente la mayor parte de optimización la hace webpack.
Creo que justamente por eso es una herramienta tan usada, te facilita muchos procesos
npm i -D compression-webpack-plugin
no entiendo por que ya no se usa html-loader
Por que se está sirviendo todo desde Express. Ya no haría falta servir tu aplicación de react con el html loader
Cómo el HTML ya se está pasando como un "string" y no de un archivo html ya no necesitas el html loader que te ayuda a decir dónde va a servir tu aplicación como dice el comentario del maestro.
No se si es por que mi App es grande o no se hahahah Pero no se ha reducido tanto, es un caos cuando tienes todo en TS hahahahha
Ostia tío!
Luego de instalar terser-webpack-plugin, la aplicación pasó de pesar 59k, a 61k ...actuó al contrario 😅
Pueden usar el Connect Gzip Middleware para servir los archivos comprimidos.
Problemas de build con "terser-webpack-plugin"
Esta optimización me emocionó !
¿Como hace para tener autocompletado en la terminal para las instalaciones de dependencias?
Eso es un paquete que se instala a la terminal. No recuerdo como se llama. Creo que se usa con Hyper Console
me crea todos los paquetes, tienen el mismo tamaño de la clase, pero al dar comando node src/server, se levanta el el servidor, pero no me carga la aplicacion, solo un html
<!DOCTYPE html> <html> <head> <title>Platzi Video</title> </head> <body> <div id="app"></div> </body> </html>```
Tal vez haya algún error de dedo en tu comando build 🧐
Me salta este error al intentar hacer build, ¿Alguien me puede ayudar? 
Hola nico, una vez me paso y lo solucione así
npm uninstall webpack
npm i -D webpack
como hago para subir la app a producción en heroku por ejemplo
por que el compression webpack plugin lo descarga con --save-dev y no como produccion, si lo va a usar para produccion y no desarrollo?
En la documentación también especifica --save-dev, el proceso de compresión es en desarrollo, no en producción.
✌