設定リファレンス

ministaの設定にはViteの設定を使います。vite.config.tsまたはvite.config.jsにプラグインとViteのオプションを記述します。defineConfigはViteと同じ設定型を提供します。基本的な導入例は設定ガイドを参照してください。

import { defineConfig, pluginSsg } from "minista"

export default defineConfig({
  plugins: [pluginSsg()],
})

Table of Contents

• 設定ファイル
• 主な設定項目
• プラグイン
• 用途別の設定
  • 環境ごとの設定
  • 画像のインライン化
  • 圧縮を無効にする
  • 画像のpreloadを制御する
  • ファイル名のハッシュを外す
  • アセットの種類ごとに出力先を分ける
  • JavaScriptを分割する
  • クライアント側をRedactへ置き換える
  • クライアント側をPreactへ置き換える
  • 出力ディレクトリを空にする

設定ファイル

minista.config.*も後方互換のため利用できます。新しいプロジェクトではvite.config.*を使用してください。複数の設定ファイルを検出すると、MINISTA_CLI_CONFIG_CONFLICTで終了します。一つにまとめてください。

project.jsonはサイト情報などをまとめるための利用者のデータファイルであり、ministaが自動的に読み込む設定ではありません。

主な設定項目

プラグイン

ministaはv4以降、すべての機能をViteプラグイン化しています。プロジェクトに必要なプラグインを選び、コンフィグの plugins に追加してください。

ページを静的HTMLとして出力するには、pluginSsg()が必須です。JSX・TSX・Markdown・MDXからのHTML生成と、参照されたCSS・JavaScript・画像の出力を担います。静的サイトの最小設定は次のとおりです。

import { defineConfig, pluginSsg } from "minista"

export default defineConfig({
  plugins: [pluginSsg()],
})

画像最適化やIslandなどが必要な場合は、pluginSsg()に加え、対応するプラグインを追加します。導入手順はガイド、設定値の型と既定値は各プラグインのページを参照してください。

用途別の設定

環境ごとの設定

ministaはHTML生成用の環境とブラウザ向けの環境を一つのViteアプリケーションビルドで順にビルドします。多くのVite設定はそのまま両方の環境へ適用できます。Node.jsでページを描画する側とブラウザ向けアセットを生成する側で設定を分ける場合は、名前付き環境の設定かプラグインの環境別フックを使用します。

例として、ブラウザ向けの環境だけ圧縮を無効にします。

import { defineConfig, pluginSsg } from "minista"

export default defineConfig({
  plugins: [pluginSsg()],
  environments: {
    client: {
      build: {
        cssMinify: false,
        rolldownOptions: {
          output: { minify: false },
        },
      },
    },
  },
})

既存のisSsrBuildを参照する設定は、同名プラグインでも設定を取り違えないよう、MINISTA_VITE_APP_CONFIG_LEGACY_ENVIRONMENTを記録して同一プロセスの互換ビルドへフォールバックします。プラグインの名前や順序も変わる場合はMINISTA_VITE_APP_CONFIG_PLUGIN_MISMATCHを記録します。新しい設定ではenvironments、applyToEnvironment、configEnvironmentを使用してください。

builder.buildAppはministaがビルド順序を管理するために使用します。アプリケーション全体の前後処理にはプラグインのbuildAppフックを使用してください。このフックから環境を直接ビルドすることはできません。

通常のビルド／開発時はViteのAPIを使用します。ViteのAPIへ安全に渡せないCLIオプションを指定した場合だけ外部CLIへフォールバックします。

画像のインライン化

画像をファイルとして出力したい場合は、build.assetsInlineLimit を 0 に設定し、インライン化を無効化する方法があります。

export default {
  build: {
    assetsInlineLimit: 0,
  },
}

インライン化を利用したい場合は、インポートパスに?inlineを付与してください。HTML生成用の環境でも明示的にインライン化されます。

import imageUrl from "../assets/image.png?inline"

export default function () {
  return <img src={imageUrl} alt="image" width={76} height={76} />
}

圧縮を無効にする

CSSの圧縮を無効にするにはbuild.cssMinifyをfalse、JavaScriptの出力段階の圧縮を無効にするにはbuild.rolldownOptions.output.minifyにします。納品コードの整形ガイドでも同じ設定を使います。

export default {
  build: {
    cssMinify: false,
    rolldownOptions: {
      output: { minify: false },
    },
  },
}

build.minify: falseも通常のJavaScript圧縮を無効にするViteの設定ですが、Rolldownの後段のdce-only処理（不要コードの除去）は残ります。JavaScriptをpluginBeautify()で整形する場合、この処理との併用はMINISTA_BEAUTIFY_MINIFY_UNSUPPORTEDで停止するため、上記のbuild.rolldownOptions.output.minify: falseを指定してください。

