Config

Viteのコンフィグがすべて使えます。コンフィグファイルは vite.config.{ts,js}・minista.config.{ts,js} のどちらでも動作し、defineConfig も使用できます。

./vite.config.ts
import { defineConfig, pluginSsg } from "minista"

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

Table of Contents

Plugins

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

例えば、基本のSSGに加えてMDXやアセットのエントリー機能を追加する場合は以下のように記述を増やします。プラグインの使い方は各ページを参照ください。

./vite.config.ts
import { defineConfig, pluginSsg, pluginMdx, pluginEntry } from "minista"

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

Troubleshooting

SSR build error

ministaはViteのSSRビルドと通常ビルドを連続で行います。

SSRビルドでJSXをNode.js用のJavaScriptに変換し、通常ビルドでHTMLと各種アセットを生成するからです。

そのため、ビルドの設定を一括で行うと多くの場合SSRビルドがエラーになります。これは設定をSSRビルド用・通常ビルド用に切り分けることで解消できます。

./vite.config.ts
import { defineConfig, pluginSsg } from "minista"

export default defineConfig(({ command, isSsrBuild }) => {
  const isDev = command === "serve"
  const isSsr = command === "build" && (isSsrBuild ?? false)
  const isBuild = command === "build" && !(isSsrBuild ?? false)
  return { plugins: [pluginSsg()], build: { minify: isBuild ? false : true } }
})

Bundle error

pluginBundle を使って画像をバンドルした際にビルドが失敗する現象があります。これは主にViteが小さい画像をインライン判定したもののSSRビルドでインライン化されないことが原因です。

対策の一つとしては、build.assetsInlineLimit を 0 に設定し、インライン化を無効化する方法があります。納品時には特にこの対策が効果的です。

./vite.config.ts
export default {
  build: {
    assetsInlineLimit: 0,
  },
}

もしインライン化を利用したい場合は、インポートパスに ?inline を付与してください。SSRビルドでもインライン化されビルドが成功します。

./src/pages/index.tsx
import imageUrl from "../assets/image.png?inline"

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

Deactivate minify

Viteのデフォルト設定では、ビルド時にコードが圧縮（minify）されます。納品データに圧縮が不要な場合は build.minify を false に設定してください。

./vite.config.ts
export default { build: { minify: false } }

Remove preload

React 19はHTML内の画像パスを読み取って自動的にPreloadタグを挿入します。納品時にこれが邪魔になる場合がありますが、非活性化するコンフィグはありません。

そこでministaの pluginBeautify を使います。デフォルトの状態でHTMLに出力する画像用のPreloadタグを削除します。

./vite.config.ts
import { pluginBeautify } from "minista"

export default { plugins: [pluginBeautify()] }

Remove hash

Viteのデフォルト設定では、出力ファイル名にハッシュが付与されます。ハッシュは納品データには不要な場合が多いです。これを無効化するには、以下のプロパティを設定し [hash] を削除してください。

  • CSS・画像・フォント: build.rolldownOptions.output.assetFileNames
  • JavaScript（chunk）: build.rolldownOptions.output.chunkFileNames
  • JavaScript（entry）: build.rolldownOptions.output.entryFileNames

※これらを設定した場合 build.assetsDir は無視されます。

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

Separate asset directories

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

  • CSS・画像・フォント: build.rolldownOptions.output.assetFileNames
  • JavaScript（chunk）: build.rolldownOptions.output.chunkFileNames
  • JavaScript（entry）: build.rolldownOptions.output.entryFileNames

※これらを設定した場合 build.assetsDir は無視されます。

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

./vite.config.ts
import type { PreRenderedAsset } from "rolldown"
import { normalizePath } from "vite"

const assetFileNames = (assetInfo: PreRenderedAsset) => {
  const name = assetInfo.name ?? ""
  const originalNames = assetInfo.originalFileNames ?? []
  const isSprite = originalNames.some((file) =>
    normalizePath(file).includes("/.minista/sprite/"),
  )
  if (name.endsWith(".css")) {
    return "assets/css/[name][extname]"
  }
  if (isSprite) {
    return "assets/sprites/[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,
        chunkFileNames: "assets/js/[name].js",
        entryFileNames: "assets/js/[name].js",
      },
    },
  },
}

Split chunks

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

  • build.rolldownOptions.output.codeSplitting.groups

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

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

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

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

※codeSplitting を使った際に以下のような条件が発生した場合、Viteは rolldown-runtime.js 出力して互換性を保とうとします。

  • CJSとESMが混在
  • default exportとnamed exportが混在

Replace with preact

pluginIsland などでバンドルした react react-dom のファイルサイズは190KB（gzip: 60KB）ほどになります。これを軽量な preact に置き換えることで、ファイルサイズを約25KB（gzip: 10KB）に削減できます。

$ npm install preact
./vite.config.ts
const preactAlias = {
  react: "preact/compat",
  "react-dom": "preact/compat",
}

export default defineConfig(({ command, isSsrBuild }) => {
  const isDev = command === "serve"
  const isSsr = command === "build" && (isSsrBuild ?? false)
  const isBuild = command === "build" && !(isSsrBuild ?? false)
  return {
    resolve: {
      alias: isBuild ? preactAlias : undefined,
    },
  }
})

Empty dist

Viteのデフォルト設定では、プロジェクトルート配下にない出力ディレクトリは安全を考えて空にしません。srcとdistが別の場所にあるプロジェクトは不要なファイルが残る可能性があるため、build.emptyOutDir を true に設定してください。

./vite.config.ts
export default { build: { emptyOutDir: true } }
前のページCLI
次のページMigration