前端优化-懒加载

1.懒加载

        ①.路由懒加载：简单来说就是需要用户访问这个路由页面的时候 才会加载，反之不会加载。

        ②.图片懒加载：同理 页面视口中出现这个图片资源的时候 才会加载。

 2. 路由懒加载

   下面这个就是没有进行懒加载的路由，这样的路由多的话 页面渲染会很满，因为你有很多个这样的路由页面需要浏览器去加载.

import Login from '@/views/Login/index.vue'

{
   path: '/login',
   component: Login
 },

下面这个就是一个进行懒加载的路由

  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

直接在路由表中的component中通过import引入路由路径，项目中对所有路由进行懒加载，那么浏览器运行项目渲染页面速度就会提升很多。

3.图片懒加载指令

    "指令"，顾名思义就是封装自定义指令，再给需要懒加载的图片添加指令 ，就可以实现懒加载。

这里 需要用到一个Vue的插件VueUse（VueUse | VueUse）

根据文档中"起步模块"，将Use引入你的项目，main.js全局配置。

用的就是"useIntersectionObserver"这个函数，它可以帮我们监听页面元素是否进入视口。

// 引入方法
import { useIntersectionObserver } from '@vueuse/core'


// 定义全局方法
app.directive('lazyImg',{
    mounted(el,binding){
        // el: 绑定那个元素
        // binding: 表达式后面的值
        console.log(el,binding.value)
        useIntersectionObserver(
            // 监听对象,布尔值-监听对象是否进入视口区域
            el,([{ isIntersecting }]) => {
                console.log(isIntersecting)
                if(isIntersecting){  //如果为true 说明进入了视口区域
                    // 进入可视区域
                    el.src = binding.value
                }
            },
          )
    }
})

<img v-lazyImg="item.picture" />

这样就对这个图片绑定了懒加载的指令，自定义指定绑定前面得加 V-

1.定义在main.js中，通过app.出方法，"lazyImg"就是我们的指令名字

2.el:绑定的元素  binding:表达式的值

3.通过我们引入的函数,来监听我们绑定的值(el),他的值(binding.value)，这里我们绑定的是img 那么他的值肯定就是图片。

4.isIntersecting是一个布尔值 true的话那么说明我们绑定的这个el的binding.value进入了视口，已经可以被用户看到了，那么这个时候 再加载我们的图片。这样就实现了这个图片的懒加载