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.
- Fai clic su Remixa per modificare per rendere modificabile il progetto.
- 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.
- Fai clic sul pulsante Strumenti.
- Fai clic sul pulsante Console.
- 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 rispostaContent-Encoding
è impostata subr
. - L'intestazione
Content-Type
è impostata suapplication/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
.