Implémenter le chargement paresseux de Vue avec la barre de progression

La colonne Vue.js suivante vous présentera comment ajouter une barre de progression au chargement paresseux de Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Introduction

Habituellement, lors de l'écriture d'une application monopage (SPA) avec Vue.js, lorsque la page est chargée, toutes les ressources requises telles que JavaScript et Fichiers CSS) seront chargés ensemble. Cela peut conduire à une mauvaise expérience utilisateur lorsque vous travaillez avec des fichiers volumineux.

Avec Webpack, vous pouvez charger des pages à la demande dans Vue.js en utilisant la fonction import() au lieu du mot-clé import.

Pourquoi charger à la demande ?

La manière typique dont SPA fonctionne dans Vue.js est de regrouper toutes les fonctions et ressources et de les fournir ensemble, afin que les utilisateurs puissent utiliser votre application sans actualiser la page. Si vous ne concevez pas explicitement votre application pour charger des pages à la demande, toutes les pages seront chargées en même temps ou une grande quantité de mémoire sera utilisée à l'avance pour un préchargement inutile.

Cela est très préjudiciable aux grands SPA comportant de nombreuses pages et entraînera une mauvaise expérience utilisateur lors de l'utilisation de téléphones mobiles bas de gamme et de faibles vitesses de réseau. Avec le chargement à la demande, les utilisateurs n'auront pas besoin de télécharger des ressources dont ils n'ont pas actuellement besoin.

Vue.js ne fournit aucun contrôle lié à l'indicateur de chargement pour les modules dynamiques. Même si la prélecture et le préchargement sont effectués, il n'y a pas d'espace correspondant pour informer l'utilisateur du processus de chargement, il est donc nécessaire d'améliorer l'expérience utilisateur en ajoutant une barre de progression.

Préparer le projet

Vous avez d'abord besoin d'un moyen pour que la barre de progression communique avec Vue Router. Le Mode bus événement est plus adapté.

Le bus d'événements est un singleton d'une instance Vue. Étant donné que toutes les instances Vue disposent d'un système d'événements utilisant $on et $emit , vous pouvez l'utiliser pour diffuser des événements n'importe où dans votre application.

Créez d'abord un nouveau fichier components dans le répertoire eventHub.js :

import Vue from 'vue'
export default new Vue()

Ensuite, configurez Webpack pour désactiver la prélecture et le préchargement afin que vous puissiez le faire individuellement pour chaque fonction Opération de classe, bien sûr vous pouvez également le désactiver globalement. Créez un fichier vue.config.js dans le dossier racine et ajoutez la configuration appropriée pour désactiver la prélecture et le préchargement :

module.exports = {
    chainWebpack: (config) => {
        // 禁用预取和预加载
        config.plugins.delete('prefetch')
        config.plugins.delete('preload')
    },
}

Ajouter des routes et des pages

Installez le routeur Vue avec npx et utilisez :

$ npx vue add router

Modifiez le fichier du routeur situé sous router/index.js et mettez à jour le routage afin que l'instruction import() puisse être remplacée par une fonction import :

La configuration par défaut suivante :

import About from '../views/About.vue'
{
    path: '/about',
    name: 'About',
    component: About
},

Remplacez-le par :

{
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
},

Si vous souhaitez avoir la possibilité de charger certaines pages à la demande, plutôt que de désactiver la prélecture et le préchargement globalement, vous pouvez utiliser une annotation Webpack spéciale et ne pas configurer Webpack dans vue.config.js:

import(
    /* webpackPrefetch: true */
    /* webpackPreload: true */
    '../views/About.vue'
)

et import() est que les modules ES chargés par import sont chargés au moment de l'exécution et les modules ES chargés par import() sont chargés au moment de la compilation. Cela signifie que vous pouvez utiliser import pour retarder le chargement du module et ne le charger que lorsque cela est nécessaire. import()

Mise en place d'une barre de progression

Comme nous ne pouvons pas estimer avec précision le temps de chargement (ou le chargement complet) de la page, nous ne pouvons pas

vraiment créer une barre de progression. Il n’existe également aucun moyen de vérifier le chargement de la page. Mais vous pouvez créer une barre de progression et la terminer au chargement de la page.

Comme cela ne reflète pas vraiment les progrès, les progrès représentés sautent simplement de manière aléatoire.

Installez

d'abord, car ce package sera utilisé pour générer des nombres aléatoires pendant le processus de génération de la barre de progression : lodash.random

$ npm i lodash.random

Ensuite, créez un composant Vue

 : components/ProgressBar.vue

<template>
    <p>
        </p>
<p>
            </p>
<p></p>
        
        <p></p>
    
</template>

Ensuite, ajoutez un script au composant. Importez d'abord

et random dans le script, qui seront utilisés plus tard : $eventHub

<script>
import random from &#39;lodash.random&#39;
import $eventHub from &#39;../components/eventHub&#39;
</script>

Après l'importation, définissez quelques variables dans le script qui seront utilisées plus tard :

