vue でルートのオンデマンド読み込み (ルートの遅延読み込み) を実装する 3 つの方法

なぜ遅延読み込みが必要なのでしょうか?

vue のようなシングルページ アプリケーションでは、アプリケーションの遅延読み込みがない場合、webpack でパッケージ化されたファイルが異常に大きくなり、その結果、コンテンツをロードする必要があります。ホームページへのアクセスが多すぎたり、長すぎたりすると、長い白い画面が表示されます。ロードが完了したとしても、ユーザーエクスペリエンスには役立ちませんが、遅延ロードを使用すると、ページを分割し、必要なときにページをロードできるため、効果的にページをロードできます。ホームページの負荷を共有します。読み込みのプレッシャーに耐え、ホームページの読み込み時間を短縮します [関連する推奨事項: vue.js ビデオ チュートリアル ]

• vue 非同期コンポーネント

• #es プロポーザルの import()

• webpack の require、ensure()

#1. vue 非同期コンポーネント テクノロジ== == 非同期ロード

vue-router はルーティングを設定し、vue の非同期コンポーネント テクノロジを使用してオンデマンド ロードを実現します。コンポーネントは js ファイルを生成します

/* vue 非同期コンポーネント テクノロジー*/

{ path: '/home', name: 'home',

component:solve =>

require

([' @/components/home'],resolve) },{ パス: '/index'、名前: 'Index'、コンポーネント:solve => require (['@/components/index '],resolve) },

{ パス: '/about'、名前: 'about'、コンポーネント:solve => require(['@/components/about '],resolve) }

非遅延読み込み:

#遅延読み込み

2. コンポーネントの遅延読み込みソリューション 2. 遅延読み込みのルート (インポートを使用)

const 组件名=() => import('组件路径');
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

{ path: '/about', component: About }, { path: '/index', component: Index }, { path: '/home', component: Home }

3. webpack

vue によって提供される require.ensure() -router はルーティングを構成し、Webpack の require. ensure テクノロジーを使用してオンデマンド読み込みを実装することもできます。

この場合、同じchunkNameを指定する複数のルートがマージされ、1つのjsファイルにパッケージ化されます。

rree

以上がvue でルートのオンデマンド読み込み (ルートの遅延読み込み) を実装する 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。