ビルドオプション

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

build.target

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

最終バンドルのブラウザ互換性ターゲット。デフォルト値はViteの特殊値である'modules'で、ネイティブESモジュール、ネイティブESM動的インポート、およびimport.metaをサポートするブラウザを対象としています。Viteは'modules'を['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']に置き換えます。

別の特殊値は'esnext'です。これはネイティブの動的インポートをサポートしていると想定しており、最小限のトランスパイルしか実行しません。

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

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

build.modulePreload

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

デフォルトでは、モジュールプリロードポリフィルが自動的に挿入されます。ポリフィルは、各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を使用してください。

モジュールプリロードポリフィルを自動的に挿入するかどうか。

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圧縮用に設定できます。

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

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が必要です。nameは公開されるグローバル変数であり、formatsに'umd'または'iife'が含まれている場合に必要です。デフォルトの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
関連: バックエンド統合

trueに設定すると、ビルドはハッシュ化されていないアセットファイル名とそのハッシュ化されたバージョンとのマッピングを含む.vite/manifest.jsonファイルも生成します。このファイルは、サーバーフレームワークが正しいアセットリンクをレンダリングするために使用できます。値が文字列の場合、それはマニフェストファイル名として使用されます。

build.ssrManifest

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

trueに設定すると、ビルドは本番環境でのスタイルリンクとアセットプリロードディレクティブの決定のためのSSRマニフェストも生成します。値が文字列の場合、それはマニフェストファイル名として使用されます。

build.ssr

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

SSR指向のビルドを作成します。値はSSRエントリを直接指定する文字列、またはrollupOptions.inputを介してSSRエントリを指定する必要があるtrueにすることができます。

build.emitAssets

型: boolean
デフォルト: false

クライアント以外のビルドでは、クライアントビルドの一部として出力されると仮定されるため、静的アセットは出力されません。このオプションにより、フレームワークは他の環境のビルドで静的アセットの出力を行うことができます。アセットをビルド後のステップでマージするのはフレームワークの責任です。

build.ssrEmitAssets

型: boolean
デフォルト: false

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

build.minify

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

minifyを無効にするにはfalseに設定するか、使用するminifyツールを指定します。デフォルトはesbuildで、terserよりも20～40倍高速であり、圧縮率はわずか1～2%劣るだけです。ベンチマーク

libモードで'es'形式を使用する場合、build.minifyオプションは空白を最小化しません。これは、純粋なアノテーションを削除し、ツリーシェイキングを壊すためです。

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

npm add -D terser

build.terserOptions

型: TerserOptions

Terserに渡す追加のminifyオプション。

さらに、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 ​