Vite2.0の落とし穴

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

推薦する

Docker-Composeコマンドの使い方の詳しい説明

Docker コンテナはさまざまな方法で管理およびデプロイできます。 Docker コマンドを直接使...

CSSタグの表示モードの詳細な説明

ラベル表示モード（重要） divタグとspanタグ1. スタイルはまったく同じですが、ラベルが異なり...

Vue3 のウォッチの使用方法とベストプラクティスガイド

目次序文🌟 1. APIの紹介2. 複数のデータソースの監視3. リスニングアレイ4. 監視対象5....

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

この記事では、MySQL 8.0.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

JavaScript - Vue でのスロットの使用: スロット

目次Vue でのスロットの使用: slotスコープ付きスロット: テンプレートタグで囲む要約するVu...

uniappは録音アップロード機能を実現

目次uni-app の紹介HTML部分js部分インスタンスを作成する録音を開始録音終了録音を再生再生...

Linuxのtimeコマンドの使い方の詳しい説明

1. コマンドの紹介時間は、コマンドの実行に費やされた時間や関連するシステム リソース、その他の情報...

適応型ウェブページを設計および作成する方法

3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイス...

MySQL ファジークエリステートメントコレクション

SQL ファジークエリステートメント一般的なファジーステートメントの構文は次のとおりです。 SELE...

WeChatアプレット仮想リストの応用例

目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...

jQueryはすべてのショッピングカート機能を実装します

目次1. すべて選択2. 商品の数量を増やすか減らす3. 商品の小計を変更する4. 合計と合計額を計...

Linux で MySQL のスケジュールバックアップを実装する方法

実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...

JavaScript ECharts の使用方法の説明

以前、プロジェクトを行う際に ECharts を使用しました。今日はそれをメモとして整理し、より多く...

type=fileファイル変更フォームの名前が正常にエコーされない問題を解決

easyui フレームワークのコードは次のとおりです。 css: .ファイルボックス{ フロート:...

MySQL IN ステートメントにおける低速クエリの効率を最適化する手法の例

表の構造は以下のとおりです。記事数は690件のみです。 記事テーブル article(id,titl...