この Codelab は、ネットワーク ペイロードの圧縮と圧縮に関する Codelab の拡張であり、圧縮の基本コンセプトを理解していることを前提としています。この Codelab では、gzip
などの他の圧縮アルゴリズムと比較して、Brotli 圧縮によって圧縮率とアプリ全体のサイズがどのように削減されるかを説明します。
測定
最適化の追加に入る前に、まずアプリケーションの現在の状態を分析することをおすすめします。
- [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
- サイトをプレビューするには、[View App] を押してから、[Fullscreen] を押します。
前のネットワーク ペイロードの圧縮と圧縮の 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
使用する圧縮アルゴリズムは、Chrome デベロッパー ツールの [Network] タブの 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 に縮小されました。gzip
(61.6 KB)と比較すると、約 14% 小さくなります。
静的圧縮
静的圧縮の背後にある考え方は、事前にアセットを圧縮して保存することです。
長所
- 高い圧縮レベルによるレイテンシは、もはや問題になりません。ファイルを直接取得できるため、圧縮のためにオンザフライで何かを行う必要はありません。
短所
- アセットはビルドのたびに圧縮する必要があります。高い圧縮レベルが使用されている場合、ビルド時間が大幅に長くなることがあります。
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
で終わる JavaScript アセット)を処理します。
たとえば、main.js
は main.js.br
に変更されます。
アプリの再読み込みと再ビルドが行われると、メインバンドルの圧縮バージョンが作成されます。Glitch コンソールを開いて、Node サーバーから提供されている最終的な public/
ディレクトリの内容を確認します。
- [ツール] ボタンをクリックします。
- [Console] ボタンをクリックします。
- コンソールで次のコマンドを実行して、
public
ディレクトリに移動し、そのファイルをすべて表示します。
cd public
ls -lh
brotli 圧縮バージョンのバンドル main.bundle.js.br
もここに保存され、main.bundle.js
よりもサイズが約 76% 小さく(225 KB で 53 KB になりました)。
次に、元の JS バージョンがリクエストされるたびに、brotli 圧縮されたファイルを送信するようにサーバーに指示します。これを行うには、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 がサポートされていることを確認します。そのためには、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] パネルをもう一度確認します。
Success! Brotli 圧縮を使用してアセットをさらに圧縮しました。
おわりに
この Codelab では、brotli
を使用してアプリ全体のサイズをさらに小さくする方法を説明しました。サポートされている場合、brotli
は gzip
よりも強力な圧縮アルゴリズムです。