vue-router 遅延ロードを使用して、初回ロード時にリソースが多すぎるために発生する速度低下の問題を解決します。-jsチュートリアル-php.cn

vue-router 遅延ロードを使用して、初回ロード時にリソースが多すぎるために発生する速度低下の問題を解決します。

亚连

リリース： 2018-05-26 13:50:41

オリジナル

1503 人が閲覧しました

この記事では、初回ロード時にリソースが多すぎるために発生する速度低下の問題を解決するための vue-router 遅延ロードを主に紹介します。必要な友人は、この記事を参照してください。遅延ロード: 遅延ロードとも呼ばれます。これは、必要なときにロードし、必要に応じてロードすることを意味します。

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

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

遅延読み込みメソッド:

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
Vue.use(Router)
//采用了懒加载
export default new Router({
 routes: [
  {
    path:&#39;/&#39;,
    component:resolve => require([&#39;@/components/index&#39;],resolve)
  }
 ]
})

ログイン後にコピー

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

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
import index from &#39;@/components/index&#39;
Vue.use(Router)
export default new Router({
 routes: [
  {
    path:&#39;/&#39;,
    component:index
  }
 ]
})

ログイン後にコピー

ps:vue-routerルートの遅延読み込みを見てみましょう vueでシングルページアプリケーションを書くとき。 js、パッケージ化された JavaScript パッケージは非常に大きくなり、ページの読み込みに影響します。特定のルートを使用する場合、ルートの遅延読み込みを使用して、コードをより効率的に実装することができます。 . 以下の通り:

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: &#39;/&#39;,
   component: resolve => require([&#39;components/Hello.vue&#39;], resolve)
  },
  {
    path: &#39;/about&#39;,
    component: resolve => require([&#39;components/About.vue&#39;], resolve)
  }
 ]
})

ログイン後にコピー

以上、皆さんの参考になれば幸いです。

AJAXの簡単な非同期通信例分析

サーバーから返されたXMLのAJAX処理方法

AJAXの仕組みとクロスドメイン通信について詳しく解説

以上がvue-router 遅延ロードを使用して、初回ロード時にリソースが多すぎるために発生する速度低下の問題を解決します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。