3 Möglichkeiten zum Implementieren des Routenladens bei Bedarf (verzögertes Laden von Routen) in Vue

Warum brauchen wir Lazy Loading?

Wenn bei Einzelseitenanwendungen wie Vue kein verzögertes Laden der Anwendung erfolgt, sind die mit Webpack gepackten Dateien ungewöhnlich groß, was dazu führt, dass beim Aufrufen der Homepage zu viel Inhalt geladen werden muss, und die Zeit wird ebenfalls verkürzt Erstens ist ein langfristiger weißer Bildschirm nicht förderlich für das Benutzererlebnis, selbst wenn das Laden abgeschlossen ist, kann die Seite geteilt und bei Bedarf geladen werden, wodurch der Ladedruck auf der Startseite effektiv verteilt werden kann Ladezeit der Homepage [ Verwandte Empfehlungen: vue.js Video-Tutorial]

• vue asynchrone Komponente

• es vorgeschlagene Import()

• Webpacks erfordern, sicherstellen()

1. asynchrone Komponententechnologie von vue ==== Asynchrones Laden

vue-Router konfiguriert das Routing und verwendet die asynchrone Komponententechnologie von vue, um ein bedarfsgesteuertes Laden zu erreichen
In diesem Fall generiert eine Komponente jedoch eine asynchrone js-Datei

/* vue Komponententechnologie* /

{ Pfad: '/home', Name: 'home', Komponente: Auflösung => : '/ index', Name: 'Index', Komponente: Auflösung => require(['@/components/index'],resolve) },{ Pfad: '/about', Name: 'about', Komponente : auflösen > (Import verwenden)

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. Das vom Webpack

vue-Router bereitgestellte require.ensure() konfiguriert das Routing und verwendet die require.ensure-Technologie des Webpacks, um das Laden bei Bedarf zu erreichen.

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

/* 组件懒加载方案三: webpack提供的require.ensure() */
{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') },
{ path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') },
{ path: '/about', name: 'about', component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01') }

// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
    routes: [
        {
           path: '/list/blog',
           component: list,
           name: 'blog'
        }
    ]
})

Das obige ist der detaillierte Inhalt von3 Möglichkeiten zum Implementieren des Routenladens bei Bedarf (verzögertes Laden von Routen) in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!