Reduce y comprime las cargas útiles de red con brotli

Michael DiBlasio

Este codelab es una extensión del curso Cómo reducir y comprimir las cargas útiles de red codelab y supone que estás familiarizado con los conceptos básicos de la compresión. Como En comparación con otros algoritmos de compresión, como gzip, en este codelab se explora cómo La compresión de Brotli puede reducir aún más las proporciones de compresión y el impacto general de tamaño del ensamble.

Medir

Antes de comenzar a agregar optimizaciones, siempre es buena idea analizar primero el estado actual de la aplicación.

1. Haz clic en Remix para editar para que el proyecto se pueda editar.
2. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa

En la lección anterior Reduce y comprime las cargas útiles de red codelab, redujimos el tamaño de main.js de 225 KB a 61.6 KB. En este codelab, exploraremos cómo la compresión Brotli puede reducir aún más el tamaño de estos paquetes.

Compresión de Brotli

Brotli es un algoritmo de compresión nuevo que puede proporcionar una compresión de texto aún mejor resultados que gzip. Según CertSimple, el rendimiento de Brotli es:

• Un 14% más pequeño que gzip para JavaScript
• Un 21% más pequeño que gzip en HTML
• Un 17% más pequeño que gzip para CSS

Para usar Brotli, tu servidor debe admitir HTTPS. Brotli es compatible con las versiones más recientes de la mayoría de los navegadores. Navegadores que admiten Brotli incluirán br en los encabezados Accept-Encoding:

Accept-Encoding: gzip, deflate, br

Puedes determinar qué algoritmo de compresión se usa con Content-Encoding. en la pestaña Red de herramientas para desarrolladores de Chrome (Command+Option+I o Ctrl+Alt+I):

Habilitando Brotli

Compresión dinámica

La compresión dinámica implica comprimir recursos sobre la marcha a medida que se que solicita el navegador.

Ventajas

• Crear y actualizar versiones comprimidas guardadas de los recursos no tiene por qué listo.
• La compresión sobre la marcha funciona especialmente bien para las páginas web que generados de forma dinámica.

Desventajas

• Comprimir archivos en niveles más altos para lograr mejores relaciones de compresión lleva por más tiempo. Esto puede provocar un hit de rendimiento mientras el usuario espera a que los recursos comprimir antes de que el servidor los envíe.

Compresión dinámica con Node/Express

El archivo server.js se encarga de configurar el servidor de Node que aloja la aplicación.

var express = require('express');

var app = express();

app.use(express.static('public'));

var listener = app.listen(process.env.PORT, function() {
  console.log('Your app is listening on port ' + listener.address().port);
});

Todo lo que hace actualmente es importar express y usar express.static middleware para cargar todos los archivos HTML, JS y CSS estáticos en la public/directory (y esos archivos se crean por webpack con cada compilación).

Para asegurarse de que todos los recursos se compriman con brotli cada vez que se solicitado, el shrink-ray basado en el módulo. Primero, agrégalo como devDependency en package.json:

"devDependencies": {
  //...
  "shrink-ray": "^0.1.3"
},

Luego, impórtalo al archivo del servidor, server.js:

var express = require('express');
var shrinkRay = require('shrink-ray');

Agrégalo como middleware antes de que se active express.static:

//...
var app = express();

// compress all requests
app.use(shrinkRay());

app.use(express.static('public'));

Ahora, vuelve a cargar la app y observa el tamaño del paquete en el panel Network:

Ahora puedes ver que brotli se aplicó desde bz en el encabezado Content-Encoding. main.bundle.js se redujo de 225 KB a 53.1 KB. Es aproximadamente un 14% más pequeño en comparación con gzip (61.6 KB).

Compresión estática

La idea detrás de la compresión estática es comprimir y guardar los recursos por adelantado un plazo determinado.

Ventajas

• La latencia debido a los altos niveles de compresión ya no es un problema. Nada deben realizarse sobre la marcha para comprimir los archivos, ya que ahora se pueden recuperar directamente.

Desventajas

