一、使用keep-alive缓存不活动组件
keep-alive是一个抽象组件:使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而 不是销毁它们。 有两个参数 include包裹的组件不会被缓存 ,exclude包裹的组件会缓存
<keep-alive :include="whiteList" :exclude="blackList">
<router-view></router-view>
</keep-alive>
二. 使用路由懒加载:
也叫延迟加载, 使用懒加载的原因: vue 是单页面应用,使用webpcak打包后的文件很大,会使进入首页时,加载的资源过多,会出现白屏的,不利于用户体验。运用懒加载后,就可以按需加载页面,提高用户体验
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: ()=>import('@/components/DefaultIndex') ,
children: [
{
path: '',
component: ()=>import('@/components/Index')
},
{
path: '*',
redirect: '/Index'
}
]
})
三、 图片懒加载
对于图片过多的页面,为了加速页面加载速度,对未出现的可视区域内的图片先不做加载
等到滚动到可视区域后再去加载,提高性能,,也提高了用户体验。
1.下载 vue-lazyload 插件:
npm引入:npm i vue-lazyload -S
CDN引入:[https://unpkg.com/vue-lazyload/vue-lazyload.js](https://unpkg.com/vue-lazyload/vue-lazyload.js)
2.main.js导入
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
new Vue({
el: 'body',
components: {
App
}
})
3.使用
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
四、 使用节流防抖函数(性能优化)
函数防抖(debounce)
在事件被触发n秒后再执行回