前言:
前端项目中难免会遇到大量的切图展示,如果单张图片过大,在加载的过程中可能会导致浏览器瀑布流渲染时间过长,延长用户等待时间,这种情况可以使用CDN分发,当然也可以使用图片懒加载,接下来主要介绍如何实现大图懒加载、以及常见的组件懒加载、路由懒加载
1.图片懒加载
本人使用VueLazyLoad插件,首先安装插件
npm install VueLazyLoad --save
在main.js中引入并使用
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
//图片大小比例
preload: 1.5,
//加载次数
attempt: 3,
//加载过程中的默认等待图片
loading: require('../src/assets/images/mr.png')
})
使用
注意:图片的路径地址要使用require方式引入,因为使用webpack进行打包之后目录会发生变化,采用相对路径的写法就会找不到图片。只需要将src替换成为v-lazy即可
<img v-lazy="item.path" />
2.路由懒加载
component: () => import('../views/department/questionNaire.vue'),
3.组件懒加载
components: {
mHeader: () => import("@/components/mheader"),
tabbar: () => import("@/components/tabbar"),
Scroll: () => import("@/components/scroll"),
},