この 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）との比較です。
静的圧縮
静的圧縮の背後にある考え方は、事前にアセットを圧縮して保存しておくことです。 できます。
長所
- 高い圧縮レベルによるレイテンシは、もはや問題になりません。なし ファイルを圧縮して ファイルを取得できるため 直接渡されます。
短所
- アセットはビルドのたびに圧縮する必要があります。ビルド時間が長くなる可能性がある パフォーマンスが大幅に低下します
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。