共计 5161 个字符,预计需要花费 13 分钟才能阅读完成。
作者: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 个计划及实现
- 更多文章 …