vue中的懒加载

我现在所知的 Vue 中的懒加载

路由懒加载

将不同路由的组件通过箭头函数引用，而不是直接使用导入过后的组件名来引入。也就是使用 component:() => import(‘../views/home’) 替换 component: Home。让路由被访问时才开始加载对应的组件，这样可以提高项目的加载速度和效率。‘

const router = new VueRouter({
    routes: [
        {
            path: '/home',
            name: 'Home'，
            component:() => import('@/views/Home')
		}
	]
})

图片懒加载

概念

懒加载就是延时加载，也就是当需要用到的时候再去加载

懒加载的优点

• 可以减少首页首次加载的数量，减少服务器的压力
• 当网络叫差时，可以提前给这张图片添加一个低像素图片，使页面结构完整，让用户体验更好一点。

懒加载的原理

原理：当用户滚动页面时，判断元素是否处于可视区域，而可视区域外的元素资源（如图片）不会加载。\n
简单来说就是会先将 img 标签中的 src 路径设置为一张图片，当进行 v-for 遍历时就可以遍历为同一张图片，将其真正的图片地址存储在其自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

如何实现懒加载

// 第一步: 安装
npm install vue-lazyload --save

// 第二步: 全局注册(main.js 文件)
import VueLazyload from 'vue-lazyload'
// 无配置项
Vue.use(VueLazyload)

// 有配置项
import loadImg from '@/assets//load.png'
// const loadImg = require('@/assets//load.png')

// 注册
Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的宽高比
  loading: loadImg, // 图片加载状态下显示的图片
  // error: errorimage, // 图片加载失败时显示的图片
  attempt: 1, // 图片加载失败后的重试次数
})
// 第三步：img元素上使用
<img v-lazy="图片路径.png"/>

注意

上面的 loading 不能写相对路径。因为src中的文件会被 webpack 编译，assets文件夹中的图片地址，会在编译过程中重命名。\n
vue-lazyload 是在 main.js 文件中引入，不会被 webpack 进行编译，这就导致写相对路径 vue-lazyload 会无法获得正确的图片路径。