機能

非常に基本的なレベルでは、Viteを使用した開発は静的ファイルサーバーを使用することとそれほど変わりません。しかし、ViteはネイティブESMインポートを大幅に拡張し、通常はバンドラーベースの設定で見られるさまざまな機能をサポートしています。

npm依存関係の解決とプリバンドル

ネイティブESインポートは、次のようなベアモジュールインポートをサポートしていません。

import { someMethod } from 'my-dep'

上記はブラウザでエラーをスローします。Viteは、提供されるすべてのソースファイルでこのようなベアモジュールインポートを検出し、次の操作を実行します。

1. プリバンドルしてページの読み込み速度を向上させ、CommonJS/UMDモジュールをESMに変換します。プリバンドルステップはesbuildを使用して実行され、Viteの起動時間を、あらゆるJavaScriptベースのバンドラーよりも大幅に高速化します。

2. インポートを、ブラウザが正しくインポートできるような有効なURL（例：` /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd`）に書き換えます。

依存関係は強力にキャッシュされます

ViteはHTTPヘッダーを介して依存関係のリクエストをキャッシュするため、依存関係をローカルで編集/デバッグする場合は、ここの手順に従ってください。

ホットモジュール置換（HMR）

ViteはネイティブESMを介してHMR APIを提供します。HMR機能を備えたフレームワークは、このAPIを利用して、ページをリロードしたりアプリケーションの状態をクリアしたりすることなく、即時かつ正確な更新を提供できます。ViteはVue Single File ComponentsとReact Fast RefreshのファーストパーティHMR統合を提供しています。@prefresh/viteを介したPreactの公式統合もあります。

これらを手動で設定する必要はありません。 `create-vite` を使用してアプリを作成すると、選択したテンプレートにはこれらの設定が事前に構成されています。

TypeScript

Viteは、すぐに使える`.ts`ファイルのインポートをサポートしています。

トランスパイルのみ

Viteは`.ts`ファイルに対してのみトランスパイルを実行し、**型チェックを実行しません**。型チェックはIDEとビルドプロセスによって処理されると仮定しています。

Viteがトランスフォームプロセスの一部として型チェックを実行しない理由は、これら2つの処理が根本的に異なる方法で動作するためです。トランスパイルはファイル単位で動作し、Viteのオンデマンドコンパイルモデルと完全に整合します。一方、型チェックでは、モジュールグラフ全体に関する知識が必要です。型チェックをViteのトランスフォームパイプラインに無理やり組み込むと、必然的にViteの速度の利点が損なわれます。

Viteの役割は、ソースモジュールをブラウザで実行できる形式にできるだけ早く変換することです。そのため、静的解析チェックをViteのトランスフォームパイプラインから分離することをお勧めします。この原則は、ESLintなどの他の静的解析チェックにも適用されます。

• 本番環境ビルドでは、Viteのビルドコマンドに加えて`tsc --noEmit`を実行できます。

• 開発中にIDEのヒント以上のものが必要な場合は、別のプロセスで`tsc --noEmit --watch`を実行するか、ブラウザで型エラーを直接報告したい場合はvite-plugin-checkerを使用することをお勧めします。

ViteはTypeScriptをJavaScriptにトランスパイルするためにesbuildを使用しており、これは通常の`tsc`よりも約20〜30倍高速で、HMR更新は50ミリ秒未満でブラウザに反映されます。

たとえば、型のみのインポートが誤ってバンドルされるなどの潜在的な問題を回避するために、型のみのインポートとエクスポート構文を使用してください。

import type { T } from 'only/types'
export type { T }

TypeScriptコンパイラオプション

`tsconfig.json`の`compilerOptions`の下にある一部の設定項目には、特別な注意が必要です。

`isolatedModules`

• TypeScriptドキュメント

`true`に設定する必要があります。

これは、`esbuild`が型情報なしでトランスパイルのみを実行するため、const enumや暗黙的な型のみのインポートなど、特定の機能をサポートしていないためです。

`compilerOptions`の下にある`tsconfig.json`で`"isolatedModules": true`を設定する必要があります。そうすることで、分離されたトランスパイルでは機能しない機能についてTSが警告します。

依存関係が`"isolatedModules": true`と適切に動作しない場合。上流で修正されるまで、` "skipLibCheck": true`を使用してエラーを一時的に抑制できます。

`useDefineForClassFields`

• TypeScriptドキュメント

