Config

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

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

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

Table of Contents

Plugins

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

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

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

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

Troubleshooting

SSR build error

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

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

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

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

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

Bundle error

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

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

./minista.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 に設定してください。

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

Remove preload

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

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

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

export default { plugins: [pluginBeautify()] }

Remove hash

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

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

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

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

Separate asset directories

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

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

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

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

./minista.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: {
    rollupOptions: {
      output: {
        assetFileNames,
        chunkFileNames: "assets/js/[name].js",
        entryFileNames: "assets/js/[name].js",
      },
    },
  },
}

Split chunks

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

  • build.rollupOptions.output.codeSplitting.groups

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

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

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

./minista.config.ts
export default {
  build: {
    rollupOptions: {
      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
./minista.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
  const isBuild = command === "build" && !isSsrBuild
  return {
    resolve: {
      alias: isBuild ? preactAlias : undefined,
    },
  }
})

Empty dist

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

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