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

青灯夜游
Libérer: 2022-01-10 17:36:45
original
4403 Les gens l'ont consulté

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()".

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

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)
}
Copier après la connexion

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
        }
    ]
})
Copier après la connexion

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')
}
Copier après la connexion

[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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal