Minimizza e comprimi i payload di rete con Brotli

Questo codelab è un'estensione del codelab per minimizzare e comprimere i 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 di Broli può ridurre ulteriormente i rapporti di compressione e le dimensioni complessive della tua app.

Misurazione

Prima di iniziare con l'aggiunta di ottimizzazioni, è sempre opportuno 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 Schermo intero .

Nel precedente codelab per minimizzare e comprimere 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 di Brotli può ridurre ulteriormente le dimensioni di questo bundle.

Compressione di Brotli

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

• 14% inferiore a gzip per JavaScript
• 21% minore di gzip per HTML
• 17% inferiore a gzip per il CSS

Per utilizzare Brotli, il tuo server deve supportare HTTPS. Brotli è supportato nelle versioni più recenti della maggior parte dei browser. I browser che supportano Brotli includeranno br nelle intestazioni Accept-Encoding:

Accept-Encoding: gzip, deflate, br

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

Attivazione di Brotli

Compressione dinamica

La compressione dinamica prevede la compressione immediata degli asset 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 hit da rendimento in quanto l'utente attende che gli asset vengano compressi prima di essere inviati dal server.

Compressione dinamica con Node/Express

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

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

Al momento è sufficiente importare express e utilizzare il middleware express.static per caricare tutti i file statici HTML, JS e CSS in public/directory (i file vengono creati tramite webpack con ogni build).

Per assicurarti che tutti gli asset vengano compressi utilizzando brotli ogni volta che vengono richiesti, è possibile 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:

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

Aggiungilo come middleware prima del montaggio di express.static:

//...
var 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:

Ora puoi vedere che brotli è applicato da bz nell'intestazione Content-Encoding. main.bundle.js è stato 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 è comprimere gli asset e salvarli in anticipo.

Vantaggi

• La latenza dovuta a livelli di compressione elevati non è più un problema. Non è necessario che venga effettuato nulla al volo per comprimere i file, poiché ora possono essere recuperati direttamente.

Svantaggi

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

Compressione statica con Node/Express e webpack

Poiché la compressione statica prevede la compressione anticipata dei file, le impostazioni webpack possono essere modificate per comprimere gli asset come parte del passaggio di creazione. A questo scopo è possibile utilizzare brotli-webpack-plugin.

Inizia aggiungendolo come devDependency in package.json:

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

Come per 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 di plugin:

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

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

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

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

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

1. Fai clic sul pulsante Strumenti.
2. Fai clic sul pulsante Console.
3. Nella console, esegui questi comandi per passare alla directory public e visualizzare tutti i relativi file:

cd public
ls -lh

Ora anche la versione compressa brotli del bundle, main.bundle.js.br, viene salvata qui e ha dimensioni di circa il 76% inferiori (225 kB rispetto a 53 kB) rispetto a main.bundle.js.

Quindi, chiedi al server di inviare questi file compressi in formato Brotli ogni volta che vengono richieste le versioni JS originali. Per farlo, puoi definire una nuova route in server.js prima che i file vengano pubblicati 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 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:

• Specificare '*.js' come primo argomento significa che questa operazione funziona per ogni endpoint attivato per recuperare un file JS.
• All'interno del callback, .br è associato 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 tutti i callback successivi.

Poiché alcuni browser potrebbero non supportare la compressione brotli, verifica che il file brotli sia supportato prima di restituire il file compresso controllando che l'intestazione della richiesta Accept-Encoding includa 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 volta ricaricata l'app, dai un'altra occhiata al riquadro Rete.

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

Conclusione

Questo codelab ha illustrato in che modo brotli può ridurre ulteriormente le dimensioni complessive della tua app. Se supportato, brotli è un algoritmo di compressione più potente di gzip.