Was ist On-Demand-Laden in Vue?

In Vue wird das Laden bei Bedarf auch als verzögertes Laden oder verzögertes Laden bezeichnet. Es gibt drei Möglichkeiten, Ressourcen nach Bedarf in Vue-Projekten zu laden: die asynchrone Komponententechnologie von Vue, import (), vorgeschlagen von es und bereitgestellt vom Webpack „require.ensure()“.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Beim Laden nach Bedarf, auch verzögertes Laden oder verzögertes Laden genannt, werden Ressourcen nach Bedarf geladen und nur dann geladen, wenn sie verwendet werden.

Warum es notwendig ist, bei Bedarf zu laden?

Mit der Entwicklung des Internets muss eine Webseite immer mehr Funktionen bieten. Bei Websites, die Single-Page-Anwendungen als Front-End-Architektur verwenden, besteht das Problem, dass eine große Menge Code auf eine Webseite geladen werden muss, da viele Funktionen in einem HTML konzentriert sind. Dies führt zu einem langsamen Laden von Webseiten, hängengebliebenen Interaktionen und einer sehr schlechten Benutzererfahrung.

Die Hauptursache für dieses Problem besteht darin, dass der Code, der allen Funktionen entspricht, gleichzeitig geladen wird. Tatsächlich können Benutzer jedoch in jeder Phase nur einen Teil der Funktionen verwenden. Daher besteht die Möglichkeit, das oben genannte Problem zu lösen, darin, nur den Code zu laden, der der Funktion entspricht, die der Benutzer derzeit benötigt. Dies ist das sogenannte On-Demand-Laden.

So implementieren Sie das On-Demand-Laden für Vue-Projekte

3 Möglichkeiten für Vue-Projekte, das On-Demand-Laden zu implementieren: asynchrone Vue-Komponententechnologie, import() des ES-Vorschlags, require.ensure() bereitgestellt von Webpack

vue Asynchrone Komponententechnologie

vue-Router konfiguriert das Routing und nutzt die asynchrone Komponententechnologie von vue, um ein Laden bei Bedarf zu erreichen. Auf diese Weise generiert die nächste Komponente eine JS-Datei

Anwendungsfall:

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

es vorgeschlagene import() (empfohlen)

Offizielle Webpack-Dokumentation: Verwendung von import() in Webpack

vue-offizielle Dokumentation : Verzögertes Laden von Routen (mithilfe von import())

Anwendungsfall:

// 下面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 bereitgestellt von Webpack Konfigurieren Sie das Routing, verwenden Sie die require.ensure-Technologie von Webpack, und Sie können es auch erreichen -Bedarfsladen.

In diesem Fall werden mehrere Routen, die denselben ChunkName angeben, zusammengeführt und in eine JS-Datei gepackt.

Beispiele sind wie folgt:

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

[Verwandte Empfehlungen: vue.js Tutorial]

Das obige ist der detaillierte Inhalt vonWas ist On-Demand-Laden in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!