Viteビルド時間を最適化：包括的なガイド

最先端のビルドツールであるViteは、特にReact、Vue、およびその他のJavaScriptフレームワークを使用したプロジェクトで、フロントエンド開発者の間で急速に人気を博しています。 開発と生産の両方におけるその速度は、重要な利点です。ただし、プロジェクトの規模として、特に生産中にビルド時間が増加する可能性があります。この記事では、Viteのビルドパフォーマンスを最適化するためのさまざまな手法について、構成調整、プラグインの使用率、およびコードベースの改善を網羅しています。

1。 Viteの組み込み最適化機能を活用してください

---

a）

ターゲットモダンブラウザ：

viteデフォルトでは、最新のブラウザー（ESモジュール）をターゲットにします。 これは、オプションを使用して明示的に定義できます。 最新のブラウザに制限することで、レガシーサポートの必要性がなくなり、ビルドが高速になります。 build.targetb）

生産ソースを無効にします：

<code class="language-javascript">// vite.config.js
export default {
  build: {
    target: 'esnext', // Target modern JavaScript only
  },
};</code>

sourcemaps、デバッグに役立ちますが、ビルド速度に大きな影響を与えます。 必要でない場合は、生産のためにそれらを無効にします：

c）

縮小およびテルサーのオプション：

<code class="language-javascript">// vite.config.js
export default {
  build: {
    sourcemap: false, // Disable sourcemaps in production
  },
};</code>

viteは、縮小にesbuildを使用します。 Esbuildの模倣設定を構成することにより、さらなる最適化を実現できます。 たとえば、生産でコンソールログを削除すると、出力サイズが削減できます。

2。キャッシングと並列性の強化

Viteの速度は、その堅牢なキャッシングメカニズムによるものです。 永続的なキャッシュを確保し、並列処理を可能にすることにより、さらなる改善を行うことができます。

<code class="language-javascript">// vite.config.js
export default {
  build: {
    minify: 'esbuild', // Enable esbuild for minification
    terserOptions: {
      compress: {
        drop_console: true, // Remove console logs for production
      },
    },
  },
};</code>

a）

永続的なキャッシング：

viteキャッシュの結果を構築します。 永続的なキャッシュディレクトリを明示的に定義すると、これらの結果がビルド全体で保持されるようにします。

b）

パラレルビルドタスク：esbuildは、Viteが内部で使用し、マルチスレッドをサポートします。 複雑なプラグインまたは変換を備えたプロジェクトの場合、並列性を有効にすると、かなりのパフォーマンスが得られます。 これには、多くの場合、プラグイン固有の構成が必要です（例：）

3。コードの分割とバンドル最適化

<code class="language-javascript">// vite.config.js
export default {
  build: {
    cacheDir: '.vite', // Make sure the cache is stored in a persistent location
  },
};</code>

コード分割により、バンドルサイズが縮小され、ビルド時間と負荷時間が改善されます。 Viteは自動コードの分割を提供しますが、手動構成はより細かい制御を提供します。 a）ダイナミックインポート：myPlugin({ parallel: true })使用

を使用してモジュールを需要をロードし、コードをより小さく、より効率的にロードされたチャンクに分割します：

b）

マニュアルチャンク：

コード分割を正確に制御するには、サードパーティの依存関係を分離するなどのマニュアルチャンクを作成します。

<code class="language-javascript">// vite.config.js
export default {
  build: {
    target: 'esnext', // Target modern JavaScript only
  },
};</code>

4。 vite-plugin-imagemin

による画像の最適化

画像は、多くの場合、ビルドサイズに大きく貢献します。 ビルドプロセス中に画像を自動的に最適化し、ビルドのサイズと時間の両方を短縮します。 vite-plugin-imageminプラグインをインストールして、

：

に追加します vite.config.js

<code class="language-javascript">// vite.config.js
export default {
  build: {
    sourcemap: false, // Disable sourcemaps in production
  },
};</code>

この包括的なガイドは、Viteビルド時間を大幅に削減するためのいくつかの戦略を提供します。 これが役立つことを願っています！

---

以上がViteビルド時間を最適化：包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。