Vendorfiles en Webpack: definiendo cacheGroups

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

Yessica Ramos Donate

student•

Un resumen de la clase aquí Qué es vendor file

Manuel Rivera

student•

Muchísimas gracias bro, me srivió demasiado, no sabía el por qué se estaba haciendo eso.

Angel Archbold

student•

Debí ver primero el curso de webpack :/

Carlos Arboleda

student•

Por si desean una mejor idea de por qué se hace splitting Chunks with Webpack

Jorge Méndez Ortega

student•

no es mejor utilizar un dll?

Jhon Jairo Trillos Alvarez

student•

Tener cuidado con el reuseExistingChunk, el Chunk debe comenzar en mayus según documentación.

clase

reuseExistingchunk

Documentación

reuseExistingChunk

Cesar Augusto Morales Lazaro

student•

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that 
does not match the API schema.
....
   -> Optimize duplication and caching by splitting chunks by shared modules and cache group.
   Details:
    * configuration.optimization.splitChunks.name should be one of these:
      false | string | function
      .......

splitChunks: {
      chunks: 'async',
      name: false,
      cacheGroups: {
        vendors: {
          name: 'vendors',
          chunks: 'all',
          reuseExistingChunk: true,
          priority: 1,
          filename: isDev ? 'assets/vendor.js' : 'assets/vendor-[hash].js',
          enforce: true,
        },
      },
    },

Cesar Augusto Morales Lazaro

student•

Si les salio ese error cambiar el codigo del objeto splitChunks, por el que se muestra

Jose Daniel Molina

student•

El vendor file, se encarga de optimizar y "juntar" todo el código de las dependencias que usamos o mejor dicho importamos en el proyecto en un solo archivo llamado precisamente vendor.js. Anteriormente era un proceso tedioso, pero con Webpack se facilita mucho este proceso. Creo que voy a por el curso de Webpack de Platzi :D

Garcia Gar

student•

Me esta saliendo este error me puede ayudar:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

configuration.module.rules[0] has an unknown property 'exclusive'. These properties are valid: object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, realResource?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? } -> A rule npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! platzi-video@1.0.0 build: webpack-cli --config webpack.config.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the platzi-video@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /home/elioenai/.npm/_logs/2020-06-01T02_14_01_387Z-debug.log

Rubén Padilla

student•

Es un error en tu archivo de configuración de webpack, en la opción de rules tienes una propiedad desconocida exclusive, puedes compartir ese archivo para ver exactamente dónde está el error?

Saludos.

Naldo Duran

student•

✌

Sandra Mishale Niño Arbelaez

student•

¿Los vendorfiles se utilizan junto a la compresión y aplicar hashes o una remplaza a la otra?

Laura Camila Pregonero

student•

Maria Elizabeth Minero Alvarenga

student•

Gracias!

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that 
does not match the API schema.
....
   -> Optimize duplication and caching by splitting chunks by shared modules and cache group.
   Details:
    * configuration.optimization.splitChunks.name should be one of these:
      false | string | function
      .......

splitChunks: {
      chunks: 'async',
      name: false,
      cacheGroups: {
        vendors: {
          name: 'vendors',
          chunks: 'all',
          reuseExistingChunk: true,
          priority: 1,
          filename: isDev ? 'assets/vendor.js' : 'assets/vendor-[hash].js',
          enforce: true,
        },
      },
    },

Vendorfiles en Webpack: definiendo cacheGroups

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