Clase 18 de 22 • Curso de Server Side Render con Express
Contenido del curso
Luis Lira
José María Cuevas Ramírez
Héctor Hugo Sandoval Marcelo
Luis Fernando Méndez González
Cesar Andres Ardila Buitrago
Omar Larasa
Félix Andersson
Gerson Montenegro
Johann Rios
Cesar Arion Espinosa Méndez
Lorena Andrea Cárcamo Herrera
Cesar Andres Ardila Buitrago
Luis Vazquez
Juan Jose Arcani
Cesar Andres Ardila Buitrago
Erick Avila Rojas
Cesar Augusto Morales Lazaro
André Martín Martínez
Julia Suárez
César Palma
Gerson Montenegro
Nixon Fernando Ortiz Suarez
Laura Camila Pregonero
Sergio Perez
Sergio Perez
Andres David Sanchez
Luis Lira
Matthias Ignacio Clein Espinoza
José Marquínez
Diego Rodríguez
DANIEL MEDINA ARMADA Medina
Maria Elizabeth Minero Alvarenga
Jose Daniel Molina
Andrés Felipe Arboleda Londoño
Alejandro Benjumea Aguirre
Gerson Montenegro
Gerson Montenegro
Nixon Fernando Ortiz Suarez
Si quieren que su carpeta public se limpie cada vez que hagan un build, instalen npm i -D clean-webpack-plugin y agreguen la siguiente configuración a su webpack.config.js porque cada que hagan cambios y hagan un build, los archivos se generarán con un hash diferente, y con esto no tendrán archivos basura.
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // en la parte de los plugins isDev ? () => {} : new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: path.resolve(__dirname, 'src/server/public') })
gracias por el aporte, no me había fijado que estaba generando muchos archivos :O
Gracias bro!
En la última actualización del webpack ya no permite un valor de "true" en el "name" de "splitChunks", solo acepta el de dentro de "cacheGroups". Además, el "chunks.some()" del return también genera un conflicto en esta versión. Pueden adaptar su código así:
splitChunks: { chunks: 'async', cacheGroups: { vendors: { name: 'vendors', chunks: 'all', reuseExistingChunk: true, priority: 1, filename: isDev ? 'assets/vendor.js' : 'assets/vendor-[contenthash].js', enforce: true, test(module, chunks) { const name = module.nameForCondition && module.nameForCondition(); return (chunk) => chunk.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name); }, }, }, },
Gracias crack!
Gracias men, me salvaste
En el filename del vendor deben poner 'vendor-[contentHash].js' en lugar de solo [hash], de lo contrario siempre que se modifique el app.js también se va a crear un nombre distinto del vendor y perdemos toda la utilidad del cache
es [contenthash], sin camel case, de lo contrario los archivos quedan literal con este nombre:
vendor-[contentHash].js
Agosto 2021. Tuve el problema que al refrescar la pagina en el localhost no cargaban los estilos. seguí la recomendacion del compañero Luis Fernando Mendez y se solucionó una parte. pero nada que cargaban los estilos. pero viendo el aporte de Laura Camila Pregonero se solucionó completamente. el codigo que me funcionó quedó así:
splitChunks: { chunks: 'async', cacheGroups: { vendors: { name: 'vendors', chunks: 'all', reuseExistingChunk: true, priority: 1, filename: isDev ? 'assets/vendor.js' : 'assets/vendor-[contenthash].js', enforce: true, test (module, chunks){ const name = module.nameForCondition && module.nameForCondition() / return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name); }, }, }, },
Gracias por el aporte, saludos
Me funciono, gracias :D
En la ultima version se genera el css también con la clave vendors.css en el manifiest.json
gracias bro me salvo de estar buscando el error
Tambien note eso en el manifest.json, podrías pasar la documentación? no la encuetro referente a esa parte
Los que requieran hacer un deploy por ejemplo en Heroku deben pasar las siguientes dependencias de "dev" a las generales.
@babel/plugin-transform-runtime @babel/core @babel/preset-env @babel/preset-react asset-require-hook
Esto es por que iniciamos express desde el index y no desde server.
Al momento que tomo el curso la versión de Webpack es la 5.4.0 por lo que básicamente no funciona la configuración que manejan en la clase. Les recomiendo echarle un ojo a la documentación ya que hay que cambiar cosas importantes como por ejemplo al función para verificar los nombres.
Para los que tuvieron problemas con la funcion some, hacer lo siguiente:
test(module, chunks) { const name = module.nameForCondition && module.nameForCondition(); // console.log(typeof chunks); //con esto podemos ver el tipo de dato de la variable, some funciona con arreglos y en este caso es un objeto //Probar cuando sean varios chunks con esto // return chunks.filter((chunk) => chunk.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name)); return (chunks) => chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name); },
Para los que les aparece la pagina en blanco y el href del archivo de estilos como undefined, hacer lo siguiente:
// const mainStyles = manifest ? manifest['main.css'] : 'assets/app.css'; //original const mainStyles = manifest ? manifest['vendors.css'] : 'assets/app.css'; //al parecer splitChunks genera un vendor para los css y lo mapea en el manifest con otro nombre
Muchas gracias por el aporte!
Webpack tiene una opcion de clean para el objeto de output sin tener que instalar el plugin de CleanWebpackPlugin https://webpack.js.org/configuration/output/#outputclean
gracias
En este momento, al setear como true la propiedad splitChunks.name, se me genera un error, pues se espera que contenta uno de 3 valores posibles:
Tengo el mismo error , lo que hice fue dejar `name: '[name]'
Verdorfile
Me perdí, para que era el vendor?
A alguien mas no le cargan los Estilos al aplicar estas configuraciones? al hacer build si me aparece en el log pero no me carga es archivo x.x
Te aparece algún error en la consola? Han habido cambios tanto en Webpack como en algunas bibliotecas, por lo que seguramente hay algunas cosas que son diferentes ahora.
A mi me pasó lo mismo! El error está en esta línea del archivo server.js
const mainStyles = manifest ? manifest['main.css'] : 'assets/app.css';
Hay que reemplazar el 'main.css' por 'vendors.css' que es lo que aparece en el manifest.json.
Espero te sirva! Saludos.
¿Que es module dentro de los args de Test, además su propiedad nameForCondition? Además, ¿Qué es la propiedad .test de la Regex de Node Modules?
test(module, chunks) { const name = module.nameForCondition && module.nameForCondition(); return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name) }
El parametro test de la configuración del cache group esta agregando todos los archivos incluyendo el código del app principal, esto hace que el archivo vendors contenga el código principal de la aplicación.
Por lo tanto pierde el objetivo de guardar en cache solo las dependencias de node_modules y cargar solamente el código de la app en las siguientes solicitudes si hay algún cambio.
Para agregar solo las dependencias al vendor se podría agregar solo la expresión regular de la siguiente manera:
test: /[\\/]node_modules[\\/]/,
Código final:
cacheGroups: { vendors: { name: 'vendors', chunks: 'all', reuseExistingChunk: true, priority: 1, filename: isDev ? 'assets/vendor.js' : 'assets/vendor-[contenthash].js', enforce: true, test: /[\\/]node_modules[\\/]/, }, },
Buenos días soy nuevo en este mundo y con todo respecto quisiera preguntarle el cambio en el código se debe a la versión del webpack. En esta versión no hay que validar lo expuesto en la clase ('module.nameForCondition', chunks . name !== "vendors" y ]node_modules.test(name); ?
test(module, chunks) { const name = module.nameForCondition && module.nameForCondition(); return (chunks) => chunks.name !== "vendors" && /[\\/]node_modules[\\/]/.test(name); }
gracias por el aporte
Me gusto demasiado el archivo vendor, es realmente genial poder separar las dependencias de la logica de la app...
Con este objeto m aplicación no funciona bién, me genera un error vendor: { chunks: "all", reuseExistingChunk: true...
Me pueden guiar explicándome como funciona el archivo manifest.json es decir este archivo de donde carga cada una de las propiedades que se cargan en el objeto? es que al hacer el npm run build no me esta carga el archivo css.
{ "main.js": "/assets/app-0f16515a68dc15fed04e.js", "vendors.css": "/assets/app-0f16515a68dc15fed04e.css", "vendors.js": "/assets/vendor-3ff77151e24693934677.js", "vendors.png": "/assets/5a89d07e023cabc9bd46b8ef3e33b9c3.png", "assets/logo-platzi-video-BW2.png": "/assets/7104263cc7ae188d7e1275934c32a378.png", "assets/play-icon.png": "/assets/9a1e4bf4f3cb0556c15a96c17808dbf7.png", "assets/plus-icon.png": "/assets/82e73f0c9de0d9e64a4f7eb6917fe799.png", "assets/user-icon.png": "/assets/5a89d07e023cabc9bd46b8ef3e33b9c3.png", "assets/remove-icon.png": "/assets/eda042cfccd454f31c1019e6c6bb0537.png", "assets/google-icon.png": "/assets/87fee39f3ffc377fa871d31587cc532c.png", "assets/twitter-icon.png": "/assets/0103ef81347edc3344acec319325eb81.png" }``` Me queda así el archivo. Se los agradecería quien me pueda explicar.
Cuando hago el build, pasa que la variable chunks no es un array, sino un objeto y ando un poco bloqueado :-(
TypeError: chunks.some is not a function
He usado la versión 2.2.0, y la 3.0.0-rc.0 del webpack-manifest-plugin y obtengo exactamente el mismo resultado.
¿Alguna idea?
Por lo pronto, al menos para poder compilar, dejé la función test de la siguiente manera:
test(module, chunks) { const name = module.nameForCondition && module.nameForCondition(); return /[\\/]node_modules[\\/]/.test(name); },
De esta forma me filtra los archivos como se "supone", y aunque la aplicación corre, mi archivo app.js es de 33k, mientras que el vendor.js es de 168k, lo que quiere decir que el filtro obviamente no hace el trabajo perfecto, peeeero, como dicen por ahí, es lo que hay, al menos por ahora.
Estos errores se deben a que la versión de Webpack que estas usando es la 5 mientras que en el curso usan la versión 4, aun no encontrado la forma de resolver ese error, sin embargo la solución que propones me funciona.
