Optimización del Build

Clase 15 de 22 • Curso de Server Side Render con Express

José Alejandro Muñoz Ruiz

student•

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',
      })

Mariangelica Useche

Team Platzi•

gracias por tu aporte, José

Juan Roa

student•

¡Gracias!

Mario Salazar Vasquez

student•

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

Juan Carlos Pinzón

student•

La compresion .gz es la hostia

Nicolas Esteban Manograsso

student•

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',
      })

Gerson Montenegro

student•

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.

Dilan Santiago Ariza Cañon

student•

Estamos igual, supongo que en las actualizaciones lo eliminaron o algo por el estilo, estuve buscando porque no me nombrabá los archivos.

Andres Caro

student•

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",

Wilson Fernando Antury Torres

student•

Realmente la mayor parte de optimización la hace webpack.

José María Cuevas Ramírez

student•

Creo que justamente por eso es una herramienta tan usada, te facilita muchos procesos

Victor Manuel Lopez Martinez

student•

npm i -D compression-webpack-plugin

Daniel Hernández

student•

no entiendo por que ya no se usa html-loader

Carlos Sampol

Team Platzi•

Por que se está sirviendo todo desde Express. Ya no haría falta servir tu aplicación de react con el html loader

Abdiel Ortega

student•

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.

Cristofher Jumbo Jimenez

student•

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

Migrant Cyborg

student•

Ostia tío!

Gerson Montenegro

student•

Luego de instalar terser-webpack-plugin, la aplicación pasó de pesar 59k, a 61k ...actuó al contrario 😅

Félix Andersson

student•

Pueden usar el Connect Gzip Middleware para servir los archivos comprimidos.

Cesar Fonseca

student•

Problemas de build con "terser-webpack-plugin"

José Manuel Puicón Rodas

student•

Esta optimización me emocionó !

Cristian Caraballo

student•

¿Como hace para tener autocompletado en la terminal para las instalaciones de dependencias?

Fernando Cordero

student•

Eso es un paquete que se instala a la terminal. No recuerdo como se llama. Creo que se usa con Hyper Console

Luis Carlos Kristen Ospitia

student•

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

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Platzi Video&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;```

José María Cuevas Ramírez

student•

Tal vez haya algún error de dedo en tu comando build 🧐

Nicolás Posa

student•

Me salta este error al intentar hacer build, ¿Alguien me puede ayudar? ![](

Andres Gallego

student•

Hola nico, una vez me paso y lo solucione así

npm uninstall webpack
npm i -D webpack

Junior Ulisse

student•

como hago para subir la app a producción en heroku por ejemplo

Luis Gerardo López Hernández

student•

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?

Alejandro Jimenez

student•

En la documentación también especifica --save-dev, el proceso de compresión es en desarrollo, no en producción.

Naldo Duran

student•

✌

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Platzi Video&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;```

Optimización del Build

Conocimientos necesarios para aplicar SSR

Lo que aprenderás sobre server side render

Presentación del proyecto del curso y sus herramientas

¿Qué es Server Side Rendering?

Preparando entorno para aplicar SSR

Actualizando dependencias en NPM

Creación del servidor en Express

Usando Nodemon y Dotenv

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Abstrayendo React Router, creando history y haciendo initialState más accesible

Aplicar Server Side Rendering

Definición de la función principal para realizar el renderizado desde el servidor

Assets require hook

Hydrate y estado de Redux desde Express

Trabaja con entornos de desarrollo y producción

Configurando nuestro servidor para producción

Configurando webpack para producción

Optimización del Build

Aplicar hashes al nombre de nuestros builds

Buenas prácticas de Server Side Render

Vendorfiles en Webpack: definiendo cacheGroups

Vendorfiles en Webpack: generando el vendorfile

Configuración de ESLint

Alternativas al SSR con Express

Cómo implementar Next.js

Cómo usar Gatsby.js

Cuando usar cada una de las herramientas presentadas