ホームページ  >  記事  >  ウェブフロントエンド  >  Node.js で Gzip 圧縮方法を有効にする方法を説明します

Node.js で Gzip 圧縮方法を有効にする方法を説明します

巴扎黑
巴扎黑オリジナル
2017-08-12 16:31:331759ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。