Minifikuj i kompresuj ładunki sieciowe za pomocą brotli

Michael DiBlasio

Aby wykonać to ćwiczenia z programowania, otwórz tę zakłócenie w drugiej karcie.

Uwaga: te ćwiczenia z programowania korzystają z Narzędzi deweloperskich w Chrome. Pobierz Chrome, jeśli jeszcze jej nie masz.

To ćwiczenie w Codelabs jest rozszerzeniem funkcji Zmniejszanie i kompresowanie ładunków sieciowych ćwiczenie w Codelabs i zakłada, że znasz podstawowe pojęcia związane z kompresją. Jako w porównaniu z innymi algorytmami kompresji, takimi jak gzip, z tego ćwiczenia Kompresja Brotli może jeszcze bardziej zmniejszyć współczynnik kompresji oraz ogólny rozmiaru.

Zmierz odległość

Uwaga: ponieważ w tej aplikacji używany jest pakiet webpack, wszelkie zmiany w kodzie spowodują uruchomienie nowej kompilacji, która może potrwać kilka sekund. Po jego zakończeniu zmiany powinny być widoczne w aplikacji.

Zanim zagłębimy się w temat optymalizacji, warto najpierw przeanalizować o bieżącym stanie aplikacji.

1. Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
2. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran

W poprzedniej sekcji Minifikowanie i kompresowanie ładunków sieciowych ćwiczenie w Codelabs zmniejszyliśmy rozmiar pliku main.js z 225 KB do 61,6 KB. W ramach tego ćwiczenia w Codelabs przeanalizujemy, jak kompresja Brotli może jeszcze bardziej zmniejszyć ten rozmiar pakietu.

Kompresja Brotli

Ostrzeżenie: wiele platform hostingowych, sieci CDN i odwrotnych serwerów proxy koduje zasoby domyślnie z wykorzystaniem kompresji lub umożliwia ich łatwe konfigurowanie. Jeśli Twoja platforma hostingowa obsługuje Brotli, być może nie musisz konfigurować swojego serwera pod kątem kompresowania zasobów za pomocą Brotli w sposób opisany w tym samouczku.

Brotli to nowszy algorytm kompresji, który może zapewnić jeszcze lepszą kompresję tekstu wyników niż gzip. Według Skuteczność CertSimple i brotli to:

• O 14% mniejszy niż gzip w przypadku JavaScriptu
• O 21% mniejsza niż gzip w przypadku kodu HTML
• O 17% mniejsza niż gzip w przypadku usługi porównywania cen

Aby można było używać wersji Brotli, Twój serwer musi obsługiwać protokół HTTPS. Typu Brotli jest obsługiwany w najnowszych wersji większości przeglądarek. Przeglądarki które obsługują format Brotli, będą umieszczać br w nagłówkach Accept-Encoding:

Accept-Encoding: gzip, deflate, br

Używany algorytm kompresji możesz sprawdzić za pomocą funkcji Content-Encoding na karcie Sieć w narzędziach dla programistów w Chrome (Command+Option+I lub Ctrl+Alt+I):

Włączam Brotli

Kompresja dynamiczna

Kompresja dynamiczna polega na kompresowaniu zasobów na bieżąco. żądania przeglądarki.

Zalety

• Nie musisz tworzyć ani aktualizować zapisanych, skompresowanych wersji zasobów gotowe.
• Kompresja „w czasie rzeczywistym” sprawdza się szczególnie dobrze w przypadku stron internetowych, które generowane dynamicznie.

Wady

• Kompresja plików na wyższych poziomach w celu osiągnięcia lepszych współczynników kompresji wymaga dłuższą. Może to spowodować trafienie na skuteczność, gdy użytkownik czeka, aż zasoby kompresować przed wysłaniem przez serwer.

Dynamiczna kompresja Node/Express

Plik server.js odpowiada za konfigurację serwera węzła, który hostuje aplikacji.

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

Obecnie robi to tylko importowanie pliku express i używanie express.static oprogramowania pośredniczącego, by wczytywać wszystkie statyczne pliki HTML, JS i CSS w public/directory (a te pliki są tworzone przez pakiet internetowy z każdą kompilacją).

Aby mieć pewność, że wszystkie zasoby są skompresowane za pomocą brotli za każdym razem, shrink-ray . Najpierw dodaj go jako devDependency w aplikacji package.json:

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

I zaimportuj go do pliku serwera, server.js:

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

Przed podłączeniem usługi express.static dodaj ją jako oprogramowanie pośredniczące:

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

// compress all requests
app.use(shrinkRay());

app.use(express.static('public'));

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

Teraz w nagłówku Content-Encoding widać, że atrybut brotli został zastosowany z poziomu bz. Rozmiar pliku main.bundle.js został zmniejszony z 225 KB do 53,1 KB. To o około 14% mniejsze. w porównaniu z plikiem gzip (61,6 KB).

