Vite2.0の落とし穴

Viteプロジェクトビルドの最適化

ルーティングの動的インポートはロールアップを通じて構築されます。動的にインポートされたファイルは非同期チャンクファイルを生成します。このファイルはプロジェクトにアクセスするときにオンデマンドでロードされるため、アプリケーションのロード速度が大幅に向上します。

'@/views/home/index.vue' から Home をインポートします。
'@/components/Layout.vue' からレイアウトをインポートします。

const ルート: Array<RouteRecordRaw> = [
  {
    パス： '/'、
    コンポーネント: レイアウト、
    リダイレクト: '/home',
    子供たち： [
      {
        パス: '/home',
        名前: 'ホーム'、
        コンポーネント: ホーム、
        meta: { title: 'ホームページ' }
      },
      {
        パス: '/about',
        名前: 'About'、
        meta: { title: 'About', keepAlive: true },
        コンポーネント: () => import('@/views/about/index.vue')
      },
      {
        パス: '/square',
        名前: 'スクエア'、
        meta: { title: 'コンポーネントスクエア', keepAlive: true },
        コンポーネント: () => import('@/views/square/index.vue')
      }
    ]
  }
]
const ルーター = createRouter({
  履歴: process.env.NODE_ENV === 'development'
    ? WebHistoryを作成します(process.env.BASE_URL)
    : WebHashHistoryを作成します(process.env.BASE_URL)、
  ルート、
    scrollBehavior(to, from, savedPosition) {
      if (保存された位置) {
        // 背景が転送されたときにのみ、savedPosition が返されます
      } それ以外 {
        戻り値 { top: 0, 動作: 'smooth' }
      }
    }
  })

router.beforeEach((to, from, next) => {
  // 権限のチェックをいくつか行うことができます if (to.path !== from.path) {
    document.title = `スターミュージックサークル | ${to.meta.title}`
  }
  次（）
})

router.onError((エラー) => {
  const パターン = /チャンクの読み込み (\d)+ 失敗/g
  const isChunkLoadFailed = error.message.match(パターン)
  if (isChunkLoadFailed) {
    場所.reload()
  }
})

デフォルトルーターをエクスポートする

上記のコードは、[email protected] を使用して Vite によってビルドされた Vue プロジェクトのルーターファイルです。Vue Router はすぐに使用できる動的インポートをサポートしているため、静的インポートの代わりに動的インポートを使用できます。コードを見ると、about ページと square ページの両方が動的にインポートされていることがわかります。

動的インポートに関しては、MDNに非常に詳細な紹介があります: ポータル

ロールアップがビルドされると、動的にインポートされたファイルによって非同期チャンクファイルが生成され、プロジェクトにアクセスするときにオンデマンドで読み込まれるため、アプリケーションの読み込み速度が大幅に向上します。

vite プロジェクトでのルートの動的インポートで遭遇した落とし穴:

@/ エイリアスはビルド時にはサポートされません。ビルド中に、ロールアップビルドは設定されたエイリアスに従って対応するファイルを見つけることができないため、ビルドプロセス中にエラーが報告されます。

解決：

最初は参照パスの問題だと思ったので、いくつかの参照方法を試してみたところ、最終的にそのうちの 1 つが成功しました。コンポーネント: () => import('/src/views/about/index.vue') 絶対パスに変更すると正常に起動できます
vite バージョンをアップグレードします。最初は [email protected] でしたが、エイリアスをサポートしていません。 [email protected] にアップグレードするとサポートされます。 2.0 がリリースされたばかりなので、すぐに完全に書き上げられないのは当然だと思います。
import.meta.globメソッドの使用

設定時に遭遇したいくつかのエラーと警告

警告: 「import.meta」は構成されたターゲット環境 (「es2019」) では使用できないため、空になります

この警告は、vite 構成項目 esbuild.target が 'es2019' の場合に表示されます。この場合、import.meta API はサポートされていないことを示します。

[vite] 内部サーバーエラー: 無効な glob インポート構文: パターンは "." または "/" で始まる必要があります (プロジェクトルートを基準)

import.meta.glob() のパラメータは、ルートディレクトリに相対的に一致させるために「.」または「/」で始まる必要があります。

最終的な記述コード:

  '@/components/Layout.vue' からレイアウトをインポートします。

  const モジュール = import.meta.glob('/src/views/*/index.vue')

  const ルート: Array<RouteRecordRaw> = [
    {
      パス： '/'、
      コンポーネント: レイアウト、
      リダイレクト: '/home',
      子供たち： [
        {
          パス: '/home',
          名前: 'ホーム'、
          コンポーネント: モジュール['/src/views/home/index.vue'],
          meta: { title: 'ホームページ' }
        },
        {
          パス: '/about',
          名前: 'About'、
          meta: { title: 'About', keepAlive: true },
          コンポーネント: モジュール['/src/views/about/index.vue']
        },
        {
          パス: '/square',
          名前: 'スクエア'、
          meta: { title: 'コンポーネントスクエア', keepAlive: true },
          コンポーネント: モジュール['/src/views/square/index.vue']
        }
      ]
    }
  ]

import.meta.glob メソッドを使用すると、バックエンドインターフェイスを介したルーティングを構成し、制御可能な方法で権限を制御できます。ルートデータがインターフェイスによって返される場合、権限の範囲内にないコンポーネントはルーティング項目をまったく生成しないため、権限制御の強度が確実に高まります。

build.rollupOptions.manualChunks を設定して、node_modules ファイルを別のパッケージにロードします。

マニュアルチャンク(id) {
  id.includes('node_modules') && id.includes('prime') の場合 {
    '素数'を返す
  } そうでない場合 (id.includes('node_modules') && id.includes('vue')) {
    'vue' を返す
  } そうでなければ (id.includes('node_modules')) {
    'ベンダー'を返す
  }
}

これが設定されていない場合、vite は node_modules パッケージを大きな非同期 vendor.js ファイルにパッケージ化します。ファイルが大きすぎると、ページがレンダリングされるときにブロック時間が間違いなく長くなります。また、ページキャッシュの最適化にも役立ちません。
上記の構成では、UIフレームワーク（primeVue）とvue関連のパッケージをそれぞれ1つのファイルにパッケージ化しました。これにより、各依存ファイルのサイズが削減されるだけでなく、プロジェクトのキャッシュも最適化されます。これらの基本ライブラリなどの依存パッケージは、あまり頻繁に更新されません。
サーバー上のファイルキャッシュポリシー構成と組み合わせると、ユーザーはサイトに初めてアクセスする場合を除いて、これらの依存ファイルを読み込む必要があります。また、次回のアクセス時には、キャッシュから直接読み取ることもできます。依存ファイルコードを削減すると、プロジェクトのパフォーマンスが大幅に向上します。

さらに、viteがビルドされると、次のhtmlファイルが自動的に生成されます。

  <!DOCTYPE html>
  <html lang="ja">
    <ヘッド>
      <メタ文字セット="UTF-8" />
      <link rel="icon" href="/favicon.ico" rel="外部 nofollow" />
      <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
      <title>私のプロジェクト</title>
    <script type="module" crossorigin src="/assets/index.e3627129.js"></script>
    <link rel="modulepreload" href="/js/vue/vue.a1ee204f.js" rel="外部nofollow" >
    <link rel="modulepreload" href="/js/prime/prime.eb4bfea6.js" rel="外部nofollow" >
    <link rel="スタイルシート" href="/assets/prime.296674d4.css" rel="外部nofollow" >
    <link rel="スタイルシート" href="/assets/index.289426b3.css" rel="外部nofollow" >
  </head>
    <本文>
      <div id="アプリ"></div>
      
    </本文>
  </html>

rel="modulepreload" 属性を持つリンクタグは、ネイティブモジュールをプリロードして、一部のファイルが実行までロードされるのを待つ必要がないようにすることができ、これによりページのパフォーマンスも向上します。

画像リソースファイルの処理。 assetInlineLimit オプション値より小さいアセットは、base64 データ URL としてインライン化され、それを参照するファイルと一緒にパッケージ化されます。これにより、ファイルリクエストの数が減り、プロジェクトのパフォーマンスが向上します。

他の

動的にインポートされたファイルによって生成された非同期チャンクを対応するフォルダーに配置するか、チャンク名をカスタマイズします。

