Viteでbuild結果をgzip圧縮する方法メモ📝

Viteにもwebpackでいうところのcompression-webpack-pluginみたいな成果物をgzip圧縮するツールを探してみたところ、

vite-plugin-compressionというまさになツールがあり個人のWebサービスに導入してみたので使い方をメモ📝

といっても使い方は簡単でREADMEに記載の通りpluginをimportして有効化するだけで出来ました。Viteツールチェインはこの辺りの有効化するのがかなりシンプルなものが多い印象で使いやすいですね✨

import viteCompression from 'vite-plugin-compression';

export default () => {
  return {
    plugins: [viteCompression()],
  };
};

この状態でbuildすると以下のような感じでgzip圧縮されます🆗

✨ [vite-plugin-compression]:algorithm=gzip - compressed file successfully: 
packs/application-18125339.js.gz          2.97kb / gzip: 1.28kb

個人のサービスなので規模が小さいのもありますが、そこまでbuild時間に影響することもなさそうです。

// vite-plugin-compression あり
$ npm run build  4.71s user 0.51s system 171% cpu 3.044 total
$ npm run build  4.74s user 0.45s system 196% cpu 2.632 total
$ npm run build  4.43s user 0.41s system 192% cpu 2.510 total

// vite-plugin-compression なし
$ npm run build  4.46s user 0.44s system 189% cpu 2.575 total
$ npm run build  4.65s user 0.44s system 199% cpu 2.549 total
$ npm run build  4.69s user 0.43s system 197% cpu 2.588 total

ただ2023/07/16時点で最終リリースが1年以上前となっていてそこまでアクティブじゃなさそうなのと、以下のようなPRが上がっていて発展途上な部分もあるので、そこは気にしつつ利用するのが良さそう(?) 👀

github.com

おわり

Madogiwa Blog

主に技術系の学習メモに使っていきます。

Viteでbuild結果をgzip圧縮する方法メモ📝