特徴

非常に基本的なレベルでは、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にインポートを書き換えます。

依存関係は強くキャッシュされています

httpヘッダーを介してVite Cachesの依存関係要求が要求されるため、依存関係をローカルに編集/デバッグする場合は、こちらの手順に従ってください。

ホットモジュールの交換

Viteは、ネイティブESMよりもHMR APIを提供します。 HMR機能を備えたフレームワークは、APIを活用して、ページをリロードしたり、アプリケーション状態を吹き飛ばすことなく、即座に正確な更新を提供できます。 Viteは、VUEシングルファイルコンポーネントのファーストパーティHMR統合を提供し、迅速にリフレッシュします。また、 @freath/viteを介して事前に統合されている公式統合もあります。

これらを手動でセットアップする必要はないことに注意してください - create-viteを介してアプリを作成するとき、選択したテンプレートはすでにあなたのために事前に構成されています。

タイプスクリプト

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に伝達します。これはVanilla tscよりも約20倍高速で、HMRの更新は50ms未満のブラウザで反映できます。

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

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

タイプスクリプトコンパイラオプション

tsconfig.jsonのcompilerOptions未満の構成フィールドの一部は、特に注意が必要です。

isolatedModules

• タイプスクリプトドキュメント

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

これは、 esbuildタイプ情報なしでトランスピレーションのみを実行するため、const enumや暗黙のタイプのみのインポートなどの特定の機能をサポートしていないためです。

TSが孤立した輸送で動作しない機能に対してあなたに警告するように、 tsconfig.jsonに"isolatedModules": true compilerOptionsに設定する必要があります。

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

useDefineForClassFields

• タイプスクリプトドキュメント

タイプスクリプトターゲットがESNextを含むES2022または新しい場合、デフォルト値はtrueになります。タイプスクリプト4.3.2+の動作と一致しています。 他のタイプスクリプトターゲットはデフォルトでfalseになります。

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

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

target

• タイプスクリプトドキュメント

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

DEVでターゲットを指定するには、 esbuild.targetオプションを使用できます。これは、最小限の輸送に対してデフォルトでesnextになります。ビルドでは、 build.targetオプションはesbuild.targetよりも優先度が高く、必要に応じて設定することもできます。

useDefineForClassFields

tsconfig.jsonのtarget esnext ESNext ES2022以下ではない場合、またはtsconfig.jsonファイルがないesbuild.target 、 useDefineForClassFieldsデフォルトでfalseになります。ブラウザではサポートされていない静的初期化ブロックに透過する場合があります。

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

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

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

skipLibCheck

Vite Starterテンプレートには、タイプチェック依存関係を避けるためにデフォルトで"skipLibCheck": "true"があります。これは、特定のバージョンとTypeScriptの構成のみをサポートすることを選択できます。 Vuejs/Vue-Cli＃5688で詳細をご覧ください。

クライアントタイプ

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

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

Using compilerOptions.types

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

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のタイプ

TIP

デフォルトのタイピングをオーバーライドするには、タイピングを含むタイプ定義ファイルを追加します。次に、 vite/client前にタイプ参照を追加します。

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

• 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-square150x150logo msapplication-tileimage msapplication-configまたはtwitter:image msapplication-square70x70logo msapplication-wide310x150logo msapplication-square310x310logoのみ
  • または、 property属性og:image:secure_url og:image og:videoまたはog:video:secure_url og:image:url og:audio og:audio: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処理をオプトアウトするには、外部資産またはCDNを参照する場合に役立つ要素にvite-ignore属性を追加できます。

フレームワーク

すべての最新のフレームワークは、Viteとの統合を維持しています。ほとんどのフレームワークプラグインは、Vite組織で維持されている公式のVueおよびReact Viteプラグインを除き、各フレームワークチームによって維持されています。

• @vitejs/plugin-vue経由のVueサポート
• Vue JSXサポート@vitejs/plugin-vue-jsx
• @vitejs/プラグインの反応を介してサポートを反応します
• @Vitejs/Plugin-React-SWCを介してSWCサポートを使用して反応します

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

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インラインをサポートするために事前に構成されています。 CSS @importについては、Viteエイリアスも尊重されます。さらに、インポートされたファイルが異なるディレクトリにある場合でも、すべてのCSS url()参照は、正確性を確保するために常に自動的にリベースされます。

@importエイリアスとURLのリベッシングもSASSおよび少ないファイルでサポートされています（ CSS Pre-Precessorsを参照）。

postcss