圧縮の無効化だけでは整形は行いません。HTML・CSS・JavaScriptの整形とソースマップ・CSSファイル名の制約はpluginBeautifyを参照してください。

画像のpreloadを制御する

pluginSsgはレンダラーの出力に含まれる画像の先読みを既定で除去します。残したい場合はpluginSsg({ removeImagePreload: false })を指定してください。Head APIで明示したpreloadは既定でも保持します。詳細はpluginSsgを参照してください。

ファイル名のハッシュを外す

Viteのデフォルト設定では、出力ファイル名にハッシュが付与されます。ハッシュを外すには、以下のプロパティを設定し [hash] を削除してください。

• CSS・画像・フォント: build.rolldownOptions.output.assetFileNames
• JavaScript（エントリー）: build.rolldownOptions.output.entryFileNames
• JavaScript（チャンク）: build.rolldownOptions.output.chunkFileNames

これらを設定した場合、出力先はパターン内のパスで決まります。同名ファイルの衝突と公開先のキャッシュ更新方法を確認してください。

export default {
  build: {
    rolldownOptions: {
      output: {
        assetFileNames: "assets/[name][extname]",
        entryFileNames: "assets/[name].js",
        chunkFileNames: "assets/[name].js",
      },
    },
  },
}

アセットの種類ごとに出力先を分ける

Viteのデフォルト設定では、すべてのアセットが同じディレクトリに出力されます。CSS・JavaScript・画像・フォントを別々のディレクトリに出力したい場合は、以下のプロパティを設定してください。

• CSS・画像・フォント: build.rolldownOptions.output.assetFileNames
• JavaScript（エントリー）: build.rolldownOptions.output.entryFileNames
• JavaScript（チャンク）: build.rolldownOptions.output.chunkFileNames

これらを設定した場合、出力先はパターン内のパスで決まります。同名ファイルの衝突と公開先のキャッシュ更新方法を確認してください。

assetFileNames は拡張子ごとに分けることができます。

import type { PreRenderedAsset } from "rolldown"

const assetFileNames = (assetInfo: PreRenderedAsset) => {
  const name = assetInfo.name ?? ""
  if (name.endsWith(".css")) {
    return "assets/css/[name][extname]"
  }
  if (/\.(png|jpe?g|gif|bmp|svg|webp|avif)$/.test(name)) {
    return "assets/images/[name][extname]"
  }
  if (/\.(woff2?|ttf|otf|eot)$/.test(name)) {
    return "assets/fonts/[name][extname]"
  }
  return "assets/others/[name][extname]"
}

export default {
  build: {
    rolldownOptions: {
      output: {
        assetFileNames,
        entryFileNames: "assets/js/[name].js",
        chunkFileNames: "assets/js/[name].js",
      },
    },
  },
}

JavaScriptを分割する

JavaScriptから特定のコードを分割したい場合は以下のプロパティを設定してください。

• build.rolldownOptions.output.codeSplitting.groups

node_modules 内のモジュールを vendor という名前でまとめる例。

export default {
  build: {
    rolldownOptions: {
      output: {
        codeSplitting: {
          groups: [{ name: "vendor", test: /\/node_modules\/(?!\.)/ }],
        },
      },
    },
  },
}

特定のモジュールごとに分割する例。

export default {
  build: {
    rolldownOptions: {
      output: {
        codeSplitting: {
          groups: [
            { name: "react", test: /\/react(?:-dom)\// },
            { name: "preact", test: /\/preact\// },
            { name: "minista", test: /\/minista\/src|react-icons\// },
          ],
        },
      },
    },
  },
}

クライアント側をRedactへ置き換える

静的HTMLの生成にはReactを維持し、ブラウザ向けのコードをRedactへ置き換えられます。公式Viteプラグインの追加で導入でき、nanoプリセットでさらに容量を削減できます。devと本番ビルドの両方に対応する設定と、Reactとの動作の違いはIslandの容量削減を参照してください。

クライアント側をPreactへ置き換える

静的HTMLの生成にはReactを維持し、ブラウザ向けのコードだけをPreactの互換層へ置き換えられます。devと本番ビルドの両方に対応する設定は、Islandの容量削減を参照してください。

出力ディレクトリを空にする

Viteのデフォルト設定では、プロジェクトルート配下にない出力ディレクトリは安全を考えて空にしません。その場所の既存ファイルを削除してよい場合に限り、build.emptyOutDirをtrueにします。出力先をソースや他の用途のディレクトリと共有しないでください。

export default { build: { emptyOutDir: true } }