このページは Cloud Translation API によって翻訳されました。

brotli を使用してネットワークペイロードを最小化、圧縮する

Michael DiBlasio

この Codelab は、ネットワークペイロードを最小化して圧縮する Codelab で、圧縮の基本概念を理解していることを前提としています。としてこの Codelab では、gzip などの他の圧縮アルゴリズムと比較して、 Brotli 圧縮は、圧縮率をさらに下げ、アプリの全体的な指定します。

アプリのスクリーンショット

測定

最適化の追加に入る前に、まず分析を行ってから、現在の状態を把握できます。

[Remix to Edit] をクリックして、プロジェクトを編集可能にします。
サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。

前述のネットワークペイロードを最小化して圧縮する Codelab main.js のサイズを 225 KB から 61.6 KB に縮小しました。この Codelab では、では、Brotli の圧縮によってこのバンドルサイズをさらに小さくする方法を説明します。

Brotli 圧縮

Brotli は、より優れたテキスト圧縮を実現する新しい圧縮アルゴリズムです。「gzip」よりによると CertSimple で、Brotli のパフォーマンスは次のようになります。

JavaScript の場合、gzip よりも 14% 小さくなります
HTML の場合、gzip よりも 21% 小さくなります
CSS の gzip より 17% 小さい

Brotli を使用するには、サーバーが HTTPS に対応している必要があります。Brotli のサポート言語はほとんどのブラウザの最新バージョン。ブラウザ Brotli をサポートする場合は、Accept-Encoding ヘッダーに br が含まれます。

Accept-Encoding: gzip, deflate, br

使用する圧縮アルゴリズムは、Content-Encoding で指定できます。フィールド（Command+Option+I または Ctrl+Alt+I）:

Brotli の有効化

動的圧縮

動的圧縮では、アセットを取得したときにその場で圧縮します。ブラウザによってリクエストされます。

長所

アセットの圧縮バージョンの作成と更新は、できます。
オンザフライでの圧縮は、次のようなウェブページで特に効果的です。動的に生成されます。

短所

ファイルを高いレベルで圧縮して圧縮率を高めるには、長くなりますアセットがアップロードされるまで待っていると、パフォーマンスが低下する可能性があります。サーバーに送信される前に圧縮されます。

Node/Express による動的圧縮

server.js ファイルは、ホストするノードサーバーを設定します。確認します。

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

現在、これは express をインポートして express.static を使用するだけです。ミドルウェアを使用して、すべての静的 HTML、JS、CSS ファイルを public/directory（これらのファイルはビルドのたびに webpack によって作成されます）。

すべてのアセットが brotli を使用して圧縮され、 shrink-ray が返されます。使用できます。まず、これを devDependency として package.json に追加します。

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

これをサーバーファイル server.js にインポートします。

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

express.static がマウントされる前に、これをミドルウェアとして追加します。

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

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

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

アプリを再読み込みして、[Network] パネルでバンドルサイズを確認します。

brotli が Content-Encoding ヘッダーの bz から適用されていることがわかります。 main.bundle.js は 225 KB から 53.1 KB に縮小されました。約 14% 小さい gzip（61.6 KB）との比較です。

注: Brotli には、0（圧縮なし）から 9（最大圧縮）までの 11 の品質レベルがあります。画質 1 は非常に高速ですが効果は低くなります。品質設定を 11 に設定すると、速度は非常に遅くなりますが、ファイルサイズが大幅に削減されます。デフォルトは品質 11 である標準の brotli ライブラリとは異なり、shrink-ray はデフォルトで品質 4 に設定され、通常は動的コンテンツに適しています。options パラメータを shrinkRay([options]) に渡すことで、brotli アルゴリズムのパラメータを調整できます。

静的圧縮

静的圧縮の背後にある考え方は、事前にアセットを圧縮して保存しておくことです。できます。

長所

高い圧縮レベルによるレイテンシは、もはや問題になりません。なしファイルを圧縮してファイルを取得できるため直接渡されます。

短所

アセットはビルドのたびに圧縮する必要があります。ビルド時間が長くなる可能性があるパフォーマンスが大幅に低下します

Node/Express と webpack による静的圧縮

静的圧縮では事前にファイルを圧縮するため、webpack はビルドステップの一環としてアセットを圧縮するように変更することもできます。「これには brotli-webpack-plugin を使用できます。

まず、これを devDependency として package.json に追加します。

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

他の Webpack プラグインと同様に、構成ファイルにインポートし、 webpack.config.js:

var path = require("path");

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

これを plugins 配列内に含めます。

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

プラグインの配列は次の引数を使用します。

asset: ターゲットアセット名。
[file] は元のアセットファイル名に置き換えられます。
test: この正規表現に一致するすべてのアセット（つまり、末尾が .js など）が処理されます。

たとえば、main.js は main.js.br に変更されます。

アプリを再読み込みして再ビルドすると、メインバンドルの圧縮バージョンが作成されます。Glitch コンソールを開いて、最終版の内容を見てみましょう Node サーバーによって提供される public/ ディレクトリ。

[ツール] ボタンをクリックします。
[Console] ボタンをクリックします。
コンソールで、次のコマンドを実行して public に変更します。そのディレクトリにあるすべてのファイルを表示します。

cd public
ls -lh

brotli 圧縮バージョンのバンドル main.bundle.js.br が保存されました サイズが約 76% 小さく（53 KB に対し 225 KB） main.bundle.js。

次に、brotli で圧縮されたファイルがダウンロードされるたびにリクエストされています。これを行うには、Terraform でファイルが express.static で提供される前に、server.js にルーティングされます。

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 は、次のリクエストの GET リクエストへの応答方法をサーバーに指示します。アクセスします。次に、コールバック関数を使用して、この呼び出しをどのように処理するかを定義します。リクエストできます。ルートは次のようになります。

最初の引数として '*.js' を指定すると、 JS ファイルを取得するために起動されます
コールバック内で、.br がリクエストの URL にアタッチされ、 Content-Encoding レスポンスヘッダーが br に設定されます。
Content-Type ヘッダーは application/javascript; charset=UTF-8 に設定されます。 MIME タイプを指定します。
最後に、next() は、コールバックが行われるかもしれないすべてのコールバックに対してシーケンスが続行することを保証します。決定します

一部のブラウザでは brotli 圧縮がサポートされていないため、brotli が brotli で圧縮されたファイルを返す前に、terraform apply の Accept-Encoding リクエストヘッダーに 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'));

アプリが再読み込みされたら、[Network] パネルをもう一度確認します。

完了しました。Brotli 圧縮を使用してアセットをさらに圧縮しました。

まとめ

この Codelab では、brotli を使用してアプリ全体の指定します。サポートされている場合、brotli は gzip。

警告: 手動で実装する前に、CDN が brotli をサポートしているかどうかを必ず確認してください。この Codelab で説明するように brotli を手動で実装する必要があるものの、CDN が gzip などの他の圧縮アルゴリズムをサポートしている場合は、実装に必要な労力と brotli のメリットを比較することをおすすめします。