プロジェクトに有効なPostCSS構成（ PostCSS-Load-Config （Eg postcss.config.js ）がサポートする任意のフォーマット）が含まれている場合、すべてのインポートされたCSSに自動的に適用されます。

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

CSSモジュール

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

example.module.css

.red {
  color: red;
}

import 'vite/client'
//  - -カット - -
import classes from './example.module.css'
document.getElementById('foo').className = classes.red

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

css.modules.localsConvention CamelCaseの地元の人を有効にするように設定されている場合（例: localsConvention: 'camelCaseOnly' ）、名前付きインポートを使用することもできます。

import 'vite/client'
//  - -カット - -
// .Apply -Color-> ApplyColor
import { applyColor } from './example.module.css'
document.getElementById('foo').className = applyColor

CSS前処理者

Viteは最新のブラウザのみをターゲットにしているため、CSSWGドラフト（ PostCSS-Nestingなど）を実装するPostCSSプラグインを使用して、ネイティブCSS変数を使用し、著者プレーンで将来のスタンダードに準拠したCSSを使用することをお勧めします。

とはいえ、Viteは.scss 、および.styl .sass .stylus組み込みサポートを提供します.less Vite固有のプラグインをインストールする必要はありませんが、対応するPreprocessor自体をインストールする必要があります。

# .scss and .sass
npm add -D sass-embedded # またはサス

# 。少ない
npm add -D less

# .styl and .stylus
npm add -D stylus

VUEシングルファイルコンポーネントを使用している場合、これにより<style lang="sass"> et alが自動的に有効になります。

ViteはSASSの解決@import改善し、Viteエイリアスも尊重されるように改善します。さらに、ルートファイルとは異なるディレクトリにあるインポートされたSASS/LESS FILES内の相対url()参照も、正しさを確保するために自動的に反論します。

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

たとえば、 style.module.scssファイル拡張子に.module準備することにより、前処理者と組み合わせたCSSモジュールを使用することもできます。

ページへのCSSインジェクションを無効にします

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

import 'vite/client'
//  - -カット - -
import './foo.css' // ページに注入されます
import otherStyles from './bar.css?inline' // 注入されません

NOTE

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代わりにcss.lightningcss.cssModules使用します（PostCSSがCSSモジュールを処理する方法を構成します）。

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

NOTE

稲妻CSSを使用する場合、 CSSの前処理はサポートされていません。

静的資産

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

import 'vite/client'
//  - -カット - -
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

特別なクエリは、資産のロード方法を変更できます。

import 'vite/client'
//  - -カット - -
// AssetsをURLとして明示的にロードします
import assetAsURL from './asset.js?url'

import 'vite/client'
//  - -カット - -
// 文字列として資産をロードします
import assetAsString from './shader.glsl?raw'

import 'vite/client'
//  - -カット - -
// Webワーカーをロードします
import Worker from './worker.js?worker'

import 'vite/client'
//  - -カット - -
// ビルド時にbase64文字列としてインラードされたWebワーカー
import InlineWorker from './worker.js?worker&inline'

静的資産処理の詳細。

JSON

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

import 'vite/client'
//  - -カット - -
// オブジェクト全体をインポートします
import json from './example.json'
// 輸出と呼ばれるルートフィールドをインポート - ツリーシェーキングに役立ちます！
import { field } from './example.json'

グローブインポート

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

import 'vite/client'
//  - -カット - -
const modules = import.meta.glob('./dir/*.js')

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

// 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 }渡すことができます。

import 'vite/client'
//  - -カット - -
const modules = import.meta.glob('./dir/*.js', { eager: true })

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

// 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,
}

複数のパターン

最初の議論は、たとえばグローブの配列である可能性があります

import 'vite/client'
//  - -カット - -
const modules = import.meta.glob(['./dir/*.js', './another/*.js'])

ネガティブパターン

負のグローブパターンもサポートされています（ !が付いています）。結果からいくつかのファイルを無視するには、最初の引数にGLOBパターンを除外することを追加できます。

import 'vite/client'
//  - -カット - -
const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])

// Viteによって作成されたコード
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
}

名前付きインポート

importオプションでモジュールの一部のみをインポートすることができます。

import 'vite/client'
//  - -カット - -
const modules = import.meta.glob('./dir/*.js', { import: 'setup' })

// 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と組み合わせると、これらのモジュールにツリーシャッキングを有効にすることができます。

import 'vite/client'
//  - -カット - -
const modules = import.meta.glob('./dir/*.js', {
  import: 'setup',
  eager: true,
})

// 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設定します。

import 'vite/client'
//  - -カット - -
const modules = import.meta.glob('./dir/*.js', {
  import: 'default',
  eager: true,
})

