vue-router の遅延ロード中に初めてロードされるリソースが多すぎることによって引き起こされる速度の低下に対処する方法

php中世界最好的语言
リリース: 2018-05-26 14:40:14
オリジナル
2256 人が閲覧しました

今回は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

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

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

推奨書籍:

ゼロから React Router v4 を使用する


JS を使用して HTML タグを動的に追加する方法

以上がvue-router の遅延ロード中に初めてロードされるリソースが多すぎることによって引き起こされる速度の低下に対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート