Este codelab es una extensión del codelab para reducir y comprimir cargas útiles de red y se supone que conoces los conceptos básicos de la compresión. En comparación con otros algoritmos de compresión, como gzip
, en este codelab se explora cómo la compresión Brotli (br
) puede reducir aún más las relaciones de compresión y el tamaño general de tu app.
Medir
Antes de comenzar a agregar optimizaciones, siempre es conveniente analizar primero el estado actual de la aplicación.
- Haz clic en Remix para editar para que el proyecto sea editable.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .
En el codelab anterior para reducir y comprimir las cargas útiles de red, se redujo el tamaño de main.js
de 225 KB a 61.6 KB. En este codelab, explorarás cómo la compresión Brotli puede reducir aún más el tamaño de este paquete.
Compresión de Brotli
Brotli es un algoritmo de compresión más reciente que puede proporcionar resultados de compresión de texto aún mejores que gzip
. Según CertSimple, el rendimiento de Brotli es el siguiente:
- Un 14% más pequeño que
gzip
para JavaScript - Un 21% más pequeño que
gzip
para HTML - Un 17% más pequeño que
gzip
para CSS
Para usar Brotli, tu servidor debe ser compatible con HTTPS. Brotli es compatible con todos los navegadores modernos. Los 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 el campo Content-Encoding
en la pestaña Network de las Herramientas para desarrolladores de Chrome (Command+Option+I
o Ctrl+Alt+I
):
Cómo habilitar Brotli
La forma en que configures un servidor web para enviar recursos codificados con Brotli depende de cómo planeas codificarlos. Tus opciones son comprimir los recursos de forma dinámica con Brotli en el momento de la solicitud (dinámica) o codificarlos con anticipación para que ya estén comprimidos cuando el usuario los solicite (estático).
Compresión dinámica
La compresión dinámica implica comprimir los recursos sobre la marcha a medida que el navegador los solicita.
Ventajas
- No es necesario crear ni actualizar versiones comprimidas guardadas de los recursos.
- La compresión sobre la marcha funciona especialmente bien para páginas web generadas de forma dinámica.
Desventajas
- La compresión de archivos en niveles más altos para lograr mejores relaciones de compresión tarda más. Esto puede provocar un impacto en el rendimiento, ya que el usuario espera a que los recursos se compriman antes de que el servidor los envíe.
Compresión dinámica con Node y Express
El archivo server.js
se encarga de configurar el servidor de nodo que aloja la aplicación.
const express = require('express');
const app = express();
app.use(express.static('public'));
const listener = app.listen(process.env.PORT, function() {
console.log(`Your app is listening on port ${listener.address().port}`);
});
Todo esto solo importa express
y usa el middleware express.static
para cargar todos los archivos HTML, JS y CSS estáticos en public/directory
(y webpack crea esos archivos con cada compilación).
Para asegurarte de que todos los activos se compriman con brotli cada vez que se soliciten, se puede usar el módulo shrink-ray
. Primero, agrégalo como devDependency
en package.json
:
"devDependencies": {
// ...
"shrink-ray": "^0.1.3"
},
Y, luego, impórtalo en el archivo del servidor, server.js
:
const express = require('express');
const shrinkRay = require('shrink-ray');
Y agrégalo como un middleware antes de que se monte express.static
:
// ...
const 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 de red:
Ahora puedes ver que brotli
se aplica desde bz
en el encabezado Content-Encoding
.
main.bundle.js
se redujo de 225 KB a 53.1 KB. Esto es 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 tener activos comprimidos y guardados con anticipación.
Ventajas
- La latencia debido a los altos niveles de compresión ya no es un problema. No se necesita hacer nada 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 de manera significativa si se usan niveles de compresión altos.
Compresión estática con Node y Express con webpack
Dado que la compresión estática implica comprimir los archivos con anticipación, se puede modificar la configuración de Webpack para comprimir los recursos como parte del paso de compilación. Para ello, se puede usar brotli-webpack-plugin
.
Comienza por agregarlo como devDependency
en package.json
:
"devDependencies": {
// ...
"brotli-webpack-plugin": "^1.1.0"
},
Al igual que cualquier otro complemento de webpack, impórtalo en el archivo de configuración, webpack.config.js
:
var path = require("path");
//...
var BrotliPlugin = require('brotli-webpack-plugin');
Y, además, inclúyelo en el array de complementos:
module.exports = {
// ...
plugins: [
// ...
new BrotliPlugin({
asset: '[file].br',
test: /\.(js)$/
})
]
},
El array de complementos usa los siguientes argumentos:
asset
: Es el nombre del activo de destino.[file]
se reemplaza por el nombre de archivo del recurso original.test
: Se procesan todos los recursos que coinciden con esta RegExp (es decir, los recursos de JavaScript que terminan en.js
).
Por ejemplo, el nombre de main.js
se cambiaría a main.js.br
.
Cuando la app se vuelve a cargar y compilar, se crea una versión comprimida del paquete principal. Abre Glitch Console para ver el contenido del directorio public/
final que entrega el servidor de Node.
- Haz clic en el botón Herramientas.
- Haz clic en el botón Consola.
- En la consola, ejecuta los siguientes comandos para cambiar al directorio
public
y ver todos sus archivos:
cd public
ls -lh
La versión comprimida de Brotli del paquete, main.bundle.js.br
, ahora también se guarda aquí y es alrededor de un 76% más pequeña (225 KB en comparación con 53 KB) que main.bundle.js
.
A continuación, dile al servidor que envíe estos archivos comprimidos con Brotli cada vez que se soliciten sus versiones de JS originales. Para ello, define una ruta nueva en server.js
antes de que se entreguen los archivos con express.static
.
const express = require('express');
const 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 esta
solicitud. La ruta funciona de la siguiente manera:
- Especificar
'*.js'
como primer argumento significa que esto funciona para cada extremo que se activa para recuperar un archivo JS. - Dentro de la devolución de llamada,
.br
se adjunta a la URL de la solicitud y el encabezado de respuestaContent-Encoding
se establece enbr
. - El encabezado
Content-Type
se establece enapplication/javascript; charset=UTF-8
para especificar el tipo de MIME. - Por último,
next()
se asegura de que la secuencia continúe con cualquier devolución de llamada que pueda ser la siguiente.
Debido a que es posible que algunos navegadores no admitan la compresión brotli, verifica que el encabezado de la solicitud Accept-Encoding
incluya br
para confirmar que brotli sea compatible antes de mostrar el archivo comprimido:
const express = require('express');
const 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 revisar el panel de red.
¡Listo! Usaste la compresión Brotli para comprimir aún más tus recursos.
Conclusión
En este codelab, se ilustró cómo brotli
puede reducir aún más el tamaño general de tu app. Cuando es compatible, brotli
es un algoritmo de compresión más potente que gzip
.