ビルドオプション

特に断りのない限り、このセクションのオプションはビルドにのみ適用されます。

build.target

型: string | string[]
デフォルト: 'baseline-widely-available'
関連: ブラウザ互換性

最終バンドルのブラウザ互換性ターゲット。デフォルト値はViteの特殊な値である'baseline-widely-available'で、2025年5月1日現在Baselineで広く利用可能なブラウザを対象としています。具体的には['chrome107', 'edge107', 'firefox104', 'safari16']です。

もう一つの特殊な値は'esnext'です。これはネイティブの動的インポートをサポートしていることを前提としており、最小限のトランスパイルのみを実行します。

トランスフォームはesbuildで実行され、値は有効なesbuildターゲットオプションである必要があります。カスタムターゲットは、ESバージョン（例: es2015）、バージョン付きブラウザ（例: chrome58）、または複数のターゲット文字列の配列のいずれかになります。

esbuildで安全にトランスパイルできない機能がコードに含まれている場合、ビルドは失敗することに注意してください。詳細については、esbuildのドキュメントを参照してください。

build.modulePreload

型: boolean | { polyfill?: boolean, resolveDependencies?: ResolveModulePreloadDependenciesFn }
デフォルト: { polyfill: true }

デフォルトでは、モジュールプリロードpolyfillが自動的に注入されます。ポリフィルは、各index.htmlエントリのプロキシモジュールに自動的に注入されます。build.rollupOptions.inputを使用して非HTMLカスタムエントリを使用するようにビルドが構成されている場合は、カスタムエントリでポリフィルを手動でインポートする必要があります。

import 'vite/modulepreload-polyfill'

注: ポリフィルはライブラリモードには適用されません。ネイティブの動的インポートをサポートしないブラウザをサポートする必要がある場合は、ライブラリでの使用を避けるべきです。

ポリフィルは{ polyfill: false }を使用して無効にできます。

各動的インポートでプリロードするチャンクのリストはViteによって計算されます。デフォルトでは、これらの依存関係をロードするときに、baseを含む絶対パスが使用されます。baseが相対パス（''または'./'）の場合、最終的にデプロイされるベースに依存する絶対パスを避けるために、実行時にimport.meta.urlが使用されます。

resolveDependencies関数を使用して、依存関係リストとそのパスをきめ細かく制御するための実験的なサポートがあります。フィードバックをお寄せください。これはResolveModulePreloadDependenciesFn型の関数を期待します。

type ResolveModulePreloadDependenciesFn = (
  url: string,
  deps: string[],
  context: {
    hostId: string
    hostType: 'html' | 'js'
  },
) => string[]

resolveDependencies関数は、各動的インポートに対して、それが依存するチャンクのリストとともに呼び出されます。また、エントリHTMLファイルでインポートされた各チャンクに対しても呼び出されます。これらのフィルタリングされた、またはより多くの依存関係が注入された新しい依存関係配列を返すことができ、そのパスを変更することができます。depsパスはbuild.outDirからの相対パスです。戻り値はbuild.outDirへの相対パスである必要があります。

modulePreload
: {
  resolveDependencies
: (filename
, deps
, { hostId
, hostType
 }) => {
    return deps
.filter
(condition)
  },
},

解決された依存関係パスは、experimental.renderBuiltUrlを使用してさらに変更できます。

build.polyfillModulePreload

型: boolean
デフォルト: true
非推奨 build.modulePreload.polyfillを使用してください

モジュールプリロードpolyfillを自動的に注入するかどうか。

build.outDir

型: string
デフォルト: dist

出力ディレクトリ（プロジェクトルートからの相対パス）を指定します。

build.assetsDir

型: string
デフォルト: assets

生成されたアセットを格納するディレクトリ（build.outDirからの相対パス）を指定します（ライブラリモードでは使用されません）。

build.assetsInlineLimit

型: number | ((filePath: string, content: Buffer) => boolean | undefined)
デフォルト: 4096 (4 KiB)

この閾値よりも小さいインポートまたは参照されたアセットは、追加のHTTPリクエストを避けるためにbase64 URLとしてインライン化されます。インライン化を完全に無効にするには0に設定します。

コールバックが渡された場合、真偽値を返してインライン化を許可または拒否できます。何も返されなかった場合、デフォルトのロジックが適用されます。

Git LFSプレースホルダーは、それらが表すファイルの内容を含まないため、自動的にインライン化から除外されます。

注意

build.libを指定した場合、build.assetsInlineLimitは無視され、ファイルのサイズやGit LFSプレースホルダーであるかどうかにかかわらず、アセットは常にインライン化されます。