Vite 2.5.0以降、TypeScriptのターゲットが`ESNext`または`ES2022`以降の場合、デフォルト値は`true`になります。これは`tsc` 4.3.2以降の動作と一致しており、標準のECMAScriptランタイムの動作でもあります。

その他のTypeScriptターゲットは、デフォルトで`false`になります。

しかし、他のプログラミング言語や古いバージョンのTypeScriptから移行してきたユーザーにとっては直感に反する可能性があります。TypeScript 3.7リリースノートで、この移行について詳しく読むことができます。

クラスフィールドに大きく依存するライブラリを使用している場合は、ライブラリの意図された使用方法に注意してください。

MobXなど、ほとんどのライブラリは`"useDefineForClassFields": true`を期待しています。

しかし、`lit-element`など、一部のライブラリはまだこの新しいデフォルトに移行していません。これらの場合は、`useDefineForClassFields`を明示的に`false`に設定してください。

`target`

• TypeScriptドキュメント

Viteは`tsconfig.json`の`target`値を無視し、`esbuild`と同じ動作に従います。

開発時にターゲットを指定するには、`esbuild.target`オプションを使用できます。これは、最小限のトランスパイルのために`esnext`をデフォルト値としています。ビルドでは、`build.target`オプションが`esbuild.target`よりも優先され、必要に応じて設定することもできます。

useDefineForClassFields

`tsconfig.json`の`target`が`ESNext`または`ES2022`以降でない場合、または`tsconfig.json`ファイルがない場合、`useDefineForClassFields`はデフォルトで`false`になり、`esbuild.target`のデフォルト値である`esnext`に問題が発生する可能性があります。ブラウザでサポートされない可能性のある静的初期化ブロックにトランスパイルされる可能性があります。

そのため、`tsconfig.json`を設定する際には、`target`を`ESNext`または`ES2022`以降に設定するか、`useDefineForClassFields`を明示的に`true`に設定することをお勧めします。

ビルド結果に影響を与えるその他のコンパイラオプション

• extends
• importsNotUsedAsValues
• preserveValueImports
• verbatimModuleSyntax
• jsx
• jsxFactory
• jsxFragmentFactory
• jsxImportSource
• experimentalDecorators
• alwaysStrict

skipLibCheck

Viteスターターテンプレートは、デフォルトで`"skipLibCheck": "true"`を使用して依存関係の型チェックを回避します。依存関係は特定のバージョンのTypeScriptと設定のみサポートする場合があるためです。vuejs/vue-cli#5688で詳細を確認できます。

クライアント型

Viteのデフォルトの型はNode.js API用です。Viteアプリケーションでクライアントサイドコードの環境をシムするには、`d.ts`宣言ファイルを追加します。

/// <reference types="vite/client" />

または、`tsconfig.json`内の`compilerOptions.types`に`vite/client`を追加できます。

tsconfig.json

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

これにより、次の型シムが提供されます。

• アセットインポート（例：`.svg`ファイルのインポート）
• `import.meta.env`のViteによって挿入された環境変数の型
• `import.meta.hot`のHMR APIの型

ヒント

デフォルトの型付けをオーバーライドするには、型付けを含む型定義ファイルを追加します。次に、`vite/client`の前に型参照を追加します。

たとえば、`.svg`のデフォルトのインポートをReactコンポーネントにするには

• `vite-env-override.d.ts`（型付けを含むファイル）

  declare module '*.svg' {
    const content: React.FC<React.SVGProps<SVGElement>>
    export default content
  }

• `vite/client`への参照を含むファイル

  /// <reference types="./vite-env-override.d.ts" />
  /// <reference types="vite/client" />

HTML

HTMLファイルはViteプロジェクトの中心に位置し、アプリケーションのエントリポイントとして機能するため、シングルページアプリケーションとマルチページアプリケーションを簡単に構築できます。

プロジェクトルートにあるHTMLファイルは、それぞれのディレクトリパスで直接アクセスできます。

• `<root>/index.html` -> `http://localhost:5173/`
• `<root>/about.html` -> `http://localhost:5173/about.html`
• `<root>/blog/index.html` -> `http://localhost:5173/blog/index.html`

`<script type="module" src>`や`<link href>`などのHTML要素によって参照されるアセットは、アプリの一部として処理およびバンドルされます。サポートされる要素の完全なリストを以下に示します。

