vue优化加载速度----懒加载图片和异步加载路由(亲测有效)

  • 懒加载(图片)

1.npm install vue-lazyload --save
此过程是下载懒加载包,但是可能会出现权限错误,建议使用npm install vue-lazyload --save --no-optional
2.在main.js中导入包并注册(看截图)
import VueLazyload from ‘vue-lazyload’
Vue.use(VueLazyload, {
error: ‘dist/error.png’,//这个是请求失败后显示的图片
loading: ‘dist/loading.gif’,//这个是加载的loading过渡效果
try: 2 // 这个是加载图片数量
})
在这里插入图片描述
3.在页面中使用v-lazy代替:src添加请求的图片地址
在这里插入图片描述
参数详情:
在这里插入图片描述

  • 异步加载页面(路由)

在这里插入图片描述
白色框和红色框是两种写法,白色框是在整体加载,红色框是异步加载。很明显异步加载的效果更好,推荐使用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章