// 假设加载将在此时间内完成。
const defaultDuration = 8000 
// 更新频率
const defaultInterval = 1000 
// 取值范围 0 - 1. 每个时间间隔进度增长多少
const variation = 0.5 
// 0 - 100. 进度条应该从多少开始。
const startingPoint = 0 
// 限制进度条到达加载完成之前的距离
const endingPoint = 90

puis code à implémenter La logique du chargement asynchrone des composants :

export default {
    name: 'ProgressBar',
    
    data: () => ({
        isLoading: true, // 加载完成后，开始逐渐消失
        isVisible: false, // 完成动画后，设置 display: none
        progress: startingPoint,
        timeoutId: undefined,
    }),

    mounted() {
        $eventHub.$on('asyncComponentLoading', this.start)
        $eventHub.$on('asyncComponentLoaded', this.stop)
    },

    methods: {
        start() {
            this.isLoading = true
            this.isVisible = true
            this.progress = startingPoint
            this.loop()
        },

        loop() {
            if (this.timeoutId) {
                clearTimeout(this.timeoutId)
            }
            if (this.progress >= endingPoint) {
                return
            }
            const size = (endingPoint - startingPoint) / (defaultDuration / defaultInterval)
            const p = Math.round(this.progress + random(size * (1 - variation), size * (1 + variation)))
            this.progress = Math.min(p, endingPoint)
            this.timeoutId = setTimeout(
                this.loop,
                random(defaultInterval * (1 - variation), defaultInterval * (1 + variation))
            )
        },

        stop() {
            this.isLoading = false
            this.progress = 100
            clearTimeout(this.timeoutId)
            const self = this
            setTimeout(() => {
                if (!self.isLoading) {
                    self.isVisible = false
                }
            }, 200)
        },
    },
}

Dans la fonction

, utilisez le bus d'événements pour écouter le chargement des composants asynchrones. Une fois que l'itinéraire nous indique que nous avons navigué vers une page qui n'a pas encore été chargée, l'animation de chargement démarrera. mounted()

Enfin, ajoutez un peu de style :

<style>
.loading-container {
    font-size: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    width: 100%;
    opacity: 0;
    display: none;
    z-index: 100;
    transition: opacity 200;
}

.loading-container.visible {
    display: block;
}
.loading-container.loading {
    opacity: 1;
}

.loader {
    background: #23d6d6;
    display: inline-block;
    height: 100%;
    width: 50%;
    overflow: hidden;
    border-radius: 0 0 5px 0;
    transition: 200 width ease-out;
}

.loader > .light {
    float: right;
    height: 100%;
    width: 20%;
    background-image: linear-gradient(to right, #23d6d6, #29ffff, #23d6d6);
    animation: loading-animation 2s ease-in infinite;
}

.glow {
    display: inline-block;
    height: 100%;
    width: 30px;
    margin-left: -30px;
    border-radius: 0 0 5px 0;
    box-shadow: 0 0 10px #23d6d6;
}

@keyframes loading-animation {
    0% {
        margin-right: 100%;
    }
    50% {
        margin-right: 100%;
    }
    100% {
        margin-right: -10%;
    }
}
</style>

Enfin, ajoutez

au ProgressBar ou au composant de mise en page, tant qu'il est dans le même composant que la vue d'itinéraire, il sera dans l'application est disponible tout au long du cycle de vie : App.vue

<template>
    <p>
        <progress-bar></progress-bar>
        <router-view></router-view>
        <!--- 你的其它组件 -->
    </p>
</template>

<script>
import ProgressBar from &#39;./components/ProgressBar.vue&#39;
export default {
       components: { ProgressBar },
}
</script>

Ensuite, vous pouvez voir une barre de progression fluide en haut de la page :

Déclenchez la barre de progression pour les paresseux chargement

Maintenant

écoute sur le bus d'événements les événements de chargement de composants asynchrones. Une animation devrait être déclenchée lorsque certaines ressources sont chargées de cette manière. Ajoutez maintenant un garde de route à l'itinéraire pour recevoir les événements suivants : ProgressBar

import $eventHub from '../components/eventHub'

router.beforeEach((to, from, next) => {
    if (typeof to.matched[0]?.components.default === 'function') {
        $eventHub.$emit('asyncComponentLoading', to) // 启动进度条
    }
    next()
})

router.beforeResolve((to, from, next) => {
    $eventHub.$emit('asyncComponentLoaded') // 停止进度条
    next()
})

为了检测页面是否被延迟加载了，需要检查组件是不是被定义为动态导入的，也就是应该为  component:() => import('...') 而不是component:MyComponent。

这是通过 typeof to.matched[0]?.components.default === 'function' 完成的。带有  import 语句的组件不会被归为函数。

总结

在本文中，我们禁用了在 Vue 应用中的预取和预加载功能，并创建了一个进度条组件，该组件可显示以模拟加载页面时的实际进度。

原文：https://stackabuse.com/lazy-loading-routes-with-vue-router/

作者：Stack Abuse

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个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!