Minimizza e comprimi i payload di rete con Brotli

Michael DiBlasio

Per seguire questo codelab, apri questo Glitch in una seconda scheda.

Nota: questo codelab utilizza Chrome DevTools. Scarica Chrome se non l'hai ancora fatto.

Questo codelab è un'estensione della funzionalità Minimizza e comprimi i payload di rete codelab e presuppone che tu abbia familiarità con i concetti di base della compressione. Come rispetto ad altri algoritmi di compressione come gzip, questo codelab esplora come La compressione di Brotli può ridurre ulteriormente i rapporti di compressione e il rendimento complessivo della tua app dimensioni.

Misura

Nota: poiché in questa applicazione viene utilizzato webpack, qualsiasi modifica apportata al codice attiverà una nuova build che può richiedere alcuni secondi. Al termine dell'operazione, dovresti vedere le modifiche applicate all'applicazione.

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

Nella precedente sezione Minimizza e comprimi i payload di rete codelab, abbiamo ridotto le dimensioni di main.js da 225 kB a 61,6 kB. In questo codelab, vedremo in che modo la compressione Brotli può ridurre ulteriormente le dimensioni di questo bundle.

Compressione di Brotli

Avviso: molte piattaforme di hosting, CDN e server proxy inversi codificano gli asset con la compressione per impostazione predefinita o consentono di configurarli facilmente. Se la tua piattaforma di hosting supporta Brotli, potrebbe non essere necessario configurare il server per comprimere i tuoi asset con Brotli, come descritto in questo tutorial.

Brotli è un algoritmo di compressione più recente che può fornire una compressione del testo ancora migliore di gzip. In base a Il rendimento di CertSimple, Brotli è:

• 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 in più recenti della maggior parte dei browser. Browser che supportano Brotli includeranno br nelle intestazioni Accept-Encoding:

Accept-Encoding: gzip, deflate, br

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

Attivazione di Brotli

Compressione dinamica

La compressione dinamica comporta la compressione immediata degli asset quando questi vengono come richiesto dal browser.

Pro

• Non è necessario creare e aggiornare le versioni compresse salvate degli asset fatto.
• La compressione immediata funziona particolarmente bene per le pagine web che hanno generate in modo dinamico.

Contro

• La compressione dei file a livelli più elevati per ottenere rapporti di compressione migliori richiede più a lungo. Ciò può causare un hit da rendimento mentre l'utente attende che gli asset vengano vengono compressi prima di essere inviati dal server.

Compressione dinamica con Node/Express

Il file server.js è responsabile della configurazione del server Node che ospita per 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, tutto ciò che devi fare è importare express e utilizzare express.static middleware per caricare tutti i file statici HTML, JS e CSS public/directory (e questi file vengono creati da webpack con ogni build).

Assicurarsi che tutti gli asset vengano compressi usando brotli ogni volta richiesto, il shrink-ray di questo modulo. 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. Minore di circa il 14% rispetto a gzip (61,6 kB).

Nota: Brotli ha undici livelli qualitativi da 0 (senza compressione) a 9 (compressione massima). Una qualità 1 è molto veloce ma meno efficace, mentre un'impostazione di qualità 11 è molto lenta ma consente un notevole risparmio in termini di dimensioni del file. Tieni presente che, a differenza della libreria brotli standard, che per impostazione predefinita viene impostata sulla qualità 11, shrink-ray utilizza la qualità 4 per impostazione predefinita, che in genere è più appropriata per i contenuti dinamici. Puoi regolare i parametri dell'algoritmo brotli passando un parametro options a shrinkRay([options]).

Compressione statica

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

Pro

• La latenza dovuta a livelli di compressione elevati non è più un problema. Niente devono essere eseguite immediatamente per comprimere i file poiché ora possono essere recuperati strato Add.

Contro

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

Compressione statica con Node/Express e webpack

Poiché la compressione statica comporta la compressione anticipata dei file, puoi modificare le impostazioni in modo da comprimere gli asset come parte del passaggio di creazione. La 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: tutti gli asset che corrispondono a questa espressione regolare, ovvero gli asset JavaScript che terminano con .js) vengono elaborati.

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

Quando l'app viene ricaricata e ricreata, viene generata una versione compressa del bundle principale ora creato. Apri la console Glitch per dare un'occhiata alla finale Directory public/ gestita dal server Node.

1. Fai clic sul pulsante Strumenti.
2. Fai clic sul pulsante Console.
3. Nella console, esegui questi comandi per passare all'public e vedere tutti i suoi file:

cd public
ls -lh

La versione compressa brotli del bundle, main.bundle.js.br, è ora salvata e di dimensioni inferiori del 76% circa (225 kB rispetto a 53 kB) rispetto main.bundle.js.

Quindi, chiedi al server di inviare questi file compressi in formato brotli ogni volta che vengono richieste le versioni JS originali. A questo scopo, definisci una nuova percorso 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 uno specifico endpoint. Viene quindi utilizzata una funzione di callback per definire come gestire richiesta. Il percorso funziona nel seguente modo:

• Specificare '*.js' come primo argomento significa che questo funziona per ogni endpoint che viene attivato per recuperare un file JS.
• Nel callback, .br è allegato 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 su e specificare il tipo MIME.
• Infine, next() assicura che la sequenza continui con tutti i callback che potrebbero essere il prossimo.

Poiché alcuni browser potrebbero non supportare la compressione brotli, verifica che sia supportati prima di restituire il file compresso in formato brotli. L'intestazione della richiesta Accept-Encoding include 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 entrate complessive della tua app dimensioni. Se supportato, brotli è un algoritmo di compressione più potente di gzip.

Avviso: ricordati di verificare se la tua CDN supporta brotli prima dell'implementazione manuale. Se devi implementare brotli manualmente (come descritto in questo codelab) ma disponi del supporto CDN per altri algoritmi di compressione, come gzip, ti consigliamo di valutare i vantaggi di brotli rispetto all'impegno richiesto per l'implementazione.