• Los recursos deben comprimirse con cada compilación. Los tiempos de compilación pueden aumentar si se usan altos niveles de compresión.

Compresión estática con Node/Express y webpack

Dado que la compresión estática implica comprimir archivos con anticipación, webpack de Terraform para comprimir los recursos como parte del paso de compilación. El Para ello, se puede usar brotli-webpack-plugin.

Primero, agrégalo como devDependency en package.json:

"devDependencies": {
  //...
 "brotli-webpack-plugin": "^1.1.0"
},

Como cualquier otro complemento webpack, impórtalo en el archivo de configuración, webpack.config.js:

var path = require("path");

//...
var BrotliPlugin = require('brotli-webpack-plugin');

Inclúyelo en el array de complementos:

module.exports = {
  // ...
  plugins: [
    // ...
    new BrotliPlugin({
      asset: '[file].br',
      test: /\.(js)$/
    })
  ]
},

El array del complemento usa los siguientes argumentos:

• asset: Es el nombre del recurso de destino.
• [file] se reemplaza por el nombre del archivo del activo original.
• test: Todos los recursos que coinciden con esta regex (es decir, los recursos de JavaScript que terminan en .js).

Por ejemplo, se cambiará el nombre de main.js a main.js.br.

Cuando la app se vuelve a cargar y compila, se genera una versión comprimida del paquete principal se creó. Abre la consola de Glitch para ver qué hay dentro de la final. Directorio public/ que entrega el servidor de Node.

1. Haz clic en el botón Herramientas.
2. Haz clic en el botón Consola.
3. En la consola, ejecuta los siguientes comandos para cambiar a public. y verás todos sus archivos:

cd public
ls -lh

Se guardó la versión comprimida de Brotli del paquete main.bundle.js.br. y es ~76% más pequeño en tamaño (225 KB en comparación con 53 KB) que main.bundle.js

Luego, indícale al servidor que envíe estos archivos comprimidos con brotli cada vez que las versiones originales de JS. Esto se puede hacer definiendo un nuevo Ruta en server.js antes de que los archivos se entreguen con express.static.

var express = require('express');

var app = express();

app.get('*.js', (req, res, next) => {
  req.url = req.url + '.br';
  res.set('Content-Encoding', 'br');
  res.set('Content-Type', 'application/javascript; charset=UTF-8');
  next();
});

app.use(express.static('public'));

app.get se usa para indicarle al servidor cómo responder a una solicitud GET para un extremo específico. Luego, se usa una función de devolución de llamada para definir cómo controlar esto. para cada solicitud. La ruta funciona de la siguiente manera:

• Especificar '*.js' como primer argumento significa que funciona para cada que se activa para recuperar un archivo JS.
• En la devolución de llamada, se adjunta .br a la URL de la solicitud y al El encabezado de respuesta de Content-Encoding se estableció en br.
• El encabezado Content-Type está configurado como application/javascript; charset=UTF-8 para especificar el tipo de MIME.
• Por último, next() garantiza que la secuencia continúe con cualquier devolución de llamada que pueda será el próximo.

Es posible que algunos navegadores no admitan la compresión de Brotli: compatible antes de mostrar el archivo comprimido con brotli, verificando El encabezado de la solicitud Accept-Encoding incluye br:

var express = require('express');

var app = express();

app.get('*.js', (req, res, next) => {
  if (req.header('Accept-Encoding').includes('br')) {
    req.url = req.url + '.br';
    console.log(req.header('Accept-Encoding'));
    res.set('Content-Encoding', 'br');
    res.set('Content-Type', 'application/javascript; charset=UTF-8');
  }
  next();
});

app.use(express.static('public'));

Una vez que se vuelva a cargar la app, vuelve a observar el panel Network.

¡Listo! ¡Has utilizado la compresión Brotli para comprimir aún más tus recursos!

Conclusión

En este codelab, ilustró cómo brotli puede reducir aún más el comportamiento de tu app de tamaño del ensamble. Si es compatible, brotli es un algoritmo de compresión más potente que gzip