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 // 这个是加载图片数量
})
vue优化加载速度----懒加载图片和异步加载路由(亲测有效)_第1张图片
3.在页面中使用v-lazy代替:src添加请求的图片地址
vue优化加载速度----懒加载图片和异步加载路由(亲测有效)_第2张图片
参数详情:
vue优化加载速度----懒加载图片和异步加载路由(亲测有效)_第3张图片

  • 异步加载页面(路由)

vue优化加载速度----懒加载图片和异步加载路由(亲测有效)_第4张图片
白色框和红色框是两种写法,白色框是在整体加载,红色框是异步加载。很明显异步加载的效果更好,推荐使用。

你可能感兴趣的:(前端)