build.cssCodeSplit

型: boolean
デフォルト: true

CSSコード分割を有効/無効にします。有効にすると、非同期JSチャンクでインポートされたCSSはチャンクとして保持され、チャンクがフェッチされたときに一緒にフェッチされます。

無効にすると、プロジェクト全体のすべてのCSSが単一のCSSファイルに抽出されます。

注意

build.libを指定した場合、build.cssCodeSplitはデフォルトでfalseになります。

build.cssTarget

型: string | string[]
デフォルト: build.targetと同じ

このオプションを使用すると、JavaScriptトランスパイルに使用されるターゲットとは異なるCSSミニフィケーションのブラウザターゲットを設定できます。

これは、主流ではないブラウザをターゲットにする場合にのみ使用すべきです。例えば、Android WeChat WebViewは、ほとんどの最新のJavaScript機能をサポートしていますが、CSSの#RGBA16進カラー表記はサポートしていません。この場合、Viteがrgba()の色を#RGBA16進表記に変換するのを防ぐために、build.cssTargetをchrome61に設定する必要があります。

build.cssMinify

型: boolean | 'esbuild' | 'lightningcss'
デフォルト: クライアントではbuild.minifyと同じ、SSRでは'esbuild'

このオプションを使用すると、build.minifyにデフォルト設定するのではなく、CSSのミニフィケーションを具体的に上書きできるため、JSとCSSのミニフィケーションを個別に設定できます。Viteはデフォルトでesbuildを使用してCSSをミニファイします。代わりにLightning CSSを使用するには、オプションを'lightningcss'に設定します。選択した場合、css.lightningcssを使用して設定できます。

build.sourcemap

型: boolean | 'inline' | 'hidden'
デフォルト: false

プロダクションソースマップを生成します。trueの場合、別のソースマップファイルが作成されます。'inline'の場合、ソースマップはデータURIとして結果の出力ファイルに追記されます。'hidden'はtrueと同様に機能しますが、バンドルされたファイル内の対応するソースマップコメントが抑制されます。

build.rollupOptions

型: RollupOptions

基盤となるRollupバンドルを直接カスタマイズします。これはRollup設定ファイルからエクスポートできるオプションと同じで、Viteの内部Rollupオプションとマージされます。詳細については、Rollupオプションのドキュメントを参照してください。

build.commonjsOptions

型: RollupCommonJSOptions

@rollup/plugin-commonjsに渡すオプション。

build.dynamicImportVarsOptions

型: RollupDynamicImportVarsOptions
関連: 動的インポート

@rollup/plugin-dynamic-import-varsに渡すオプション。

build.lib

型: { entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string), cssFileName?: string }
関連: ライブラリモード

ライブラリとしてビルドします。ライブラリはHTMLをエントリとして使用できないため、entryは必須です。formatsに'umd'または'iife'が含まれている場合、公開されるグローバル変数であるnameは必須です。デフォルトのformatsは、複数のエントリが使用されている場合は['es', 'umd']、そうでない場合は['es', 'cjs']です。

fileNameは出力されるパッケージファイルの名前で、デフォルトはpackage.jsonの"name"です。formatとentryNameを引数にとり、ファイル名を返す関数として定義することもできます。

パッケージがCSSをインポートする場合、cssFileNameを使用して出力CSSファイルの名前を指定できます。文字列として設定されている場合はfileNameと同じ値にデフォルト設定され、それ以外の場合はpackage.jsonの"name"に戻ります。

vite.config.js

import { defineConfig
 } from 'vite'

export default defineConfig
({
  build
: {
    lib
: {
      entry
: ['src/main.js'],
      fileName
: (format
, entryName
) => `my-lib-${entryName
}.${format
}.js`,
      cssFileName
: 'my-lib-style',
    },
  },
})

build.manifest

型: boolean | string
デフォルト: false
関連: バックエンド連携

ハッシュ化されていないアセットファイル名とハッシュ化されたバージョンとのマッピングを含むマニフェストファイルを生成するかどうか。これは、サーバーフレームワークが正しいアセットリンクをレンダリングするために使用できます。

値が文字列の場合、build.outDirからの相対パスとしてマニフェストファイルのパスとして使用されます。trueに設定すると、パスは.vite/manifest.jsonになります。

build.ssrManifest

型: boolean | string
デフォルト: false
関連: サーバーサイドレンダリング

プロダクション環境でスタイルリンクとアセットプリロードディレクティブを決定するためのSSRマニフェストファイルを生成するかどうか。