• <audio src>
• <embed src>
• `<img src>`と`<img srcset>`
• <image src>
• <input src>
• `<link href>`と`<link imagesrcset>`
• <object data>
• <script type="module" src>
• <source src> と <source srcset>
• <track src>
• <use href> と <use xlink:href>
• <video src> と <video poster>
• <meta content>
  • name 属性が msapplication-tileimage、msapplication-square70x70logo、msapplication-square150x150logo、msapplication-wide310x150logo、msapplication-square310x310logo、msapplication-config、または twitter:image と一致する場合のみ
  • または、property 属性が og:image、og:image:url、og:image:secure_url、og:audio、og:audio:secure_url、og:video、または og:video:secure_url と一致する場合のみ

<!doctype html>
<html>
  <head>
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/src/styles.css" />
  </head>
  <body>
    <img src="/src/images/logo.svg" alt="logo" />
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

特定の要素でのHTML処理をオプトアウトするには、要素にvite-ignore属性を追加できます。これは、外部アセットやCDNを参照する場合に便利です。

Vue

Viteは、一流のVueサポートを提供します。

• @vitejs/plugin-vue を介したVue 3 SFCサポート
• @vitejs/plugin-vue-jsx を介したVue 3 JSXサポート
• @vitejs/plugin-vue2 を介したVue 2.7 SFCサポート
• @vitejs/plugin-vue2-jsx を介したVue 2.7 JSXサポート

JSX

.jsx と .tsx ファイルもすぐにサポートされます。JSX トランスパイルも esbuild を介して処理されます。

Vue ユーザーは、HMR、グローバルコンポーネント解決、ディレクティブ、スロットを含むVue 3固有の機能を提供する公式の@vitejs/plugin-vue-jsx プラグインを使用する必要があります。

ReactまたはVueなしでJSXを使用する場合は、esbuild オプションを使用して、カスタムjsxFactoryとjsxFragmentを構成できます。Preactの場合など

vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },
})

esbuild ドキュメントで詳細を確認してください。

手動インポートを避けるために、jsxInject（Vite専用オプション）を使用してJSXヘルパーを挿入できます。

vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    jsxInject: `import React from 'react'`,
  },
})

CSS

.cssファイルをインポートすると、HMRサポート付きの<style>タグを介してそのコンテンツがページに挿入されます。

@importインライン化とリベース

Viteは、postcss-importを介してCSS @importインライン化をサポートするように事前に構成されています。ViteエイリアスもCSS @importで考慮されます。さらに、インポートされたファイルが異なるディレクトリにある場合でも、すべてのCSS url()参照は常に自動的にリベースされ、正確性が確保されます。

@importエイリアスとURLリベースは、SassとLessファイルでもサポートされています（CSSプリプロセッサを参照）。

PostCSS

プロジェクトに有効なPostCSS構成が含まれている場合（postcss-load-configでサポートされている形式、例：postcss.config.js）、インポートされたすべてのCSSに自動的に適用されます。

CSSのミニファイはPostCSSの後に行われ、build.cssTargetオプションが使用されることに注意してください。

CSS Modules

.module.cssで終わるCSSファイルは、CSSモジュールファイルと見なされます。このようなファイルをインポートすると、対応するモジュールオブジェクトが返されます。

example.module.css

.red {
  color: red;
}

import classes from './example.module.css'
document.getElementById('foo').className = classes.red

CSSモジュールの動作は、css.modulesオプションで構成できます。

css.modules.localsConventionがcamelCaseローカルを有効にするように設定されている場合（例：localsConvention: 'camelCaseOnly'）、名前付きインポートも使用できます。

// .apply-color -> applyColor
import { applyColor } from './example.module.css'
document.getElementById('foo').className = applyColor

CSSプリプロセッサ

Viteは最新のブラウザのみを対象としているため、CSSWGドラフトを実装するPostCSSプラグイン（例：postcss-nesting）を使用してネイティブのCSS変数を使用し、プレーンで将来の標準に準拠したCSSを作成することをお勧めします。

とは言っても、Viteは.scss、.sass、.less、.styl、.stylusファイルの組み込みサポートを提供します。それらにVite固有のプラグインをインストールする必要はありませんが、対応するプリプロセッサ自体をインストールする必要があります。

# .scss and .sass
npm add -D sass-embedded # or sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus

Vueシングルファイルコンポーネントを使用する場合、<style lang="sass">なども自動的に有効になります。

