3 façons d'implémenter le chargement de routes à la demande (chargement paresseux des routes) dans Vue

Pourquoi avons-nous besoin d'un chargement paresseux ?

Pour les applications monopage comme vue, s'il n'y a pas de chargement paresseux de l'application, les fichiers emballés avec webpack seront anormalement volumineux, ce qui entraînera trop de contenu à charger lors de l'accès à la page d'accueil, et le temps sera trop long. long.Premièrement, un écran blanc à long terme n'est pas propice à l'expérience utilisateur même si le chargement est effectué. L'utilisation du chargement paresseux peut diviser la page et la charger en cas de besoin, ce qui peut efficacement partager la pression de chargement sur la page d'accueil et réduire la charge. temps de chargement de la page d'accueil [ Recommandations associées : tutoriel vidéo vue.js]

• composant asynchrone vue

• es proposées import()

• webpack's require, Ensure()

1. technologie de composant asynchrone vue ==== Chargement asynchrone

vue-router configure le routage et utilise la technologie de composant asynchrone de vue pour réaliser un chargement à la demande
Cependant, dans ce cas, un composant génère un fichier js

/* vue asynchrone. technologie des composants* /

{ chemin : '/home', nom : 'home', component : solve => require(['@/components/home'],resolve) },

{ chemin : '/ index', nom : 'Index', composant : solve => require(['@/components/index'],resolve) },

{ chemin : '/about', nom : 'about', composant : solve > (Utiliser l'importation)

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. Le require.ensure() fourni par webpack vue-router configure le routage et utilise la technologie require.ensure de webpack pour réaliser un 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.

/* 组件懒加载方案三: 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'
        }
    ]
})

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!