Compresión de Assets

Clase 20 de 22 • Curso de Server Side Render con Express 2019

Resumen

Vamos a optimizar el tamaño de nuestros assets con el compression-webpack-plugin, para ello lo instalamos con el siguiente comando:

yarn add compression-webpack-plugin --exact

zefe torres

student•

sampol.90 Tengo duda de si esto que hice no me generara problemas mas adelante en el curso ?

En esta clase agregamos CompressionPlugin con esta condición

plugins: [
	isProd ? new CompressionPlugin({
      	test: /\.js$|\.css$/,
      	filename: '[path].gz',
    }) : false,
]

Y modificamos en el archivo .env la variable NODE_ENV=production para hacer el build y generar los archivos .gz y me funciono correctamente.

Pero cuando asigno a la variable a NODE_ENV=development en modo desarrollo. Y corro el proyecto con

yarn run:dev

manda el siguiente error:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a c
onfiguration object that does not match the API schema.
 - configuration.plugins[3] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function
   Details:
    * configuration.plugins[3] should be an object.
      -> Plugin instance
    * configuration.plugins[3] should be an instance of function
      -> Function acting as plugin

La solución : al final del arreglo de plugins incluir .filter(Boolean) Para que agregue los complementos si el entorno es producción, de lo contrario, devuelva falso y filtre la matriz según el valor booleano

plugins: [
	isProd ? new CompressionPlugin({
      	test: /\.js$|\.css$/,
      	filename: '[path].gz',
    }) : false,
].filter(Boolean),

David Salomon Baena Rubio

student•

Tengo este archivo webpack.config.js

  plugins: [
    isProd
      ? new CompressionPlugin({
          test: /\.js|\.css/,
          filename: '[path].gz',
        })
      : false,
    isProd ? new ManifestPlugin() : false,
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [autoprefixer()],
      },
    }),
    new MiniCssExtractPlugin({
      filename: isProd ? 'assets/app-[hash].css' : 'assets/app.css',
    }),
  ],

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.plugins[0] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function
   Details:
    * configuration.plugins[0] should be an object.
      -> Plugin instance
    * configuration.plugins[0] should be an instance of function
      -> Function acting as plugin
 - configuration.plugins[1] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function
   Details:
    * configuration.plugins[1] should be an object.
      -> Plugin instance
    * configuration.plugins[1] should be an instance of function
      -> Function acting as plugin
    at webpack (/home/alvaro/Documents/proyecto-buscador-v2/buscador/node_modules/webpack/lib/webpack.js:31:9)
    at Object.<anonymous> (/home/alvaro/Documents/proyecto-buscador-v2/buscador/src/server/server.js:20:20)
    at Module._compile (internal/modules/cjs/loader.js:971:30)
    at Module._compile (/home/alvaro/Documents/proyecto-buscador-v2/buscador/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1011:10)
    at Object.newLoader [as .js] (/home/alvaro/Documents/proyecto-buscador-v2/buscador/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:822:32)
    at Function.Module._load (internal/modules/cjs/loader.js:730:14)
    at Module.require (internal/modules/cjs/loader.js:864:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/alvaro/Documents/proyecto-buscador-v2/buscador/src/server/index.js:13:1)
    at Module._compile (internal/modules/cjs/loader.js:971:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1011:10)
    at Module.load (internal/modules/cjs/loader.js:822:32)
    at Function.Module._load (internal/modules/cjs/loader.js:730:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1051:12)

David Salomon Baena Rubio

student•

En mi archivo webpack.config.js tengo la siguiente configuración:

plugins: [
    isProd
      ? new CompressionPlugin({
          test: /\.js|\.css/,
          filename: '[path].gz',
        })
      : false,
    isProd ? new ManifestPlugin() : false,
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [autoprefixer()],
      },
    }),
    new MiniCssExtractPlugin({
      filename: isProd ? 'assets/app-[hash].css' : 'assets/app.css',
    }),
  ]

y me sale el siguiente error: console

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.plugins[0] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function
   Details:
    * configuration.plugins[0] should be an object.
      -> Plugin instance
    * configuration.plugins[0] should be an instance of function
      -> Function acting as plugin
 - configuration.plugins[1] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function
   Details:
    * configuration.plugins[1] should be an object.
      -> Plugin instance
    * configuration.plugins[1] should be an instance of function
      -> Function acting as plugin

David Salomon Baena Rubio

student•

Por ahora pude solucionarlo así.

plugins: isProd
    ? [
        new CompressionPlugin({
          test: /\.js|\.css/,
          filename: '[path].gz',
        }),
        new ManifestPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.LoaderOptionsPlugin({
          options: {
            postcss: [autoprefixer()],
          },
        }),
        new MiniCssExtractPlugin({
          filename: isProd ? 'assets/app-[hash].css' : 'assets/app.css',
        }),
      ]
    : [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.LoaderOptionsPlugin({
          options: {
            postcss: [autoprefixer()],
          },
        }),
        new MiniCssExtractPlugin({
          filename: isProd ? 'assets/app-[hash].css' : 'assets/app.css',
        }),
      ]

Enrique Alexis Lopez Araujo

student•

Hola @aabaena puedes compartirme tu repo para ver tu configuracion aunque haya tenido la solucion quiero revisar tu solucion porfavor!

Armando de jesus santiz lopez

student•

Hola, tengo una duda con respecto al peso de los archivos. Según mi razonamiento esto es irrelevante ya que tenemos ssr, es decir ya tenemos contenido para el usuario mientras carga los demás assets por ejemplo app.js. gracias

Carlos Sampol

Team Platzi•

Así tengamos SSR el peso de los archivos es muy importante por que el cliente debe descargarlos igual para poder agregarle interacciones al sitio. Si se renderiza solo desde el server no hay forma de tener eventos como click o llamar al window.

Daniel Esteves

student•

Recuerda que si una página tarda más de tres segundos en cargar perderás un gran porcentaje de usuarios ya que normalmente a las personas no les gusta espera y si tu sitio tarda en poder hacer interacciones con ellos algo estamos haciendo mal

Adrian Camilo Caminos

student•

cuando corro el comando de yarn build me genera el siguiente error

$ webpack-cli --config webpack.config.js --colors
Error: EACCES: permission denied, mkdir '/assets'```

Carlos Sampol

Team Platzi•

Prueba que los folders esten creados. Si no estan creados hazlo y dales permisos :)

Pablo Verduzco

student•

A mi me funciono cambiando mi NODE_ENV a valor de produccion, es decir: .

NODE_ENV=production

. esto lo tienes que hacer en el archivo de .env.

Compresión de Assets

Primeros pasos

¡Vamos a renovar este curso!

Introducción y presentación del curso

¿Qué es Server Side Rendering?

Babel, Express y React

Creación del proyecto base

Configuración de ESLint con Webpack

Preparación de Webpack, Babel, PostCSS y Assets

Usando Plugins y vendor file en Webpack

Integración de Webpack con Express

Integración de Express con React

Servir React con Express

Agregando variables de sass desde webpack

Aplicando history y creando rutas para el servidor

Haciendo initialState accesible y configurando Redux DevTools

Aplicar Server Side Rendering

Definiendo la función main para renderizado desde el servidor

Aplicando la función main para renderizado desde el servidor y creación del string de HTML

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 el frontend y webpack para producción

Compresión de Assets

Hashes

Cierre del Curso