Minifikuj i kompresuj ładunki sieciowe za pomocą brotli

Michael DiBlasio

Ten moduł jest rozszerzeniem modułu Minify i kompresuj dane sieciowe w formacie JSON i zakłada, że znasz podstawowe pojęcia związane z kompresją. W tym Codelab porównujemy algorytmy kompresji, np. gzip, i sprawdzamy, jak kompresja Brotli (br) może jeszcze bardziej zmniejszyć współczynniki kompresji i ogólny rozmiar aplikacji.

Zmierz odległość

Zanim zaczniesz wprowadzać optymalizacje, warto najpierw przeanalizować obecny stan aplikacji.

1. Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
2. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran .

W poprzednim warstwie kodu Zmniejsz i skompresuj ładunki sieciowe udało nam się zmniejszyć rozmiar pliku main.js z 225 KB do 61,6 KB. W tym laboratorium programistycznym dowiesz się, jak kompresja Brotli może jeszcze bardziej zmniejszyć rozmiar pakietu.

Kompresja Brotli

Brotli to nowszy algorytm kompresji, który może zapewnić jeszcze lepsze wyniki kompresji tekstu niż gzip. Według CertSimple wydajność Brotli:

• 14% mniejsze niż gzip w przypadku JavaScript
• 21% mniejsze niż gzip w przypadku HTML
• 17% mniejsze niż gzip w przypadku kodu CSS

Aby używać Brotli, serwer musi obsługiwać HTTPS. Brotli jest obsługiwany we wszystkich nowoczesnych przeglądarkach. Przeglądarki, które obsługują Brotli, będą zawierać br w nagłówkach Accept-Encoding:

Accept-Encoding: gzip, deflate, br

Który algorytm kompresji jest używany, możesz sprawdzić na karcie Network (Sieć) w Narzędziach deweloperskich w Chrome (Content-Encoding lub Ctrl+Alt+I):Command+Option+I

Jak włączyć Brotli

Sposób konfiguracji serwera WWW do wysyłania zasobów zakodowanych za pomocą Brotli zależy od tego, jak zamierzasz je zakodować. Możesz dynamicznie kompresować zasoby za pomocą Brotli w momencie wysyłania żądania (dynamicznie) lub zakodować je z wyprzedzeniem, aby były już skompresowane w momencie, gdy użytkownik je zażąda (statycznie).

Kompresja dynamiczna

Kompresja dynamiczna polega na kompresowaniu zasobów na bieżąco, gdy są one żądane przez przeglądarkę.

Zalety

• Nie trzeba tworzyć ani aktualizować zapisanych skompresowanych wersji zasobów.
• Kompresowanie na bieżąco sprawdza się zwłaszcza w przypadku stron internetowych generowanych dynamicznie.

Wady

• Kompresowanie plików na wyższych poziomach w celu uzyskania lepszych współczynników kompresji trwa dłużej. Może to spowodować spadek wydajności, ponieważ użytkownik musi czekać na skompresowanie zasobów, zanim zostaną wysłane przez serwer.

Kompresja dynamiczna za pomocą Node i Express

Plik server.js odpowiada za konfigurowanie serwera Node, na którym działa aplikacja.

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

Wszystko to polega na importowaniu express i używaniu pośrednika express.static do wczytywania wszystkich statycznych plików HTML, JS i CSS w public/directory (pliki te są tworzone przez webpack przy każdym tworzeniu).

Aby mieć pewność, że wszystkie zasoby są kompresowane za pomocą brotli za każdym razem, gdy są żądane, możesz użyć modułu shrink-ray. Zacznij od dodania go jako devDependency w sekcji package.json:

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

Następnie zaimportuj go do pliku serwera server.js:

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

Dodaj go jako element pośredniczący przed zamontowaniem express.static:

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

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

Teraz ponownie załaduj aplikację i sprawdź rozmiar pakietu w panelu Sieć:

W nagłówku Content-Encoding możesz teraz zobaczyć, że brotli jest stosowany z bz. Plik main.bundle.js został spakowany z 225 KB do 53,1 KB. Jest to o około 14% mniejszy rozmiar niż w przypadku gzip (61,6 KB).

