ホームページ > 記事 > ウェブフロントエンド > Node.js で Gzip 圧縮方法を有効にする方法を説明します
Web サイトの gzip 圧縮機能をオンにします。通常、Web ページが 30K の場合、圧縮後は 9K になり、明らかに大幅に改善されます。ブラウジング速度 (注: ブラウザのサポートが必要です)。
Gzip とは何ですか
専門家の説明をコピーします:
GZIP は、Jean-loup Gailly と Mark Adler によって最初に作成され、UNIX システムでのファイル圧縮に使用されます。 Linux では、拡張子 .gz が付いた GZIP 形式のファイルをよく使用します。現在、インターネット上で使用される非常に一般的なデータ圧縮形式またはファイル形式になっています。 HTTP プロトコル上の GZIP エンコードは、WEB アプリケーションのパフォーマンスを向上させるために使用されるテクノロジーです。トラフィックの多い Web サイトでは、ユーザーがより高速な速度を体験できるようにするために、GZIP 圧縮テクノロジがよく使用されます。これは一般に、誰かがこのサーバーの Web サイトにアクセスしたときに、サーバー内のこの機能が Web ページのコンテンツを圧縮して、訪問先のコンピューターのブラウザーに送信して表示できる機能を指します。これにより、送信が高速化され、URL をクリックした後にすぐに表示されるようになります。これにより、通常、サーバーの負荷も増加します。機能モジュールはサーバーにインストールされます
Gzip圧縮率
例えば、webpackでパッケージ化されたjsファイルは比較的大きいですが、チャンク機能を使ってファイルを分割してパッケージ化することもできますが、全体の容量は大きくなります。まだ小さいわけではありません。gzip 圧縮を使用する効果を見てみましょう:
Gzip を有効にする前
Gzip を有効にした後
3 つのファイルの圧縮サイズを比較します:
テキスト ファイル:
iview.min.js: 429kb -> 109kb、圧縮率 74.6%base.min.js: 309kb -> 圧縮率 73.56% style.min.css: 207kb -> 圧縮率85%
画像:
画像 1: 63.2kb -> 63.2kb、0% 圧縮?
テキスト ファイルの圧縮効果は非常に大きいですが、画像サイズは変わっていないことがわかります。テキストの HTTP 応答ヘッダーを見てください:
ですが、画像は圧縮されていません:
これは、一般に画像に gzip を使用する効果によるものです。 (png、jpg など) は良くありません。その逆ですので、通常、デフォルトでは gzip 圧縮は画像に対して実行されません。
node.js は gzip を有効にします
ノードの Express フレームワークが gzip を使用する方法について話しましょう:
1. 圧縮依存関係をインストールします:
npm install compression
2. 呼び出し:
var compression = require('compression') var app = express(); //尽量在其他中间件前使用compression app.use(compression());
それさらに、この関数を特定のリクエストにのみ使用したい場合は、そのフィルタリング メソッドを使用できます:
app.use(compression({filter: shouldCompress})) function shouldCompress (req, res) { if (req.headers['x-no-compression']) { // 这里就过滤掉了请求头包含'x-no-compression' return false } return compression.filter(req, res) }
他の関数については、圧縮のドキュメントを参照してください。
nginxの設定も添付します
#on为启用,off为关闭 gzip on; #设置允许压缩的页面最小字节数,页面字节数从header头中的Content-Length中进行获取。默认值是0,不管页面多大都压缩。建议设置成大于1k的字节数,小于1k可能会越压越大。 gzip_min_length 1k; #获取多少内存用于缓存压缩结果,‘4 16k'表示以16k*4为单位获得 gzip_buffers 4 16k; #gzip压缩比(1~9),越小压缩效果越差,但是越大处理越慢,所以一般取中间值 gzip_comp_level 5; #对特定的MIME类型生效,其中'text/html'被系统强制启用 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
パラメータの簡単な説明
1) gzip
構文: gzip on/off
デフォルト値: off
スコープ: http、サーバー、場所
説明: on または gzip モジュールを閉じます。起動を示すにはここで on を使用します
2) gzip_min_length
構文: gzip_min_length length
デフォルト値: gzip_min_length 0
スコープ: http、サーバー、場所
説明: ページの最小バイト数を設定します圧縮が許可されています。ページ バイト数はヘッダーの Content-Length から取得されます。デフォルト値は 0 で、サイズに関係なくページを圧縮します。バイト数を 1k より大きく設定することをお勧めします。1k 未満の場合、圧縮がさらに進む可能性があります。 |
3) gzip_buffers
構文: gzip_buffers 数値サイズ
デフォルト値: gzip_buffers 4 4k/8k
スコープ: http、サーバー、場所
説明: gzip 圧縮結果のデータ フローを保存するために複数のキャッシュ ユニットを取得するようにシステムを設定します。 。 4 16k は、16k 単位でメモリを申請し、元のデータ サイズの 4 倍を 16k 単位で申請することを意味します。
4) gzip_comp_level
構文: gzip_comp_level 1..9
デフォルト値: gzip_comp_level 1
スコープ: http、サーバー、場所
説明: gzip 圧縮率、1 は処理速度を最速にするための最小圧縮率、9 は最高の処理速度を実現する最小圧縮率です。最大圧縮率 ただし、処理は最も遅くなります (送信は高速ですが、CPU の消費量が多くなります)。ここでは5に設定されています。
5) gzip_types
構文: gzip_types mime-type [mime-type ...]
デフォルト値: gzip_types text/html
スコープ: http、サーバー、場所
説明: 圧縮用の MIME タイプを照合します (指定の有無に関係なく) ) ) "text/html" タイプは常に圧縮されます。これは text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php に設定されます。
以上がNode.js で Gzip 圧縮方法を有効にする方法を説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。