ViteはSassとLessの@import解決を改善し、Viteエイリアスも考慮されます。さらに、ルートファイルとは異なるディレクトリにあるインポートされたSass/Lessファイル内の相対的なurl()参照も、正確性を確保するために自動的にリベースされます。

StylusのAPIの制約により、@importエイリアスとURLリベースはサポートされていません。

ファイル拡張子の前に.moduleを付けることで、プリプロセッサと組み合わせたCSSモジュールも使用できます（例：style.module.scss）。

ページへのCSS挿入の無効化

CSSコンテンツの自動挿入は、?inlineクエリパラメータを介してオフにすることができます。この場合、処理されたCSS文字列はモジュールのデフォルトエクスポートとして通常どおり返されますが、スタイルはページに挿入されません。

import './foo.css' // will be injected into the page
import otherStyles from './bar.css?inline' // will not be injected

注記

Vite 5以降、CSSファイルからのデフォルトインポートと名前付きインポート（例：import style from './foo.css'）は削除されました。代わりに?inlineクエリを使用してください。

Lightning CSS

Vite 4.4以降、Lightning CSSの実験的サポートがあります。css.transformer: 'lightningcss'を構成ファイルに追加し、オプションのlightningcss依存関係をインストールすることで、オプトインできます。

npm add -D lightningcss

有効にすると、CSSファイルはPostCSSではなくLightning CSSによって処理されます。それを構成するには、Lightning CSSオプションをcss.lightningcss構成オプションに渡すことができます。

CSSモジュールを構成するには、css.modules（PostCSSがCSSモジュールを処理する方法を構成する）ではなくcss.lightningcss.cssModulesを使用します。

デフォルトでは、Viteはesbuildを使用してCSSをミニファイします。Lightning CSSもbuild.cssMinify: 'lightningcss'を使用してCSSミニファイアとして使用できます。

注記

Lightning CSSを使用している場合、CSSプリプロセッサはサポートされていません。

静的アセット

静的アセットをインポートすると、提供されるときに解決されたパブリックURLが返されます。

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

特別なクエリを使用して、アセットのロード方法を変更できます。

// Explicitly load assets as URL
import assetAsURL from './asset.js?url'

// Load assets as strings
import assetAsString from './shader.glsl?raw'

// Load Web Workers
import Worker from './worker.js?worker'

// Web Workers inlined as base64 strings at build time
import InlineWorker from './worker.js?worker&inline'

静的アセットの処理で詳細を確認してください。

JSON

JSONファイルは直接インポートできます。名前付きインポートもサポートされています。

// import the entire object
import json from './example.json'
// import a root field as named exports - helps with tree-shaking!
import { field } from './example.json'

Globインポート

Viteは、特別なimport.meta.glob関数を使用して、ファイルシステムから複数のモジュールをインポートすることをサポートしています。

const modules = import.meta.glob('./dir/*.js')

上記は、次のように変換されます。

// code produced by vite
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js'),
}

次に、modulesオブジェクトのキーを反復処理して、対応するモジュールにアクセスできます。

for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod)
  })
}

一致したファイルは、デフォルトで動的インポートを介して遅延ロードされ、ビルド時に個別のチャンクに分割されます。代わりにすべてのモジュールを直接インポートする場合は（例：これらのモジュールでの副作用を最初に適用することに依存する場合）、2番目の引数として{ eager: true }を渡すことができます。

const modules = import.meta.glob('./dir/*.js', { eager: true })

上記は、次のように変換されます。

// code produced by vite
import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

複数のパターン

最初の引数は、globの配列にすることができます。たとえば

const modules = import.meta.glob(['./dir/*.js', './another/*.js'])

ネガティブパターン

ネガティブglobパターンもサポートされています（!で始まる）。結果から一部のファイルを無視するには、最初の引数に除外globパターンを追加できます。

const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])

// code produced by vite
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
}

名前付きインポート

importオプションを使用して、モジュールの一部のみをインポートできます。

const modules = import.meta.glob('./dir/*.js', { import: 'setup' })

// code produced by vite
const modules = {
  './dir/foo.js': () => import('./dir/foo.js').then((m) => m.setup),
  './dir/bar.js': () => import('./dir/bar.js').then((m) => m.setup),
}

eagerと組み合わせると、これらのモジュールに対してツリーシェイキングを有効にすることもできます。

const modules = import.meta.glob('./dir/*.js', {
  import: 'setup',
  eager: true,
})

// code produced by vite:
import { setup as __glob__0_0 } from './dir/foo.js'
import { setup as __glob__0_1 } from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

