Vue项目的优化资源整理
⼀、代码优化1.使⽤keep-alive缓存不活动的组件keep-alive是⼀个抽象组件:它⾃⾝不会渲染⼀个元素,也不会出现在⽗组件链中;使⽤keep-alive包裹动态组件时,会缓存不活动的组件实例,⽽不是销毁它们。定义缓存⽩名单,keep-alive会缓存命中的组件;exclude定义缓存⿊名单,被命中的组件将不会被缓存;很多时候也可以配合路由的meta属性使⽤ 2.使⽤路由懒加载Vue是单页⾯应⽤,可能会有很多的路由引⼊ ,这样使⽤ webpcak打包后的⽂件很⼤,当进⼊⾸页时,加载的资源过多,页⾯会出现⽩屏的情况,不利于⽤户体验。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加⾼效了。这样会⼤⼤提⾼⾸屏显⽰的速度,但是可能其他的页⾯的速度就会降下来。 .图⽚懒加载对于图⽚过多的页⾯,为了加速页⾯加载速度,所以很多时候我们需要将页⾯内未出现在可视区域内的图⽚先不做加载,等到滚动到可视区域后再去加载。这样对于页⾯加载性能上会有很⼤的提升,也提⾼了⽤户体验。我们在项⽬中使⽤vue-lazyload
186.14KB
文件大小:
评论区