vue-routerルーティングの遅延読み込み

I.はじめに

パッケージ化してアプリケーションを構築すると、JavaScriptパッケージが非常に大きくなり、ページの読み込みに影響します。図に示すように、遅延読み込みを使用しない場合、ビジネスコードはアプリの最初のjsファイルにあります。ビジネスが増えるにつれて、コードの量はどんどん増え、jsファイルはどんどん大きくなります。 。ユーザーが初めてページにアクセスする短い白い画面が表示される場合があります。

3つのjsファイルの役割：

• アプリ開始時の.jsファイル：自分で作成したビジネスコード
• マニフェストの先頭にある.jsファイル：パッケージ化されたコードの基盤となるサポートを提供します。たとえば、プロジェクトでES6またはCommonJSエクスポートルールを使用し、このjsファイルでこれらのルールを処理できます。
• ベンダーで始まる.jsファイル：vue、vue-routerコードなどのサードパーティのjsコード
• index.htmlファイルは、アプリの先頭に.jsファイルを導入します

---

2つ目は、ルーティング遅延読み込みを使用する

異なるルートに対応するコンポーネントを異なるコードブロックに分割し、ルートにアクセスしたときに対応するコンポーネントをロードできれば、より効率的になります。ルーティング遅延読み込みの主な機能は、ルーティングに対応するコンポーネントをjsコードブロックにパッケージ化することです。遅延読み込みのルーティング| Vueルーターの公式ウェブサイト

遅延読み込み方法：

const Foo = () => import('./Foo.vue')

const router = new VueRouter({
    
    
  routes: [
    {
    
     path: '/foo', component: Foo }
  ]
})