デフォルトエクスポートをインポートするには、importをdefaultに設定します。

const modules = import.meta.glob('./dir/*.js', {
  import: 'default',
  eager: true,
})

// code produced by vite:
import __glob__0_0 from './dir/foo.js'
import __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

カスタムクエリ

queryオプションを使用して、インポートにクエリを提供することもできます。たとえば、アセットを文字列としてまたはURLとしてインポートする場合などです。

const moduleStrings = import.meta.glob('./dir/*.svg', {
  query: '?raw',
  import: 'default',
})
const moduleUrls = import.meta.glob('./dir/*.svg', {
  query: '?url',
  import: 'default',
})

// code produced by vite:
const moduleStrings = {
  './dir/foo.svg': () => import('./dir/foo.js?raw').then((m) => m['default']),
  './dir/bar.svg': () => import('./dir/bar.js?raw').then((m) => m['default']),
}
const moduleUrls = {
  './dir/foo.svg': () => import('./dir/foo.js?url').then((m) => m['default']),
  './dir/bar.svg': () => import('./dir/bar.js?url').then((m) => m['default']),
}

他のプラグインが使用できるカスタムクエリを提供することもできます。

const modules = import.meta.glob('./dir/*.js', {
  query: { foo: 'bar', bar: true },
})

Globインポートに関する注意点

注意してください。

• これはVite専用の機能であり、Web標準またはES標準ではありません。
• globパターンはインポート指定子のように扱われます。相対パス（./で始まる）、絶対パス（/で始まり、プロジェクトルートを基準にして解決される）、またはエイリアスパス（resolve.aliasオプションを参照）のいずれかでなければなりません。
• globマッチングはtinyglobbyを介して実行されます。
• import.meta.globのすべての引数は、**リテラルとして渡す**必要があることにも注意してください。変数または式を使用することはできません。

動的インポート

globインポートと同様に、Viteは変数を使用した動的インポートもサポートしています。

const module = await import(`./dir/${file}.js`)

変数は1レベル深いファイル名のみを表すことに注意してください。fileが'foo/bar'の場合、インポートは失敗します。より高度な使用方法については、globインポート機能を使用してください。

WebAssembly

事前にコンパイルされた.wasmファイルは、?initを使用してインポートできます。デフォルトのエクスポートは、WebAssembly.InstanceのPromiseを返す初期化関数になります。

import init from './example.wasm?init'

init().then((instance) => {
  instance.exports.test()
})

init 関数は、WebAssembly.instantiateの第2引数として渡されるimportObjectも受け取ることができます。

init({
  imports: {
    someFunc: () => {
      /* ... */
    },
  },
}).then(() => {
  /* ... */
})

本番ビルドでは、assetInlineLimitより小さい.wasmファイルはbase64文字列としてインライン化されます。それ以外の場合は、静的アセットとして扱われ、オンデマンドでフェッチされます。

注記

WebAssemblyのESモジュール統合提案は現在サポートされていません。vite-plugin-wasmまたはその他のコミュニティプラグインを使用してこれを処理してください。

WebAssemblyモジュールのアクセス

Moduleオブジェクトにアクセスする必要がある場合（例：複数回インスタンス化する必要がある場合）、明示的なURLインポートを使用してアセットを解決し、インスタンス化を実行してください。

import wasmUrl from 'foo.wasm?url'

const main = async () => {
  const responsePromise = fetch(wasmUrl)
  const { module, instance } =
    await WebAssembly.instantiateStreaming(responsePromise)
  /* ... */
}

main()

Node.jsでのモジュールのフェッチ

SSRでは、?initインポートの一部として発生するfetch()は、TypeError: Invalid URLで失敗することがあります。SSRでのWasmサポートに関する問題を参照してください。

プロジェクトのベースが現在のディレクトリであると仮定した代替案を以下に示します。

import wasmUrl from 'foo.wasm?url'
import { readFile } from 'node:fs/promises'

const main = async () => {
  const resolvedUrl = (await import('./test/boot.test.wasm?url')).default
  const buffer = await readFile('.' + resolvedUrl)
  const { instance } = await WebAssembly.instantiate(buffer, {
    /* ... */
  })
  /* ... */
}

main()

Web Workers

コンストラクタを使用したインポート

Web Workerスクリプトは、new Worker()およびnew SharedWorker()を使用してインポートできます。ワーカのサフィックスと比較して、この構文は標準により近く、ワーカーを作成するための**推奨**方法です。