値が文字列の場合、build.outDirからの相対パスとしてマニフェストファイルのパスとして使用されます。trueに設定すると、パスは.vite/ssr-manifest.jsonになります。

build.ssr

型: boolean | string
デフォルト: false
関連: サーバーサイドレンダリング

SSR指向のビルドを生成します。値はSSRエントリを直接指定する文字列、またはtrue（この場合、rollupOptions.input経由でSSRエントリを指定する必要がある）です。

build.emitAssets

型: boolean
デフォルト: false

クライアント以外のビルド中、静的アセットはクライアントビルドの一部として出力されると想定されているため、出力されません。このオプションを使用すると、フレームワークは他の環境ビルドでそれらを出力するのを強制できます。ビルド後のステップでアセットをマージするのはフレームワークの責任です。

build.ssrEmitAssets

型: boolean
デフォルト: false

SSRビルド中、静的アセットはクライアントビルドの一部として出力されると想定されているため、出力されません。このオプションを使用すると、フレームワークはクライアントビルドとSSRビルドの両方でそれらを出力するのを強制できます。ビルド後のステップでアセットをマージするのはフレームワークの責任です。このオプションは、環境APIが安定するとbuild.emitAssetsに置き換えられます。

build.minify

型: boolean | 'terser' | 'esbuild'
デフォルト: クライアントビルドでは'esbuild'、SSRビルドではfalse

ミニフィケーションを無効にするにはfalseに設定するか、使用するミニファイアを指定します。デフォルトはesbuildで、terserよりも20〜40倍高速で、圧縮率は1〜2%劣ります。ベンチマーク

build.minifyオプションは、純粋なアノテーションを削除し、ツリーシェイキングを妨げるため、ライブラリモードで'es'形式を使用している場合、空白をミニファイしないことに注意してください。

'terser'に設定する場合は、Terserをインストールする必要があります。

npm add -D terser

build.terserOptions

型: TerserOptions

Terserに渡す追加のミニファイオプション。

さらに、maxWorkers: numberオプションを渡して、スポーンするワーカーの最大数を指定することもできます。デフォルトはCPUの数から1を引いた値です。

build.write

型: boolean
デフォルト: true

バンドルをディスクに書き込むのを無効にするにはfalseに設定します。これは主に、バンドルをディスクに書き込む前にさらなる後処理が必要なプログラム的なbuild()呼び出しで使用されます。

build.emptyOutDir

型: boolean
デフォルト: outDirがroot内にある場合はtrue

デフォルトでは、ViteはoutDirがプロジェクトルート内にある場合、ビルド時にoutDirを空にします。重要なファイルを誤って削除するのを避けるため、outDirがルートの外にある場合は警告を発します。このオプションを明示的に設定して警告を抑制できます。これはコマンドラインでも--emptyOutDirとして利用できます。

build.copyPublicDir

型: boolean
デフォルト: true

デフォルトでは、Viteはビルド時にpublicDirからoutDirにファイルをコピーします。これを無効にするにはfalseに設定します。

build.reportCompressedSize

型: boolean
デフォルト: true

gzip圧縮サイズレポートを有効/無効にします。大きな出力ファイルを圧縮するのは遅くなる可能性があるため、これを無効にすると大規模プロジェクトのビルドパフォーマンスが向上する可能性があります。

build.chunkSizeWarningLimit

型: number
デフォルト: 500

チャンクサイズの警告の制限（kB単位）。JavaScriptのサイズ自体が実行時間に関連しているため、非圧縮のチャンクサイズと比較されます。

build.watch

型: WatcherOptions| null
デフォルト: null

rollupウォッチャーを有効にするには{}に設定します。これは主に、ビルド専用のプラグインや統合プロセスを含むケースで使用されます。

Windows Subsystem for Linux (WSL) 2 で Vite を使用する場合

WSL2ではファイルシステム監視が機能しない場合があります。詳細については、server.watchを参照してください。

ビルドオプション ​

build.target ​

build.modulePreload ​

build.polyfillModulePreload ​

build.outDir ​

build.assetsDir ​

build.assetsInlineLimit ​

build.cssCodeSplit ​

build.cssTarget ​

build.cssMinify ​

build.sourcemap ​

build.rollupOptions ​

build.commonjsOptions ​

build.dynamicImportVarsOptions ​

build.lib ​

build.manifest ​

build.ssrManifest ​

build.ssr ​

build.emitAssets ​

build.ssrEmitAssets ​

build.minify ​

build.terserOptions ​

build.write ​

build.emptyOutDir ​

build.copyPublicDir ​

build.reportCompressedSize ​

build.chunkSizeWarningLimit ​

build.watch ​