gzip圧縮とは

フロントエンドリソースが大きすぎると、サーバーはリソースをゆっくりと要求します。フロントエンドは Gzip を使用してリソースを圧縮し、ファイルサイズを約 60% 削減できます. 圧縮されたファイルは、バックエンドでの簡単な処理により、ブラウザで正常に解析できます.

ブラウザのリクエストヘッダーにcontent -encoding: gzip が含まれている場合、ブラウザがこのプロパティをサポートしていることを証明します。

gzip の使用

フロントエンド圧縮

プラグインを使用するだけで、gzip を使用してフロントエンドでコードを圧縮するのは簡単です。

vue-cli では、compression-webpack-pluginプラグインが使用されます。

const compressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
  configureWebpack: {
    plugins: [
      // 开启gzip
      new compressionWebpackPlugin({
        filename: "[path][base].gz",
        algorithm: "gzip",
        test: /.js$|.css$|.html$/,
        threshold: 10240, // 对超过10k的数据压缩
        minRatio: 0.8 // 压缩率小于0.8才会压缩
      }),
		]
}

vite でvite-plugin-compression プラグインを使用する

import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    viteCompression()
  ]
})

ブラウザ分析

圧縮されたコードがサーバーに配置された後、ブラウザーがコードを解析できるように、バックエンドでいくつかの構成を行う必要があります。

1. Nginx サーバーを構成するだけで済みます。

2. Express フレームワークを例にとると、Nodejs は gzip を有効にします。

npm install compression 
npm install @types/compression --save-dev

import compression from 'compression';
...
const app = express();
app.use(compression());
...

圧縮 webpack プラグイン

プラグインのパッケージ比較

変更されたプラグインの使用に焦点を当てます。このプラグインがプロジェクトで構成されていない場合、パッケージ化されたプロジェクトリソースは次のようになります。

このプラグインを構成した後:

import { defineConfig } from 'vite
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    viteCompression()
  ]
})

パッケージ化の結果から、一部のファイルが gzip 圧縮されていることがわかります。

構成アイテム

設定項目名	データの種類	デフォルト	言い換え
詳細	ブール値	真実	圧縮結果をコンソールに出力するかどうか
フィルター	正規表現または (ファイル: 文字列) => ブール値	/.(js	mjs
無効にする	ブール値	間違い	無効にするかどうか
しきい値	番号	1025	音量がしきい値よりも大きい場合は、圧縮します。単位は b です。
アルゴリズム	弦	gzip	圧縮アルゴリズム、オプション ['gzip', 'brotliCompress', 'deflate', 'deflateRaw']
外線	弦	.gz	生成された tarball のサフィックス
圧縮オプション	物体	-	圧縮アルゴリズムに対応するパラメータ
deleteOriginFile	ブール値	-	圧縮後にソースファイルを削除するかどうか

簡単な構成を試してみましょう

import { defineConfig } from 'vite
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    viteCompression(
      {
        algorithm: 'gzip',
        threshold: 10240,
        verbose: false,
        deleteOriginFile: true
      }
    )
  ]
})

この構成項目では、アルゴリズムによって圧縮アルゴリズムを gzip として指定します。ファイルは、ファイルがしきい値によって 10240b (10kb) より大きい場合にのみ圧縮されます。コンソールでの圧縮結果の出力は、詳細によって禁止されます。圧縮ファイルが deleteOriginFile によって指定された後、ソースファイルが削除されます。

必要に応じて構成できます。

Vite パッケージは vite-plugin-compression の使用を最適化します