ホームページ ウェブフロントエンド jsチュートリアル vue-routerの遅延読み込みの初回読み込み速度が遅い問題を解決する手順を詳しく解説

vue-routerの遅延読み込みの初回読み込み速度が遅い問題を解決する手順を詳しく解説

May 02, 2018 am 10:01 AM
vue-router 負荷 初め

今回は、初回読み込み速度が遅い場合のvue-router遅延読み込みの注意点について詳しく解説していきます。実際のケースを見てみましょう。

vue のような単一ページのアプリケーションでは、アプリケーションの遅延読み込みがない場合、webpack でパッケージ化されたファイルが異常に大きくなり、その結果、ホームページに入るときにロードされるコンテンツが多すぎて、時間が長すぎます。遅延読み込みを使用すると、必要に応じてページを分割して読み込むことができるため、ホームページの読み込み圧力が効果的に分散され、読み込み時間が短縮されます。ホームページの。

簡単に言うと、一度に多くのリソースをロードして時間がかかりすぎないようにして、ホームページにアクセスしてください。 ! !

遅延読み込みメソッド:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//采用了懒加载
export default new Router({
 routes: [
  {
    path:'/',
    component:resolve => require(['@/components/index'],resolve)
  }
 ]
})
ログイン後にコピー

非遅延読み込みメソッド:

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)
export default new Router({
 routes: [
  {
    path:'/',
    component:index
  }
 ]
})
ログイン後にコピー

ps:vue-routerを見てみましょうルーティング遅延読み込み

vue.jsを使って単一ページのアプリケーション パッケージ化された JavaScript パッケージが非常に大きく見えることがあり、ページの読み込みに影響を与えることがあります。この問題を最適化するために、特定のルートを使用する場合は、対応するコンポーネントのみを読み込みます。より効率的です。実装コードは次のとおりです:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   component: resolve => require(['components/Hello.vue'], resolve)
  },
  {
    path: '/about',
    component: resolve => require(['components/About.vue'], resolve)
  }
 ]
})
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 !

推奨読書:

HTMLタグのJS動的操作

React Router v4の使い方の詳しい説明

BubbleTransitionによるページ切り替え機能の実装方法

以上がvue-routerの遅延読み込みの初回読み込み速度が遅い問題を解決する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Illustrator でのプラグインの読み込みエラー [修正] Illustrator でのプラグインの読み込みエラー [修正] Feb 19, 2024 pm 12:00 PM

Adobe Illustrator を起動すると、プラグインの読み込みエラーに関するメッセージが表示されますか?一部の Illustrator ユーザーは、アプリケーションを開いたときにこのエラーに遭遇しました。メッセージの後には、問題のあるプラグインのリストが続きます。このエラー メッセージは、インストールされているプラ​​グインに問題があることを示していますが、Visual C++ DLL ファイルの破損や環境設定ファイルの破損など、他の理由によって発生する可能性もあります。このエラーが発生した場合は、この記事で問題を解決する方法を説明しますので、以下を読み続けてください。 Illustrator でのプラグインの読み込みエラー Adob​​e Illustrator を起動しようとしたときに「プラグインの読み込みエラー」エラー メッセージが表示された場合は、次の操作を行うことができます。 管理者として

Vue アプリケーションで vue-router エラー「NavigationDuplicated: 現在の場所への冗長なナビゲーションを回避しました」が発生しました。これを解決するにはどうすればよいですか? Vue アプリケーションで vue-router エラー「NavigationDuplicated: 現在の場所への冗長なナビゲーションを回避しました」が発生しました。これを解決するにはどうすればよいですか? Jun 24, 2023 pm 02:20 PM

Vue アプリケーションで vue-router エラー「NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation」が発生しました – 解決方法は? Vue.js は、高速で柔軟な JavaScript フレームワークとして、フロントエンド アプリケーション開発でますます人気が高まっています。 VueRouter は、ルーティング管理に使用される Vue.js のコード ライブラリです。ただし、場合によっては、

Stremio の字幕が機能しない; 字幕の読み込みエラー Stremio の字幕が機能しない; 字幕の読み込みエラー Feb 24, 2024 am 09:50 AM

Windows PC の Stremio で字幕が機能しませんか?一部の Stremio ユーザーは、ビデオに字幕が表示されないと報告しました。多くのユーザーが、「字幕の読み込みエラー」というエラー メッセージが表示されたと報告しています。このエラーとともに表示される完全なエラー メッセージは次のとおりです: 字幕の読み込み中にエラーが発生しました 字幕の読み込みに失敗しました: これは、使用しているプラ​​グインまたはネットワークに問題がある可能性があります。エラー メッセージにあるように、インターネット接続がエラーの原因である可能性があります。したがって、ネットワーク接続を確認し、インターネットが適切に機能していることを確認してください。これとは別に、このエラーの背後には、競合する字幕アドオン、特定のビデオ コンテンツでサポートされていない字幕、古い Stremio アプリなど、他の理由が考えられます。のように

