Vue项目的优化资源整理
需积分: 0 197 浏览量
2022-12-20
18:10:59
上传
评论
收藏 186KB PDF 举报
Vue项⽬的优化
⼀、代码优化⼀、代码优化
1. 使⽤keep-alive缓存不活动的组件
keep-alive是⼀个抽象组件：它⾃⾝不会渲染⼀个元素，也不会出现在⽗组件链中；使⽤keep-alive包裹动态组件时，会缓存不活动的
组件实例，⽽不是销毁它们。
在动态组件中的应⽤
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
<component :is="currentComponent"></component>
</keep-alive>
在vue-router中的应⽤
<keep-alive :include="whiteList" :exclude="blackList">
<router-view></router-view>
</keep-alive>
定义缓存⽩名单，keep-alive会缓存命中的组件；exclude定义缓存⿊名单，被命中的组件将不会被缓存；
很多时候也可以配合路由的meta属性使⽤
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被缓存的组件
}
]
<keep-alive>
<router-view v-if="this.$route.meat.keepAlive"></router-view>
<!--这⾥是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这⾥是不会被缓存的组件-->
2. 使⽤路由懒加载使⽤路由懒加载
Vue 是单页⾯应⽤，可能会有很多的路由引⼊ ，这样使⽤ webpcak 打包后的⽂件很⼤，当进⼊⾸页时，加载的资源过多，页⾯会出
现⽩屏的情况，不利于⽤户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组
件，这样就更加⾼效了。这样会⼤⼤提⾼⾸屏显⽰的速度，但是可能其他的页⾯的速度就会降下来。
路由懒加载：
资源评论
怀里的熊
- 粉丝: 4
- 资源: 5
