Vendorfiles en Webpack: generando el vendorfile

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

Luis Lira

student•

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
  ? () =&gt; {}
  : new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: path.resolve(__dirname, 'src/server/public')
  })

José María Cuevas Ramírez

student•

gracias por el aporte, no me había fijado que estaba generando muchos archivos :O

Héctor Hugo Sandoval Marcelo

student•

Gracias bro!

Luis Fernando Méndez González

student•

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

Cesar Andres Ardila Buitrago

student•

Gracias crack!

Omar Larasa

student•

Gracias men, me salvaste

Félix Andersson

student•

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

Gerson Montenegro

student•

es [contenthash], sin camel case, de lo contrario los archivos quedan literal con este nombre:

vendor-[contentHash].js

Johann Rios

student•

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

Cesar Arion Espinosa Méndez

student•

Gracias por el aporte, saludos

Lorena Andrea Cárcamo Herrera

student•

Me funciono, gracias :D

Cesar Andres Ardila Buitrago

student•

En la ultima version se genera el css también con la clave vendors.css en el manifiest.json

Luis Vazquez

student•

gracias bro me salvo de estar buscando el error

Juan Jose Arcani

student•

Tambien note eso en el manifest.json, podrías pasar la documentación? no la encuetro referente a esa parte

Cesar Andres Ardila Buitrago

student•

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.

Erick Avila Rojas

student•

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.

Cesar Augusto Morales Lazaro

student•

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

André Martín Martínez

student•

Muchas gracias por el aporte!

Julia Suárez

student•

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

César Palma

student•

gracias

Gerson Montenegro

student•

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:

false
Un string
Una función Como no es ninguna de esas, no se generan los archivos, así que tuve que pasar la propiedad a string por ahora.

Nixon Fernando Ortiz Suarez

student•

Tengo el mismo error , lo que hice fue dejar `name: '[name]'

Laura Camila Pregonero

student•

Verdorfile

Sergio Perez

student•

Me perdí, para que era el vendor?

Sergio Perez

student•

Con este BlogPost me quedo claro.

https://platzi.com/blog/que-es-el-vendor-file/#:~:text=Antes%20a%20la%20carpeta%20que,encontraba%20dentro%20de%20esta%20carpeta.&text=js%20.,dependencias%20de%20un%20sitio%20web.

Andres David Sanchez

student•

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

Luis Lira

student•

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.

Matthias Ignacio Clein Espinoza

student•

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.

José Marquínez

student•

¿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)
}

Diego Rodríguez

student•

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[\\/]/,
  },
},

DANIEL MEDINA ARMADA Medina

student•

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);
          }

Maria Elizabeth Minero Alvarenga

student•

gracias por el aporte

Jose Daniel Molina

student•

Me gusto demasiado el archivo vendor, es realmente genial poder separar las dependencias de la logica de la app...

Andrés Felipe Arboleda Londoño

student•

Con este objeto m aplicación no funciona bién, me genera un error vendor: { chunks: "all", reuseExistingChunk: true...

Alejandro Benjumea Aguirre

student•

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.

Gerson Montenegro

student•

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?

Gerson Montenegro

student•

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.

Nixon Fernando Ortiz Suarez

student•

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.

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// en la parte de los plugins
isDev
  ? () =&gt; {}
  : new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: path.resolve(__dirname, 'src/server/public')
  })

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

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

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

// 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

cacheGroups: {
  vendors: {
    name: 'vendors',
    chunks: 'all',
    reuseExistingChunk: true,
    priority: 1,
    filename: isDev ? 'assets/vendor.js' : 'assets/vendor-[contenthash].js',
    enforce: true,
    test: /[\\/]node_modules[\\/]/,
  },
},

          test(module, chunks) {
            const name = module.nameForCondition && module.nameForCondition();
            return (chunks) => chunks.name !== "vendors" && /[\\/]node_modules[\\/]/.test(name);
          }

{
  "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.

Vendorfiles en Webpack: generando el vendorfile

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