PHP は無限スクロール読み込みを実装します PHP は無限スクロール読み込みを実装します Jun 22, 2023 am 08:30 AM

インターネットの発展に伴い、スクロール読み込みをサポートする必要がある Web ページが増えています。無限スクロール読み込みもその 1 つです。これにより、ページに新しいコンテンツを継続的に読み込むことができるため、ユーザーはよりスムーズに Web を閲覧できるようになります。この記事では、PHPを使って無限スクロールローディングを実装する方法を紹介します。 1. 無限スクロールローディングとは何ですか?無限スクロール読み込みは、スクロール バーに基づいて Web コンテンツを読み込む方法です。その原理は、ユーザーがページの一番下までスクロールすると、AJAX を通じてバックグラウンド データが非同期的に取得され、新しいコンテンツが継続的に読み込まれることです。このような積み込み方法

CSSが読み込めない問題の解決方法 CSSが読み込めない問題の解決方法 Oct 20, 2023 am 11:29 AM

CSS を読み込めない問題の解決策には、ファイル パスの確認、ファイルの内容の確認、ブラウザのキャッシュのクリア、サーバー設定の確認、開発者ツールの使用、ネットワーク接続の確認などが含まれます。詳細な紹介: 1. ファイル パスを確認します。まず、CSS ファイルのパスが正しいことを確認してください。CSS ファイルが Web サイトの別の部分またはサブディレクトリにある場合は、正しいパスを指定する必要があります。 CSS ファイルはルート ディレクトリにあり、パスは直接である必要があります。 ; 2. ファイルの内容を確認します。パスが正しい場合は、CSS ファイル自体に問題がある可能性があります。CSS ファイルを開いて確認してください。

ハイパーリンクを挿入すると Outlook がフリーズする ハイパーリンクを挿入すると Outlook がフリーズする Feb 19, 2024 pm 03:00 PM

Outlook にハイパーリンクを挿入するときにフリーズの問題が発生した場合は、不安定なネットワーク接続、古い Outlook バージョン、ウイルス対策ソフトウェアによる干渉、またはアドインの競合が原因である可能性があります。これらの要因により、Outlook がハイパーリンク操作を適切に処理できない可能性があります。ハイパーリンクの挿入時に Outlook がフリーズする問題を修正する 次の修正プログラムを使用して、ハイパーリンクの挿入時に Outlook がフリーズする問題を修正します。 インストールされているアドインを確認する Outlook を更新する ウイルス対策ソフトウェアを一時的に無効にして、新しいユーザー プロファイルの作成を試行する Office アプリ プログラムを修正する Office をアンインストールして再インストールする 始めましょう。 1] インストールされているアドインを確認する Outlook にインストールされているアドインが問題の原因となっている可能性があります。

Vue ルーティングについて詳しく説明した記事: vue-router Vue ルーティングについて詳しく説明した記事: vue-router Sep 01, 2022 pm 07:43 PM

この記事では、Vue ファミリー バケットの Vue-Router について詳しく説明し、ルーティングに関する関連知識について学びます。

Windows 7 が USB ドライバーのロードに失敗した場合はどうすればよいですか? Windows 7 が USB ドライバーのロードに失敗した場合はどうすればよいですか? Jul 11, 2023 am 08:13 AM

win7システムをインストールする際、一部のネチズンはUSBドライバーのロードに失敗し、USBデバイスが新しいwin7システムで認識されず、一般的なUSBフラッシュドライブ、マウスなどのデバイスが使用できない状況に遭遇しました。では、win7 のインストールで USB ドライバーのロードに失敗した場合はどうすればよいでしょうか? win7のインストール時にUSBドライバーのロードに失敗する問題を解決する方法をXiaobiに教えてもらいましょう。方法 1: 1. まず、コンピュータの電源を入れてコンピュータ システムに入り、コンピュータ システムのコンピュータ システムのバージョンを確認します。コンピューターシステムのバージョンとデバイスドライバーのバージョンが一致しているか確認してください。 2. ドライバーのバージョンを確認した後、USB デバイスをコンピューター システムに接続します。コンピューター システムは、デバイスがシステムに接続できないことを示しています。 3. 接続情報ページで、[ヘルプ] ボタンをクリックしてヘルプ情報を表示します。 4. コンピュータ部門の場合

See all articles