乐趣区

关于vue.js:为-Vue-的惰性加载加一个进度条

jiezi

作者：Stack Abuse

翻译：疯狂的技术宅

https://stackabuse.com/lazy-l…

未经容许严禁转载

简介

通常用 Vue.js 编写单页利用（SPA）时，当加载页面时，所有必须的资源（如 JavaScript 和 CSS 文件）都会被一起加载。在解决大文件时，这可能会导致用户体验不佳。

借助 Webpack，能够用 import() 函数而不是 import 关键字在 Vue.js 中按需加载页面。

为什么要按需加载？

Vue.js 中 SPA 的典型工作形式是将所有性能和资源打包一并交付，这样能够使用户无需刷新页面即可应用你的利用。如果你没有为了按需加载页面针对本人的利用进行明确的设计，那么所有的页面会被立刻加载，或者提前应用大量内存进行不必要的预加载。

这对有许多页面的大型 SPA 十分不利，会导致应用低端手机和低网速的用户体验会很差。如果通过按需加载，用户将不须要下载他们以后不须要的资源。

Vue.js 没有为动静模块提供任何加载指示器相干的控件。即便进行了预取和预加载，也没有对应的空间让用户晓得加载的过程，所以还须要通过增加进度条来改善用户体验。

筹备我的项目

首先须要一种让进度条与 Vue Router 通信的办法。事件总线模式 比拟适合。

事件总线是一个 Vue 实例的单例。因为所有 Vue 实例都有一个应用 $on和 $emit 的事件零碎，因而能够用它在利用中的任何中央传递事件。

首先在 components 目录中创立一个新文件 eventHub.js：

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

而后把 Webpack 配置为禁用预取和预加载，这样就能够针对每个函数独自执行此类操作，当然你也能够全局禁用它。在根文件夹中创立一个 vue.config.js 文件并增加禁用预取和预加载的相干配置：

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

增加路由和页面

用 npx 装置 Vue router 并应用：

$ npx vue add router

编辑位于 router/index.js 下的 router 文件并更新路由，以便能够用 import() 函数代替 import 语句：

以下默认配置：

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

将其改为：

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

如果心愿能够抉择按需加载某些页面，而不是全局禁用预取和预加载，能够用非凡的 Webpack 正文，不要在 vue.config.js 中配置 Webpack：

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

import() 和 import 之间的次要区别是在运行时加载由 import() 加载的 ES 模块，在编译时加载由 import 加载的 ES 模块。这就意味着能够用 import() 提早模块的加载，并仅在必要时加载。

实现进度条

因为无奈精确估算页面的加载工夫（或齐全加载），因而咱们无奈 真正的 去创立进度条。也没有方法查看页面曾经加载了多少。不过能够创立一个进度条，并使它在页面加载时实现。

因为不能真正反映进度，所以描述的进度只是进行了随机跳跃。

先装置 lodash.random，因为在生成进度条的过程中将会用这个包产生一些随机数：

$ npm i lodash.random

而后，创立一个 Vue 组件 components/ProgressBar.vue：

<template>
    <div :class="{'loading-container': true, loading: isLoading, visible: isVisible}">
        <div class="loader" :style="{width: progress +'%'}">
            <div class="light"></div>
        </div>
        <div class="glow"></div>
    </div>
</template>

接下来向该组件增加脚本。在脚本中先导入 random 和 $eventHub，前面会用到：

<script>
import random from 'lodash.random'
import $eventHub from '../components/eventHub'
</script>

导入之后，在脚本中定义一些前面要用到的变量：

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

而后编码实现异步加载组件的逻辑：

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)
        },
    },
}

在 mounted() 函数中，用事件总线来侦听异步组件的加载。一旦路由通知咱们曾经导航到尚未加载的页面，它将会开始加载动画。

最初其增加一些款式：

<style scoped>
.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>

最初将 ProgressBar 增加到 App.vue 或布局组件中，只有它与路由视图位于同一组件中即可，它在利用的整个生命周期中都可用：

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

<script>
import ProgressBar from './components/ProgressBar.vue'
export default {components: { ProgressBar},
}
</script>

而后你就能够在页面顶端看到一个晦涩的进度条：

为提早加载触发进度条

当初 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 利用中的预取和预加载性能，并创立了一个进度条组件，该组件可显示以模仿加载页面时的理论进度。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现
  • 更多文章 …
退出移动版