vue-router 遅延読み込みにより読み込み速度が最適化されます

今回は、読み込み速度を最適化するための 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 サイトの他の関連記事に注目してください。

推奨読書:

Linux で正規表現を使用するためのヒント

vue-infinite-loading を使用して無限ロード効果を作成する

以上がvue-router 遅延読み込みにより読み込み速度が最適化されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。