Kompresja statyczna

Kompresja statyczna polega na wcześniejszym skompresowaniu i zapisaniu zasobów.

Zalety

• Opóźnienia spowodowane wysokim poziomem kompresji nie stanowią już problemu. Aby skompresować pliki, nie trzeba nic robić na bieżąco, ponieważ można je pobrać bezpośrednio.

Wady

• Zasoby muszą być kompresowane w ramach każdej kompilacji. Czas kompilacji może się znacznie wydłużyć, jeśli używasz wysokiego poziomu kompresji.

Statyczna kompresja za pomocą Node i Express z webpack

Kompresja statyczna polega na wcześniejszym skompresowaniu plików, więc ustawienia Webpacka można zmodyfikować, aby kompresować zasoby w ramach etapu kompilacji. Do tego celu możesz użyć funkcji brotli-webpack-plugin.

Zacznij od dodania go jako devDependency w sekcji package.json:

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

Podobnie jak w przypadku innych wtyczek webpacka, zaimportuj ją do pliku konfiguracji:webpack.config.js

var path = require("path");

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

I uwzględnij go w tablicy plugins:

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

Tablica wtyczki używa tych argumentów:

• asset: nazwa docelowego komponentu.
• [file] zostanie zastąpiony pierwotną nazwą pliku zasobu.
• test: przetwarzane są wszystkie zasoby pasujące do tego wyrażenia regularnego (czyli zasoby JavaScript kończące się na .js).

Na przykład identyfikator main.js zostałby zmieniony na main.js.br.

Gdy aplikacja zostanie ponownie załadowana i ponownie utworzona, zostanie utworzona skompresowana wersja głównego pakietu. Otwórz konsolę Glitch, aby sprawdzić, co znajduje się w katalogupublic/, który jest obsługiwany przez serwer Node.

1. Kliknij przycisk Narzędzia.
2. Kliknij przycisk Konsola.
3. W konsoli uruchom te polecenia, aby przejść do katalogu public i wyświetlić wszystkie jego pliki:

cd public
ls -lh

Wersja pakietu skompresowana algorytmem brotli, main.bundle.js.br, jest teraz również zapisywana tutaj i jest o około 76% mniejsza (225 KB w porównaniu z 53 KB) niż main.bundle.js.

Następnie powiedz serwerowi, aby wysyłał te pliki skompresowane za pomocą Brotli, gdy tylko pojawi się żądanie ich oryginalnych wersji. Aby to zrobić, zdefiniuj nową trasę w server.js, zanim pliki zostaną przesłane za pomocą 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 służy do informowania serwera, jak ma reagować na żądanie GET dotyczące konkretnego punktu końcowego. Następnie używa się funkcji wywołania zwrotnego, aby określić sposób obsługi tego żądania. Trasa działa w ten sposób:

• Podanie wartości '*.js' jako pierwszego argumentu oznacza, że ta funkcja działa w przypadku każdego punktu końcowego, który jest wywoływany w celu pobrania pliku JS.
• W wywołaniu zwrotnym parametr .br jest dołączany do adresu URL żądania, a nagłówek odpowiedzi Content-Encoding jest ustawiony na br.
• Aby określić typ MIME, nagłówek Content-Type ma wartość application/javascript; charset=UTF-8.
• Na koniec next() zapewnia, że sekwencja będzie kontynuowana w przypadku każdego wywołania zwrotnego, które może nastąpić.

Niektóre przeglądarki mogą nie obsługiwać kompresji brotli, dlatego przed zwróceniem skompresowanego pliku brotli sprawdź, czy przeglądarka obsługuje brotli. Aby to zrobić, sprawdź, czy nagłówek Accept-Encoding zawiera 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'));

Gdy aplikacja zostanie ponownie załadowana, jeszcze raz sprawdź panel Sieć.

Gotowe! Użyłeś kompresji Brotli, aby jeszcze bardziej skompresować zasoby.

Podsumowanie

Ten warsztat programistyczny pokazuje, jak brotli może jeszcze bardziej zmniejszyć rozmiar aplikacji. W przypadku obsługi brotli jest to wydajniejszy algorytm kompresji niż gzip.