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 メールサーバーをインストールして設定する方法

Vite2.0の落とし穴

目次

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

他の

やっと

期間限定フラッシュセール機能を実現するJavaScriptタイマー

MySQLの7種類のログの概要

Dockerコンテナのk8sデプロイメントの実装

MySQL 5.7 でパスワードを変更する簡単な方法

Vueのイベント処理とイベント修飾子の詳細な説明

ウェブサイトのデザイン体験のための7つの異なるカラースキーム

2 つの Linux サーバー間の自動ファイル同期

ES5とES6の違いを分析する

MySQLの起動と接続方法の例分析

GolangでMySQLデータベースのバックアップを実装する方法

推薦する

Linux で open-vswitch をインストールおよびアンインストールする方法

HTML のスクロールバーについて/スクロールバーの削除

Ubuntu にグラフィックドライバーが正常にインストールされたかどうかを確認する方法

MySQL データベーステーブルのパーティション分割に関する考慮事項 [推奨]

Centos7 で mysqldump を使用して MySQL データベースの毎日の自動バックアップを作成する

MySQL Installer 8.0.21 インストールチュートリアル (画像とテキスト付き)

MySQL 5.7.24 のインストールと設定方法のグラフィックチュートリアル

Vue はブラウザのパスワード記憶機能を無効にするサンプルコードを実装します

Linux での MySQL のアンインストールとインストールのグラフィックチュートリアル

Debian 9 システムに MySQL データベースをインストールする方法

初心者向けウェブサイト構築ガイド⑦：美しいウェブサイトを作るのはとっても簡単

htmlダウンロード機能の詳しい説明

WeChatアプレットは写真の撮影とアルバムからの写真の選択を実現します

vue3.0 プロジェクトを素早く構築するための手順を完了する

ウェブサイトをIE6、7、8、9の古いバージョンに対応させるための3つのソリューション