Uwaga: Brotli ma 11 poziomów jakości od 0 (bez kompresji) do 9 (maksymalna kompresja). Jakość 1 jest bardzo szybka, ale mniej skuteczna, natomiast ustawienie jakości 11 jest bardzo wolne, ale znacznie oszczędza rozmiar pliku. Pamiętaj, że w przeciwieństwie do standardowej biblioteki brotli, której domyślnym ustawieniem jest 11, shrink-ray ma domyślnie wartość 4, która jest bardziej odpowiednia w przypadku zawartości dynamicznej. Możesz dostosować parametry algorytmu brotli, przekazując parametry options do funkcji shrinkRay([options]).

Kompresja statyczna

Idea kompresji statycznej polega na skompresowaniu i zapisaniu zasobów. czasu.

Zalety

• Czas oczekiwania związany z wysokim poziomem kompresji nie jest już problemem. Brak kompresować pliki na bieżąco, ponieważ są one dostępne do pobrania; bezpośrednio.

Wady

• Zasoby muszą być skompresowane przy każdej kompilacji. Czas kompilacji może być dłuższy znacznie w przypadku zastosowania wysokiego poziomu kompresji.

Kompresja statyczna z użyciem Node/Express i pakietu webpack

Kompresja statyczna wymaga wcześniejszej kompresji plików, dlatego Webpack ustawień można modyfikować w celu skompresowania zasobów na etapie kompilacji. Można do tego użyć usługi brotli-webpack-plugin.

Najpierw dodaj go jako devDependency w aplikacji package.json:

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

Jak każdą inną wtyczkę pakietu internetowego, zaimportuj ją do pliku konfiguracji, webpack.config.js:

var path = require("path");

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

Dodaj go do tablicy wtyczek:

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

Tablica wtyczek używa następujących argumentów:

• asset: nazwa zasobu docelowego.
• Pole [file] zostało zastąpione nazwą oryginalnego pliku zasobu.
• test: wszystkie zasoby pasujące do tego wyrażenia regularnego (czyli zasoby JavaScript kończące się na .js) są przetwarzane.

Na przykład nazwa main.js zostanie zmieniona na main.js.br.

Przy ponownym ładowaniu i odtwarzaniu aplikacji skompresowana wersja głównego pakietu utworzony. Otwórz konsolę glitcha, aby zobaczyć, co jest w środku Katalog public/ obsługiwany przez serwer węzła.

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

cd public
ls -lh

Skompresowana wersja brotli pakietu main.bundle.js.br została zapisana i jest ok. 76% mniejszy (225 KB vs. 53 KB) niż main.bundle.js

Następnie poproś serwer, aby wysyłał te skompresowane pliki brotli za każdym razem, gdy ich pliki są żądane oryginalne wersje JS. Można to zrobić przez zdefiniowanie nowego parametru w trybie server.js przed udostępnieniem plików przez 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 informuje serwer, jak odpowiedzieć na żądanie GET dla do określonego punktu końcowego. Następnie zostaje użyta funkcja wywołania zwrotnego, aby określić, jak to zrobić użytkownika. Trasa wygląda tak:

• Określenie '*.js' jako pierwszego argumentu oznacza, że działa to w przypadku każdego który uruchamia się do pobrania pliku JS.
• W wywołaniu zwrotnym do adresu URL żądania jest dołączony element .br, a tag Nagłówek odpowiedzi Content-Encoding jest ustawiony na br.
• Nagłówek Content-Type jest ustawiony na application/javascript; charset=UTF-8 jako określ typ MIME.
• Na koniec next() dba o to, aby sekwencja była kontynuowana w przypadku każdego wywołania zwrotnego, które może być następny.

Niektóre przeglądarki mogą nie obsługiwać kompresji brotli, więc potwierdź, że brotli jest obsługiwane przed zwróceniem pliku skompresowanego brotli, sprawdzając w Nagłówek żądania Accept-Encoding zawiera 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'));

Po ponownym załadowaniu aplikacji jeszcze raz przyjrzyj się panelowi Network (Sieć).

Gotowe! Do dalszego skompresowania zasobów użyto kompresji Brotli.

Podsumowanie

Dzięki temu ćwiczeniu w Codelabs pokazaliśmy, jak brotli może jeszcze bardziej zmniejszyć ogólny rozmiaru. Jeśli ta funkcja jest obsługiwana, algorytm brotli jest zaawansowanym algorytmem kompresji niż gzip

Ostrzeżenie: zanim ręcznie zaimplementujesz tag brotli, sprawdź, czy Twoja sieć CDN obsługuje tę funkcję. Jeśli chcesz ręcznie wdrożyć interfejs brotli (jak opisano w tym ćwiczeniu z programowania), ale masz obsługę CDN w przypadku innych algorytmów kompresji, takich jak gzip, warto porównać zalety brotli z nakładem pracy związanym z implementacją.