Vue3+TS+Vite 開発スキル: コード分割とオンデマンド読み込みに Vite を使用する方法

Vue3 TS Vite 開発スキル: コード分割とオンデマンド読み込みに Vite を使用する方法

フロントエンド エンジニアリングの複雑さとプロジェクト規模の増大に伴い、コードの最適化はすべての開発者が直面しなければならない問題になっています。この重要な側面は、コード分割とオンデマンド読み込みです。コード分​​割によりプロジェクト コード全体を小さな部分に分割し、オンデマンド読み込みにより必要なときに対応するコードを読み込むことができるため、Web ページのパフォーマンスと読み込み速度が効果的に向上します。 Vue3 TypeScript プロジェクトでは、Vite ビルド ツールを使用してコード分割とオンデマンド読み込みの最適化を実現できます。

1.Vite とは何ですか?

Vite は、ESM ベースのフロントエンド構築ツールで、ネイティブ ES モジュールの特性を利用してコールド スタートやホット アップデートの高速化を実現し、オンデマンド読み込みやコード分割などの最適化機能をサポートしています。

2. コード分割の使用

Vue3 TypeScript プロジェクトでは、Vite が提供するインポート機能を使用して、コードのオンデマンド読み込みと分割を実装できます。コードを異なるモジュールに分割し、必要な場合にのみ対応するモジュールをロードすることで、ページ全体のロード負荷を軽減できます。

1. Vite のインストール

まず、プロジェクトに Vite をインストールする必要があります。 npm または Yarn を介してインストールできます。

npm install -g create-vite 构建工具初始化
create-vite my-project 初始化新的项目
cd my-project 进入项目目录
npm install 安装依赖

2. オンデマンドでモジュールをロードする

Vue3 では、import 関数を使用してオンデマンドのロードを実装できます。たとえば、インポート関数を使用すると、すべてのモジュールを一度にロードするのではなく、必要な場所に特定のモジュールをロードできます。

import { createApp, defineAsyncComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

const Home = defineAsyncComponent(() => import('./views/Home.vue'))
const About = defineAsyncComponent(() => import('./views/About.vue'))

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

createApp(App).use(router).mount('#app')

上の例では、defineAsyncComponent 関数を使用して非同期コンポーネントを作成し、インポート関数を通じて Home コンポーネントと About コンポーネントをオンデマンドでロードしました。これにより、最初の画面の読み込みに必要なファイル サイズが効果的に削減され、ページの読み込み速度が向上します。

3. Vite のオンデマンド読み込みを設定する

Vite では、コードのオンデマンド読み込みとセグメント化を実装するように vite.config.js を設定できます。

1. 依存関係のインストール

プロジェクトでコードのオンデマンド読み込みと分割を使用する前に、対応する依存関係をインストールする必要があります:

npm install @vitejs/plugin-legacy

2. Configuration vite.config.js

プロジェクトのルート ディレクトリに vite.config.js ファイルを作成し、次のコードを追加します。

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}

上記のコードでは、次のコードを使用しています。 @ vitejs/plugin-legacy プラグインを開き、targets オプションでサポートする必要があるブラウザを指定します。「defaults」は最新のブラウザがサポートされていることを意味し、「not IE 11」は IE11 ブラウザがサポートされていないことを意味します。

3. プロジェクトのコンパイル

上記の構成により、オンデマンドでコードを読み込み、分割する構成が完了しました。次に、次のコマンドを実行してプロジェクトをコンパイルできます:

npm run build

コンパイルが完了すると、Vite は自動的にコードを分割し、必要に応じて対応するモジュールをロードします。

上記の構成により、Vite を使用してコードのオンデマンド読み込みと分割を実装することに成功しました。これにより、プロジェクトのパフォーマンスと読み込み速度が効果的に向上し、ページ全体の読み込み量が削減されます。 Vue3 TypeScript プロジェクトでは、コード分割とオンデマンド読み込みに Vite を使用することは非常に良い選択であり、プロジェクトをより効率的に最適化し、ユーザー エクスペリエンスを向上させることができます。

概要:

この記事では、Vite を使用して Vue3 TypeScript プロジェクトのコード分割とオンデマンド読み込みを実装する方法を紹介します。 Vite のオンデマンド読み込みを設定すると、すべてのモジュールを一度に読み込むのではなく、プロジェクト全体のコードをオンデマンドで小さな部分に分割できるため、ページのパフォーマンスと読み込み速度が向上します。 Vite は ESM ベースのフロントエンド構築ツールとして、ネイティブ ES モジュールの特性を活かしてコールド スタートとホット アップデートの高速化を実現するとともに、オンデマンド ロードやコード分割などの最適化機能をサポートします。実際のプロジェクトでは、特定のニーズに応じて Vite を構成し、最高のパフォーマンス最適化効果を実現できます。この記事が、Vue3 TypeScript プロジェクトでのコード分割とオンデマンド読み込みを最適化する際に皆さんのお役に立てれば幸いです。

以上がVue3+TS+Vite 開発スキル: コード分割とオンデマンド読み込みに Vite を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。