Minimizza e comprimi i payload di rete con Brotli

Michael DiBlasio
Michael DiBlasio
GitHub

Questo codelab è un'estensione del codelab sulla minimizzazione e la compressione dei payload di rete e presuppone che tu abbia familiarità con i concetti di base della compressione. Rispetto ad altri algoritmi di compressione come gzip, questo codelab esplora come la compressione Brotli (br) può ridurre ulteriormente i rapporti di compressione e le dimensioni complessive dell'app.

Screenshot dell'app

Misura

Prima di aggiungere ottimizzazioni, è sempre una buona idea analizzare lo stato attuale dell'applicazione.

  1. Fai clic su Remixa per modificare per rendere modificabile il progetto.
  2. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi Schermo intero schermo intero.

Nel precedente codelab Minimizza e comprimi i payload di rete, abbiamo ridotto le dimensioni di main.js da 225 kB a 61,6 kB. In questo codelab, scoprirai come la compressione Brotli può ridurre ulteriormente le dimensioni di questo bundle.

Compressione Brotli

Brotli è un algoritmo di compressione più recente che può fornire risultati di compressione del testo ancora migliori rispetto a gzip. Secondo CertSimple, le prestazioni di Brotli sono:

  • 14% più piccolo di gzip per JavaScript
  • 21% più piccolo di gzip per HTML
  • 17% più piccolo di gzip per CSS

Per utilizzare Brotli, il tuo server deve supportare HTTPS. Brotli è supportato in tutti i browser moderni. I browser che supportano Brotli includeranno br nelle intestazioni Accept-Encoding:

Accept-Encoding: gzip, deflate, br

Puoi determinare l'algoritmo di compressione utilizzato utilizzando il campo Content-Encoding nella scheda Rete di Strumenti per sviluppatori di Chrome (Command+Option+I o Ctrl+Alt+I):

Riquadro Rete. La colonna Content-encoding mostra le codifiche utilizzate per vari asset, tra cui gzip e brotli (br).

Come attivare Brotli

La configurazione di un server web per l'invio di risorse codificate con Brotli dipende da come pensi di codificarle. Le opzioni sono comprimere dinamicamente le risorse con Brotli al momento della richiesta (dinamica) o codificarle in anticipo in modo che siano già compresse al momento della richiesta da parte dell'utente (statica).

Compressione dinamica

La compressione dinamica prevede la compressione degli asset in tempo reale quando vengono richiesti dal browser.

Vantaggi

  • Non è necessario creare e aggiornare le versioni compresse salvate degli asset.
  • La compressione immediata funziona particolarmente bene per le pagine web generate dinamicamente.

Svantaggi

  • La compressione dei file a livelli più elevati per ottenere rapporti di compressione migliori richiede più tempo. Ciò può causare un calo delle prestazioni, poiché l'utente attende che gli asset vengano compressi prima di essere inviati dal server.

Compressione dinamica con Node ed Express

Il file server.js è responsabile della configurazione del server Node che ospita l'applicazione.

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

In questo modo, viene importato express e viene utilizzato il middleware express.static per caricare tutti i file HTML, JS e CSS statici in public/directory (e questi file vengono creati da webpack con ogni build).

Per assicurarti che tutti gli asset vengano compressi utilizzando brotli ogni volta che vengono richiesti, puoi utilizzare il modulo shrink-ray. Inizia aggiungendolo come devDependency in package.json:

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

E importalo nel file del server, server.js:

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

E aggiungilo come middleware prima di montare express.static:

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

// Compress all requests
app.use(shrinkRay());
app.use(express.static('public'));

Ora ricarica l'app e dai un'occhiata alle dimensioni del bundle nel riquadro Rete:

Dimensioni del bundle con compressione Brotli dinamica.

Ora puoi vedere che brotli è applicato da bz nell'intestazione Content-Encoding. main.bundle.js è ridotto da 225 KB a 53,1 KB. Si tratta di una riduzione di circa il 14% rispetto a gzip (61,6 kB).

Compressione statica

L'idea alla base della compressione statica è quella di comprimere e salvare gli asset in anticipo.

Vantaggi

  • La latenza dovuta a livelli di compressione elevati non è più un problema. Non è necessario eseguire alcuna operazione in tempo reale per comprimere i file, poiché ora possono essere recuperati direttamente.

Svantaggi

  • Gli asset devono essere compressi con ogni build. I tempi di build possono aumentare in modo significativo se vengono utilizzati livelli di compressione elevati.

Compressione statica con Node ed Express con webpack

Poiché la compressione statica prevede la compressione dei file in anticipo, le impostazioni di webpack possono essere modificate per comprimere gli asset durante la fase di build. A questo scopo, puoi utilizzare brotli-webpack-plugin.

Inizia aggiungendolo come devDependency in package.json:

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

Come qualsiasi altro plug-in webpack, importalo nel file di configurazione, webpack.config.js:

var path = require("path");

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

E includilo nell'array dei plug-in:

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

L'array del plug-in utilizza i seguenti argomenti:

  • asset: il nome dell'asset di destinazione.
  • [file] viene sostituito con il nome file dell'asset originale.
  • test: vengono elaborati tutti gli asset che corrispondono a questa espressione regolare (ovvero gli asset JavaScript che terminano con .js).

Ad esempio, main.js verrebbe rinominato in main.js.br.

Quando l'app viene ricaricata e ricostruita, viene creata una versione compressa del bundle principale. Apri la console Glitch per dare un'occhiata ai contenuti della directory finale public/ gestita dal server Node.

  1. Fai clic sul pulsante Strumenti.
  2. Fai clic sul pulsante Console.
  3. Nella console, esegui i seguenti comandi per passare alla directory public e visualizzare tutti i relativi file:
cd public
ls -lh
Dimensioni del bundle con compressione Brotli statica

La versione compressa con brotli del bundle, main.bundle.js.br, ora viene salvata anche qui ed è più piccola di circa il 76% (225 kB rispetto a 53 kB) rispetto a main.bundle.js.

Poi, indica al server di inviare questi file compressi con Brotli ogni volta che vengono richieste le versioni JS originali. Per farlo, definisci un nuovo percorso in server.js prima che i file vengano pubblicati 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 viene utilizzato per indicare al server come rispondere a una richiesta GET per un endpoint specifico. Viene quindi utilizzata una funzione di callback per definire come gestire questa richiesta. Il percorso funziona nel seguente modo:

  • Specificando '*.js' come primo argomento, questo funziona per ogni endpoint attivato per recuperare un file JS.
  • All'interno del callback, .br viene collegato all'URL della richiesta e l'intestazione della risposta Content-Encoding è impostata su br.
  • L'intestazione Content-Type è impostata su application/javascript; charset=UTF-8 per specificare il tipo MIME.
  • Infine, next() garantisce che la sequenza continui con l'eventuale callback successivo.

Poiché alcuni browser potrebbero non supportare la compressione brotli, verifica che sia supportata prima di restituire il file compresso con brotli controllando che l'intestazione della richiesta Accept-Encoding includa br:

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 volta ricaricata l'app, dai un'altra occhiata al riquadro Rete.

Dimensione del bundle di 53,1 kB (da 225 kB)

Operazione riuscita. Hai utilizzato la compressione Brotli per comprimere ulteriormente i tuoi asset.

Conclusione

Questo codelab ha illustrato come brotli può ridurre ulteriormente le dimensioni complessive dell'app. Se supportato, brotli è un algoritmo di compressione più potente di gzip.