こんにちは、ロールアップのドキュメントを長い間チェックし、しばらく自分で試してみた後、ついに成功しました。次の構成を参照してください。

デフォルトのdefineConfigをエクスポートする({
  建てる： {
    資産ディレクトリ: '資産',
    ロールアップオプション: {
      出力: {
        // eslint 次の行を無効にする @typescript-eslint/no-explicit-any
        チャンクファイル名: (チャンク情報: 任意) => {
          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []
          const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'
          `js/${fileName}/[name].[hash].js` を返します
        },
      }
    }
  }
})

vite 構成はグローバル SCSS 変数を渡します

構成は以下のとおりです

デフォルトのdefineConfigをエクスポートする({
  css: {
    プリプロセッサオプション: {
      SCSS: {
        追加データ: '@import "./src/styles/variables";'
      }
    }
  },
})

また、vite のバージョンによって設定項目に若干の違いがあることにも注意してください。そのため、プロジェクトを構成する際に、ドキュメントに完全に従って構成しても問題が発生する場合は、使用しているバージョンとドキュメントのバージョンの違いが原因であるかどうかを確認することをお勧めします。

やっと

私が構成した vite2.0+Vue3.0 プロジェクト「Portal」を共有します。これは、水面下でテストするために使用されるプロジェクトです。何か間違っている点があれば、ご指摘ください。

vite2.0 の落とし穴に関するこの記事はこれで終わりです。vite2.0 の落とし穴に関するその他の関連記事については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:

Viteはプロジェクトを構築し、マイクロフロントエンドをサポートします
この記事では、Viteがブラウザのリクエストに対して何を行うかを説明します。
Vite+ElectronでVUE3デスクトップアプリケーションを素早く構築
古い Vue プロジェクトに Vite サポートを追加する方法
Vue3.0+vite2は動的非同期コンポーネントの遅延読み込みを実装します
プロジェクトを素早く構築するためのvite+vue3.0+ts+element-plusの実装
vite+vue3+element-plus プロジェクトをビルドする手順
Viteの原理を学ぶ

<<: MySQL遅延スレーブを導入するメリットのまとめ

>>: CentOS 8 に Postfix メールサーバーをインストールして設定する方法

vue構成ファイルはルーティングとメニューインスタンスコードを自動的に生成します

Vite2.0の落とし穴

目次

Viteプロジェクトビルドの最適化

他の

やっと

vue構成ファイルはルーティングとメニューインスタンスコードを自動的に生成します

mysql8.0.11 winx64 手動インストールと設定チュートリアル

ウェブページの右下隅に「いいね！」カード効果を実現するための CSS (サンプルコード)

Centos7 DockerでNginxファイルを変更するプロセスの詳細な説明

JavaScript関数導入の詳しい説明

MySQLマスタースレーブ遅延現象と原理の詳細な分析

JDBC 接続 (MySQL への接続) の 6 ステップのサンプルコード

docker を使用して Kong クラスター操作を構築する

CSS を使用して要素のスクロールバーを非表示にするサンプルコード

vsFTP 3.0.3 のコンパイルとインストールの詳細な分析

推薦する

Linux netstatコマンドの詳細な説明

MySql8.0バージョンに接続するMyBatisの設定問題について

MySql が常に mySqlInstallerConsole ウィンドウをポップアップする問題の解決策

VMware ESXi 6.0 および仮想マシンのインストールチュートリアルの展開 (画像とテキスト)

Docker に Tomcat をインストールし、Springboot プロジェクトの WAR パッケージをデプロイする方法

mysql エラー 1045 (28000) - ユーザーへのアクセスが拒否される問題を解決する方法

データベースの冗長フィールドを合理的に使用する方法

MySQLは適切なストレージエンジンを選択します

Jira リバースプロキシを実装するための nginx について

Vue3.0 + TypeScript + Vite初体験の詳しい説明

Linux の MariaDB データベースについて

Alibaba Cloud Server で MySQL デュアルマシンホットスタンバイを手動で実装する 2 つの方法

divの背景を透明に設定する方法の例

Linux CentOS 6.5 のアンインストール、tar、および MySQL のインストールチュートリアル

Vue 2.0 の基礎を詳しく解説