// 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として資産をインポートするなど、インポートにクエリを提供することもできます。

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

// 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']),
}

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

import 'vite/client'
//  - -カット - -
const modules = import.meta.glob('./dir/*.js', {
  query: { foo: 'bar', bar: true },
})

グローブインポート警告

ご了承ください:

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

動的インポート

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

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

変数は、ファイル名のみを表していることに注意してください。 fileが'foo/bar'の場合、インポートは失敗します。より高度な使用のために、 GLOBインポート機能を使用できます。

WebAssembly

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

import 'vite/client'
//  - -カット - -
import init from './example.wasm?init'

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

init関数は、2番目の引数としてWebAssembly.instantiateに渡されるimportObjectを取得することもできます。

import 'vite/client'
import init from './example.wasm?init'
//  - -カット - -
init({
  imports: {
    someFunc: () => {
      /* ... */
    },
  },
}).then(() => {
  /* ... */
})

生産ビルドでは、 assetInlineLimitより小さい.wasmがBase64文字列としてインラリングされます。それ以外の場合、それらは静的資産として扱われ、オンデマンドを取得します。

NOTE

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

WebAssemblyモジュールへのアクセス

たとえば、それを複数回インスタンス化するために、 Moduleオブジェクトにアクセスする必要がある場合は、明示的なURLインポートを使用して資産を解決し、インスタンス化を実行します。

import 'vite/client'
//  - -カット - -
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 'vite/client'
//  - -カット - -
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ワーカースクリプトは、 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または?sharedworker追加することで直接インポートできます。デフォルトのエクスポートは、カスタムワーカーコンストラクターになります。

import 'vite/client'
//  - -カット - -
import MyWorker from './worker?worker'

const worker = new MyWorker()

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

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

import 'vite/client'
//  - -カット - -
import MyWorker from './worker?worker&inline'

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

import 'vite/client'
//  - -カット - -
import MyWorker from './worker?worker&url'

すべての労働者のバンドルの構成に関する詳細については、労働者のオプションを参照してください。

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

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

'nonce-{RANDOM}'

html.cspNonce設定されている場合、Viteは、指定された値を任意の<script>タグと<style>タグに、StyleSheetsとModule Preloadingの<link>タグにnonce属性を追加します。さらに、このオプションが設定されている場合、Viteはメタタグ（ <meta property="csp-nonce" nonce="PLACEHOLDER" /> ）を注入します。

property="csp-nonce"のメタタグのNonCE値は、DEVとビルド後の両方で必要な場合はViteによって使用されます。

WARNING

各リクエストの一意の値にプレースホルダーを置き換えることを確認してください。これは、リソースのポリシーをバイパスするのを防ぐために重要です。

data:

デフォルトでは、ビルド中、Viteはデータurisとして小さな資産を導入します。 font-srcするディレクティブ（例えばimg-src ）にdata:許可するか、設定build.assetsInlineLimit: 0で無効にすることが必要です。

WARNING

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

最適化を構築します

以下にリストされている機能は、ビルドプロセスの一部として自動的に適用され、無効にしない限り、明示的な構成は必要ありません。

CSSコードの分割

Viteは、モジュールで使用されているCSSをAsync Chunkで自動的に抽出し、そのための個別のファイルを生成します。 CSSファイルは、関連するASYNCチャンクがロードされたときに<link>タグで自動的にロードされ、Asyncチャンクは、 Foucを避けるためにCSSをロードした後にのみ評価されることが保証されます。

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

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

Viteは、エントリーチャンクの<link rel="modulepreload">ディレクティブと、構築されたHTMLでの直接輸入を自動的に生成します。

Async Chunk Loadingの最適化

現実世界のアプリケーションでは、ロールアップはしばしば「一般的な」チャンク - 他の2つ以上のチャンク間で共有されるコードを生成します。動的なインポートと組み合わせることで、次のシナリオを持つことが非常に一般的です。

最適化されていないシナリオでは、Async Chunk Aがインポートされる場合、ブラウザは共通チャンクCも必要であることがわかる前にA要求して解析する必要があります。これにより、追加のネットワーク往復が発生します。

Entry ---> A ---> C

Viteは、Preloadステップでコードスプリットの動的インポートコールを自動的に書き換えて、 Aが要求されると、 C並列に取得されるようになります。

Entry ---> (A + C)

Cさらなる輸入品を持つ可能性があり、その結果、最適化されていないシナリオでさらに往復が発生します。 Viteの最適化により、すべての直接輸入がトレースされ、輸入深度に関係なく往復が完全に排除されます。