Qu'est-ce que le chargement à la demande dans vue

Dans vue, le chargement à la demande est également appelé chargement différé ou chargement paresseux, ce qui signifie charger les ressources selon les besoins. Il existe trois façons d'implémenter le chargement à la demande dans les projets vue : technologie de composant asynchrone vue, import() proposée par es ; , et fourni par le webpack "require.ensure()".

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Le chargement à la demande, également appelé chargement différé ou chargement différé, consiste à charger des ressources selon les besoins et ne sera chargé que lorsqu'elles seront utilisées.

Pourquoi il est nécessaire de charger à la demande

Avec le développement d'Internet, une page web doit embarquer de plus en plus de fonctions. Pour les sites Web qui utilisent des applications d'une seule page comme architecture frontale, ils seront confrontés au problème d'une grande quantité de code qui doit être chargé sur une page Web, car de nombreuses fonctions sont concentrées dans un seul code HTML. Cela entraînera un chargement lent des pages Web, des interactions bloquées et une très mauvaise expérience utilisateur.

La cause première de ce problème est que le code correspondant à toutes les fonctions est chargé en même temps, mais en fait, les utilisateurs ne peuvent utiliser qu'une partie des fonctions à chaque étape. Par conséquent, la manière de résoudre le problème ci-dessus consiste à charger uniquement le code correspondant à la fonction dont l'utilisateur a actuellement besoin, ce qu'on appelle le chargement à la demande.

Comment implémenter le chargement à la demande pour les projets vue

3 façons pour les projets vue d'implémenter le chargement à la demande : technologie de composant asynchrone vue, import() de la proposition es, require.ensure() fourni par webpack

Technologie de composants asynchrones vue

vue-router configure le routage et utilise la technologie de composants asynchrones de vue pour réaliser un chargement à la demande. De cette façon, le composant suivant génère un fichier js

Cas d'utilisation :

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

es import() proposé (recommandé)

documentation officielle du webpack : Utilisation de import() dans webpack

vue documentation officielle : Chargement paresseux des routes (à l'aide de import())

Cas d'utilisation :

// 下面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()

vue-router fourni par webpack Configurez le routage, utilisez la technologie require.ensure de webpack, vous pouvez également obtenir des résultats sur- chargement à la demande.

Dans ce cas, plusieurs routes spécifiant le même chunkName seront fusionnées et regroupées dans un seul fichier js.

Les exemples sont les suivants :

{
    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')
}

[Recommandations associées : Tutoriel vue.js]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!