vue でのオンデマンド読み込みとは何ですか

vue では、オンデマンド読み込みは遅延読み込みまたは遅延読み込みとも呼ばれ、必要に応じてリソースを読み込むことを意味します。vue プロジェクトでオンデマンド読み込みを実装するには、vue 非同期コンポーネント テクノロジと、vue 非同期コンポーネント テクノロジの 3 つの方法があります。 import() は es によって提案され、「require.ensure()」は webpack によって提供されます。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

オンデマンド読み込みは、遅延読み込みまたは遅延読み込みとも呼ばれ、リソースを必要に応じて読み込み、使用されたときにのみ読み込まれることを意味します。

オンデマンドでロードする必要がある理由

インターネットの発展に伴い、Web ページにはますます多くの機能が必要になります。フロントエンド アーキテクチャとしてシングル ページ アプリケーションを使用する Web サイトの場合、多くの機能が 1 つの HTML に集中しているため、Web ページに大量のコードを読み込む必要があるという問題に直面します。これにより、Web ページの読み込みが遅くなり、インタラクションが停止し、ユーザー エクスペリエンスが非常に低下します。

この問題の根本原因は、すべての関数に対応するコードが一度に読み込まれるにもかかわらず、実際にはユーザーが各段階で一部の関数しか使用できないことです。したがって、上記の問題を解決する方法は、ユーザーが現在必要としている機能に対応するコードのみをロードする、いわゆるオンデマンドロードです。

vue プロジェクトがオンデマンド読み込みを実装する方法

vue プロジェクトがオンデマンド読み込みを実装する 3 つの方法: vue 非同期コンポーネント テクノロジ、es 提案 import() 、webpack 提供 require.ensure()

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

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

ユースケース:

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require(['../components/PromiseDemo'], resolve)
}

es プロポーザルの import() (推奨)

webpack 公式ドキュメント: webpack で import() を使用する

vue 公式ドキュメント: 遅延読み込みのルーティング (import() を使用)

ユースケース:

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
    routes: [
        {
            path: '/importfuncdemo1',
            name: 'ImportFuncDemo1',
            component: ImportFuncDemo1
        },
        {
            path: '/importfuncdemo2',
            name: 'ImportFuncDemo2',
            component: ImportFuncDemo2
        }
    ]
})

require.ensure() は webpack によって提供されます

vue-routerルーティングを設定し、webpack の require.ensure テクノロジーを使用します。オンデマンド読み込みも実装できます。

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

例:

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
},
{
    path: '/hello',
    name: 'Hello',
    // component: Hello
    component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
}

[関連する推奨事項: vue.js チュートリアル]

以上がvue でのオンデマンド読み込みとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。