GZIP圧縮の有効化

GZIP圧縮は、Webサーバーからブラウザに送信されるコンテンツのファイルサイズを削減し、読み込み時間を改善する、広くサポートされている手法です。実質的にすべてのブラウザ（IE6以降、Firefox 2以降、Chrome 1以降など）でサポートされています。

BuildVuで生成されるファイルに対してGZIP圧縮を有効にすることを強く推奨します。特に、生成されたSVGファイルは非常に高い圧縮率が得られることがわかっています（テストでは圧縮によってファイルサイズが80〜90%も削減された例もありました）。

BuildVuを使用する際は、.html、.css、.js、.svg、.jsonファイルに対して圧縮を有効にすることを推奨します。これらはBuildVuが生成する圧縮可能なすべてのフォーマットをカバーしています。

注意: 最近のWebサーバーはbrotli圧縮もサポートしており、一般的にgzipよりも高い圧縮率が得られます。可能であれば、gzipの代わりにbrotliを使用することを推奨します。

オプション1: WebサーバーでGZIPを有効にする

圧縮を有効にする標準的な方法は、Webサーバー上で設定することです。gzip圧縮を有効にする方法を示すチュートリアルでは、SVGのMIMEタイプが含まれていないことが多いため、他のガイドに従う場合は、image/svg+xmlのMIMEタイプに圧縮が適用されるようにする必要があります。

ApacheでGZIPを有効にする

.htaccessファイルに以下を追加してください：

AddOutputFilterByType DEFLATE image/svg+xml text/html text/css text/plain text/javascript application/javascript application/json

GZIP圧縮の設定に関するApache公式ドキュメントを読む

NGINXでGZIPを有効にする

サーバー設定に以下を追加してください：

server {
    gzip on;
    gzip_types      image/svg+xml text/html text/css text/plain text/javascript application/javascript application/json;
    gzip_proxied    no-cache no-store private expired auth;
}

GZIP圧縮の設定に関するNGINX公式ドキュメントを読む

IISでGZIPを有効にする

GZIP圧縮の設定に関するIIS公式ドキュメントを読む

オプション2: 変換時にGZIPを有効にする（SVGのみ）

BuildVuは、SVGの代わりにSVGZファイルを生成するように設定できます（SVGZファイルは単にGZIP圧縮されたSVGファイルです）。事前にGZIP圧縮されたSVGを生成することは、ファイルが配信される際にWebサーバーが圧縮する必要がなくなるため、パフォーマンスの向上につながる可能性があります。

BuildVuでこの設定を有効にする手順は、compressSVG で確認できます。

重要: Webブラウザが理解できるようにするため、SVGZファイルはContent-Encoding: gzipヘッダーと共に配信される必要があります。

Apacheから生成されたコンテンツを配信する場合は、.htaccessファイルに以下を追加することで実現できます：

AddType image/svg+xml svg svgz
AddEncoding gzip svgz