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',
})
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
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Optimización del Build
15/22Recursos
Aportes 21
Preguntas 5
Ordenar por:
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.
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.
npm i -D compression-webpack-plugin
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
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?
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>```
Hay que usar la version “terser-webpack-plugin”: “^2.3.3” y no la 5 que es la que instala por defecto.
Después de sufrir un poco con el paquete de compresión… ^_^
Para los que estén haciendo este curso, y tiene problemas con el versionado de compression-webpack-plugin. Este link explica las incompatibilidades que hay https://stackoverflow.com/questions/65156116/typeerror-cannot-read-property-tappromise-of-undefined
Lo hice funcionar modificando en el package.json con “compression-webpack-plugin”: “^6.0.5” y “webpack”: “^5.3.2”.
Salen warnings de varios features deprecados, pero para salir del paso, sirve.
Que dice el que se limpia “node morius o mobius”… Si entienden me dicen porfa
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.