Vercel でデプロイするときに HTML をミニファイする

注: Vercel は gzip と brotli をサポートしているため、通常、自前でのリソースのミニファイは不要。

手順

1. package.json ファイルの設定

package.json ファイルを作成していない場合は以下のコマンドで作成する。

npm init -y

ミニファイヤーの HTMLMinifier をインストールする。

npm install html-minifier --save-dev

package.json ファイルの scripts プロパティーに HTMLMinifier を実行するためのスクリプトを追加する。

ここでは、minify という名前で追加する。

package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "minify": "html-minifier --input-dir . --output-dir . --file-ext html --collapse-whitespace --minify-js true --minify-css true"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/AsaiToshiya/test.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/AsaiToshiya/test/issues"
  },
  "homepage": "https://github.com/AsaiToshiya/test#readme",
  "devDependencies": {
    "html-minifier": "^4.0.0"
  }
}

2. Vercel の設定

ダッシュボードを表示して、HTML をミニファイするプロジェクトを選択する。

「Settings」タブを選択する。

「Project Settings」ページが表示される。

「BUILD COMMAND」の「OVERRIDE」トグルをオンにして、以下のコマンドを入力する。

npm run minify

「OUTPUT DIRECTORY」の「OVERRIDE」トグルをオンにして、. (カレント ディレクトリ) を入力する。

注: プレースホルダーに `public` if it exists, or `.` (存在する場合は `public`、存在しない場合は `.`) が記載されているが、. で上書きする必要がある。

「Save」をクリックする。

3. package.json ファイルのコミットとプッシュ

手順 1 で作成した package.json ファイルのコミットとプッシュを行う。

> git add package.json
> git commit -m "package.json を追加する"
> git branch -M main
> git push -u origin main

4. HTML のミニファイを確認

Vercel に戻り、「Overview」タブを選択する。

スクリーン ショットをクリックする。

表示されたページのソースを確認する。