機能

ごく基本的なレベルでは、Vite を使った開発は静的なファイルサーバーを使うのとそれほど変わりません。しかし、Vite はネイティブな ESM インポートに多くの機能強化を施し、バンドラーベースのセットアップで通常見られるさまざまな機能をサポートしています。

npm 依存関係の解決と事前バンドル

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

import { someMethod } from 'my-dep'

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

1. ページ読み込み速度を向上させ、CommonJS / UMD モジュールを ESM に変換するために、それらを事前バンドルします。事前バンドルステップは esbuild で実行され、Vite のコールドスタート時間を任意の JavaScript ベースのバンドラーよりも大幅に高速化します。

2. ブラウザが適切にインポートできるように、インポートを /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd のような有効な URL に書き換えます。

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

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

ホットモジュールリプレースメント (HMR)

Vite は、ネイティブ ESM 上に HMR API を提供します。HMR 機能を持つフレームワークは、この API を活用して、ページをリロードしたり、アプリケーションの状態を失ったりすることなく、即座に正確な更新を提供できます。Vite は、Vue シングルファイルコンポーネントと React Fast Refresh のファーストパーティ HMR 統合を提供します。また、Preact 向けには @prefresh/vite を介した公式統合もあります。

これらを手動で設定する必要はありません。 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 は esbuild を使用して TypeScript を JavaScript にトランスパイルします。これは、素の tsc よりも約 20〜30 倍高速で、HMR の更新は 50ms 未満でブラウザに反映されます。

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

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

TypeScript コンパイラーオプション

tsconfig.json の compilerOptions の一部の設定フィールドには、特別な注意が必要です。

isolatedModules

• TypeScript ドキュメント

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

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

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

依存関係が "isolatedModules": true とうまく機能しない場合、上流で修正されるまでエラーを一時的に抑制するために "skipLibCheck": true を使用できます。

useDefineForClassFields

• TypeScript ドキュメント

TypeScript のターゲットが ES2022 以降 (ESNext を含む) の場合、デフォルト値は true になります。TypeScript 4.3.2+ の動作と一致しています。その他の TypeScript ターゲットはデフォルトで false になります。

true は標準の ECMAScript ランタイムの動作です。

クラスフィールドに大きく依存するライブラリを使用している場合は、そのライブラリが意図するクラスフィールドの使用方法に注意してください。ほとんどのライブラリは "useDefineForClassFields": true を想定していますが、ライブラリがそれをサポートしていない場合は、useDefineForClassFields を明示的に false に設定できます。

target

• TypeScript ドキュメント

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

開発でターゲットを指定するには、最小限のトランスパイルのためにデフォルトで esnext となる esbuild.target オプションを使用できます。ビルドでは、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" />

compilerOptions.types を使用する

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

tsconfig.json

{
  "compilerOptions": {
    "types": ["vite/client", "some-other-global-lib"]
  }
}

compilerOptions.types が指定されている場合、これらのパッケージのみがグローバルスコープに含まれることに注意してください（すべての可視な "@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 への参照を含むファイル (通常は vite-env.d.ts)

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

HTML

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

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

• <root>/index.html -> https://:5173/
• <root>/about.html -> https://:5173/about.html
• <root>/blog/index.html -> https://:5173/blog/index.html

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

• <audio src>
• <embed src>
• <img src> および <img srcset>
• <image href> および <image xlink:href>
• <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 を参照する場合に役立ちます。

フレームワーク

すべてのモダンなフレームワークは Vite との統合を維持しています。ほとんどのフレームワークプラグインは各フレームワークチームによってメンテナンスされていますが、公式の Vue および React Vite プラグインは vite 組織でメンテナンスされています。

• @vitejs/plugin-vue を介した Vue のサポート
• @vitejs/plugin-vue-jsx を介した Vue JSX のサポート
• @vitejs/plugin-react を介した React のサポート
• @vitejs/plugin-react-swc を介した SWC を使用した React のサポート

詳細については、プラグインガイドを参照してください。

JSX

.jsx および .tsx ファイルもそのままサポートされています。JSX のトランスパイルは esbuild を介しても処理されます。

選択したフレームワークは、JSX をそのまま構成します（例えば、Vue ユーザーは、HMR、グローバルコンポーネント解決、ディレクティブ、スロットなどの Vue 3 固有の機能を提供する公式の @vitejs/plugin-vue-jsx プラグインを使用する必要があります）。

独自のフレームワークで JSX を使用する場合、esbuild オプションを使用してカスタムの jsxFactory および jsxFragment を設定できます。たとえば、Preact プラグインは次のように使用します。