const worker = new Worker(new URL('./worker.js', import.meta.url))

ワーカーコンストラクタはオプションも受け入れ、これを使用して「モジュール」ワーカーを作成できます。

const worker = new Worker(new URL('./worker.js', import.meta.url), {
  type: 'module',
})

ワーカーの検出は、new URL()コンストラクタがnew Worker()宣言内で直接使用されている場合にのみ機能します。さらに、すべてのオプションパラメータは静的な値（つまり、文字列リテラル）でなければなりません。

クエリサフィックスを使用したインポート

Web Workerスクリプトは、インポートリクエストに?workerまたは?sharedworkerを追加することで直接インポートできます。デフォルトのエクスポートはカスタムワーカーコンストラクタになります。

import MyWorker from './worker?worker'

const worker = new MyWorker()

ワーカースクリプトは、importScripts()の代わりにESM import文を使用することもできます。**注記**: 開発中はブラウザのネイティブサポートに依存しますが、本番ビルドではコンパイルされます。

デフォルトでは、ワーカースクリプトは本番ビルドで個別のチャンクとして出力されます。ワーカーをbase64文字列としてインライン化したい場合は、inlineクエリを追加します。

import MyWorker from './worker?worker&inline'

ワーカーをURLとして取得したい場合は、urlクエリを追加します。

import MyWorker from './worker?worker&url'

すべてのワーカーのバンドリングの設定の詳細については、ワーカーオプションを参照してください。

コンテンツセキュリティポリシー（CSP）

CSPを展開するには、Viteの内蔵機能のために特定のディレクティブまたは設定を設定する必要があります。

'nonce-{RANDOM}'

html.cspNonceが設定されている場合、Viteは指定された値を持つnonce属性をすべての<script>タグと<style>タグ、およびスタイルシートとモジュールのプリロードのための<link>タグに追加します。さらに、このオプションが設定されている場合、Viteはメタタグ（<meta property="csp-nonce" nonce="PLACEHOLDER" />）を挿入します。

property="csp-nonce"を持つメタタグのnonce値は、開発時とビルド後両方で必要に応じてViteによって使用されます。

警告

プレースホルダーを各リクエストに対して一意の値に置き換えることを確認してください。これは、リソースのポリシーを回避することを防ぐために重要であり、そうでなければ簡単に実行できます。

data:

デフォルトでは、ビルド中にViteは小さなアセットをdata URIとしてインライン化します。img-src、font-srcなどの関連ディレクティブに対してdata:を許可するか、build.assetsInlineLimit: 0を設定して無効にする必要があります。

警告

script-srcに対してdata:を許可しないでください。任意のスクリプトの注入を許可します。

ビルド最適化

下記の機能はビルドプロセスの自動適用され、無効化しない限り明示的な設定は必要ありません。

CSSコード分割

Viteは、非同期チャンク内のモジュールで使用されるCSSを自動的に抽出し、それに対して個別のファイルを作成します。CSSファイルは、関連付けられた非同期チャンクがロードされると<link>タグを介して自動的にロードされ、FOUCを回避するために、非同期チャンクはCSSがロードされた後にのみ評価されることが保証されます。

すべてのCSSを1つのファイルに抽出したい場合は、build.cssCodeSplitをfalseに設定してCSSコード分割を無効にできます。

プリロードディレクティブの生成

Viteは、ビルドされたHTML内のエントリチャンクとその直接インポートに対して<link rel="modulepreload">ディレクティブを自動的に生成します。

非同期チャンクのロード最適化

現実世界のアプリケーションでは、Rollupは多くの場合、「共通」チャンク（2つ以上の他のチャンクで共有されるコード）を生成します。動的インポートと組み合わせると、次のシナリオがよく発生します。

最適化されていないシナリオでは、非同期チャンクAがインポートされると、ブラウザは、共通チャンクCも必要であることを知る前に、Aをリクエストして解析する必要があります。これにより、ネットワークの往復が追加されます。

Entry ---> A ---> C

Viteは、プリロードステップを使用してコード分割された動的インポート呼び出しを自動的に書き換えるため、Aがリクエストされると、Cが**並列に**フェッチされます。

Entry ---> (A + C)

Cにさらにインポートがある可能性があり、最適化されていないシナリオではさらに多くの往復が発生します。Viteの最適化は、インポートの深さに関係なく、往復を完全に排除するためにすべての直接インポートをトレースします。