はてなブックマーク

前回 の記事で、静的ファイルにキャッシュを効かせる方法を紹介しました。 kjugk.hatenablog.com この記事では、次のパフォーマンス改善策として、 静的ファイルにgzip 圧縮をかけて転送量を減らす方法を紹介していきます。 環境 webpack 4.17.1 nginx 1.12.2 なお、サンプルはすべて、拙作の こちら のアプリで、約 41 KB のミニファイ済み JavaScript ファイルを圧縮した結果を比較しています。 配信時に圧縮する nginx では、簡単な設定で、レスポンスに gzip圧縮をかけることができます。下記は js, css に gzip圧縮を適用する例です。 Enable gzip on Nginx. ブラウザで確認すると、レスポンスヘッダーに content-encoding: gzip が付与されており、圧縮済みのファイルが配信されています。