vite.config.js

import { defineConfig } from 'vite'

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

esbuild docs の詳細。

手動インポートを避けるために、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() 参照は常に自動的にリベースされ、正確性が確保されます。

Sass および Less ファイルでも @import エイリアスと URL リベースがサポートされています (CSS プリプロセッサを参照)。

PostCSS

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

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

CSS モジュール

.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() 参照も、正確性を確保するために自動的にリベースされます。変数または補間から始まる url() 参照のリベースは、API の制約によりサポートされていません。

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

ファイル拡張子に .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

注意

CSS ファイルからのデフォルトおよび名前付きインポート (例: import style from './foo.css') は Vite 5 以降削除されました。代わりに ?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 ミニファイアとして使用できます。

静的アセット

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

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

特殊なクエリは、アセットのロード方法を変更できます。

// Explicitly load assets as URL (automatically inlined depending on the file size)
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'

グロブインポート

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

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

上記は以下のように変換されます。

// code produced by vite
const modules = {
  './dir/bar.js': () => import('./dir/bar.js'),
  './dir/foo.js': () => import('./dir/foo.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 __vite_glob_0_0 from './dir/bar.js'
import * as __vite_glob_0_1 from './dir/foo.js'
const modules = {
  './dir/bar.js': __vite_glob_0_0,
  './dir/foo.js': __vite_glob_0_1,
}

複数のパターン

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

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

否定パターン

否定的なグロブパターンもサポートされています（! でプレフィックスされます）。結果から一部のファイルを無視するには、最初の引数に除外グロブパターンを追加できます。

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/bar.js': () => import('./dir/bar.js').then((m) => m.setup),
  './dir/foo.js': () => import('./dir/foo.js').then((m) => m.setup),
}

eager と組み合わせると、これらのモジュールでツリーシェイキングを有効にすることさえ可能です。

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

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

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

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

// code produced by vite:
import { default as __vite_glob_0_0 } from './dir/bar.js'
import { default as __vite_glob_0_1 } from './dir/foo.js'
const modules = {
  './dir/bar.js': __vite_glob_0_0,
  './dir/foo.js': __vite_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/bar.svg': () => import('./dir/bar.svg?raw').then((m) => m['default']),
  './dir/foo.svg': () => import('./dir/foo.svg?raw').then((m) => m['default']),
}
const moduleUrls = {
  './dir/bar.svg': () => import('./dir/bar.svg?url').then((m) => m['default']),
  './dir/foo.svg': () => import('./dir/foo.svg?url').then((m) => m['default']),
}

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

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

ベースパス

base オプションを使用して、インポートのベースパスを指定することもできます。

const modulesWithBase = import.meta.glob('./**/*.js', {
  base: './base',
})

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

ベースオプションは、インポーターファイルに対する相対ディレクトリパス、またはプロジェクトルートに対する絶対パスのみです。エイリアスと仮想モジュールはサポートされていません。

提供された場合、すべての結果モジュールキーはベースに対して相対的に変更されます。

提供された場合、結果となるすべてのモジュールキーはベースに対して相対的に変更されます。

グロブインポートの注意点

次の点に注意してください。

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

動的インポート

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

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

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

WebAssembly

プリコンパイルされた .wasm ファイルは ?init でインポートできます。デフォルトのエクスポートは、WebAssembly.Instance の Promise を返す初期化関数です。

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

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

初期化関数は importObject を受け取ることもでき、それは WebAssembly.instantiate の 2 番目の引数として渡されます。

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

コンストラクターによるインポート

ウェブワーカースクリプトは 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 Worker() 宣言内で new URL() コンストラクターが直接使用されている場合にのみ機能します。さらに、すべてのオプションパラメーターは静的な値 (つまり、文字列リテラル) である必要があります。

クエリサフィックスによるインポート

ウェブワーカースクリプトは、インポートリクエストに ?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'

すべてのワーカーのバンドル設定の詳細については、Worker Options を参照してください。

コンテンツセキュリティポリシー (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 は小さなアセットをデータ URI としてインライン化します。関連するディレクティブ (例: img-src、font-src) に対して data: を許可するか、build.assetsInlineLimit: 0 を設定して無効にする必要があります。

警告

script-src に対して data: を許可しないでください。これは任意のスクリプトの挿入を許可することになります。

ビルド最適化

以下の機能はビルドプロセスの一部として自動的に適用され、無効にしない限り明示的な設定は不要です。

CSS コード分割

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

すべての CSS を単一のファイルに抽出したい場合は、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 の最適化は、インポートの深さに関係なく、すべての直接インポートをトレースして、往復を完全に排除します。