事前知識

GitlabPagesはgzファイルがあると通常ファイルの代わりにそちらを配信してくれる。
詳しくはドキュメント参照 (opens new window)

PagesSeed Insightsの結果がこちら

パフォーマンスが赤い！

ファイル圧縮されてない！

さっそく対応

vuepress compressで調べても解決できなそうだったので、
GitlabのCI/CD使ってファイルをgz化する。まあ1行加えただけだが。

.gitlab-ci.yml

image: alpine:latest

pages:
 image: node:16.17.1
 stage: deploy
 before_script:
  - node -v
  - npm install --progress=false --legacy-peer-deps
 script:
  - npm run build
  - cp -pr docs/.vuepress/dist public
  - find public -type f \( -name \*.html -or -name \*.css -or -name \*.js \) | xargs -I {} sh -c "gzip -k '{}'"
 artifacts:
  paths:
  - public
 only:
  - master

gz化の部分はこちら。

find public -type f \( -name \*.html -or -name \*.css -or -name \*.js \) | xargs -I {} sh -c "gzip -k '{}'"

対応結果

いざ、結果発表。

パフォーマンスが黄色になった！（赤よりマシ）

「テキスト圧縮の有効化」が消えた!

まだ残ってるのは別の機会に。

NGパターン

こっちのがスッキリしててええやん。

find -E public -type f -iregex '.*\.(html|js|css)' -exec gzip -f -k {} \;

でCI/CD実行するとエラーになる。

find: unknown predicate `-E'

-Eオプションが使えず、ちょっと長ったらしいコマンドになってしまうのが残念。

以上。