前端学习案例-路由懒加载的工作原理

路由懒加载的工作原理

学习意义（源于2022年歌谣的某面试）

路由懒加载的定义

路由懒加载就是在使用到该页面的时候才会加载这个页面，像vue这种单页面加载的，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，
造成进入首页时，需要加载的内容过多，时间过长，会造成长时间的白屏，即使做了loading也是不利于用户体验，
而运用路由懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

路由懒加载的书写方式

function load(component) {
    return () => import(`views/${geyao}`)
}
1
2
3

路由懒加载的工作原理

Webpack编译打包后，会把每个路由组件的代码分割成一一个js文件，初始化时不会加载这些js文件，只当激活路由组件才会去加载对应的js文件。 在这里先不管Webpack是怎么按路由组件分割代码，只管在Webpack编译后，怎么实现按需加载对应的路由组件js文件。
核心要点 webpack 按需加载路由组件

其他延伸（图片懒加载）

为什么使用图片懒加载？
图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，
所以，我们需要使用图片懒加载。

实现图片懒加载

HTMl实现图片懒加载

//给img标签增加loading

1

js实现懒加载方法

判断图片是否达到可视化区域，如果达到可视化区域的话就给img设置src属性，然后再进行绑定 window 的 scroll 事件对其进行监听，在页面初始化的时候，图片的src实际上是放在data-src属性上的，当元素处于可视范围内的时候，就把data-src赋值给src属性，完成图片加载。

 
function lazyload() {
  //获取可视区高度
  let viewHeight = document.body.clientHeight
  let imgs = document.querySelectorAll('img[data-src]')
//遍历当前图片，判读图片是否到达可视化区域
  imgs.forEach((item, index) => {
    if (item.dataset.src === '') return
    // getBoundingClientRect()获取元素相对浏览器的值
    let rect = item.getBoundingClientRect()
    if (rect.bottom >= 0 && rect.top < viewHeight) {
      item.src = item.dataset.src
      item.removeAttribute('data-src')
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//最后给window绑定onscroll因为 scroll 事件会在很短的时间内触发很多次，严重影响页面性能，为了提高网页性能，我们需要一个节流函数来控制函数的多次触发，在一段时间内（如 200ms，时间自行设置即可）只执行一次回调

function throttle(fn, delay) {
  let timer
  let prevTime
  return function (...args) {
    const currTime = Date.now()
    const context = this
    if (!prevTime) prevTime = currTime
    clearTimeout(timer)

    if (currTime - prevTime > delay) {
      prevTime = currTime
      fn.apply(context, args)
      clearTimeout(timer)
      return
    }

    timer = setTimeout(function () {
      prevTime = Date.now()
      timer = null
      fn.apply(context, args)
    }, delay)
  }
}


window.addEventListener('scroll', throttle(lazyload, 200))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

IntersectionObserver方法实现，IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback 是可见性变化时的回调函数，option 是配置对象（该参数可选）

const imgs = document.querySelectorAll('img[data-src]')
const config = {
  rootMargin: '0px',
  threshold: 0,
}
let observer = new IntersectionObserver((entries, self) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let img = entry.target
      let src = img.dataset.src
      if (src) {
        img.src = src
        img.removeAttribute('data-src')
      }
      // 解除观察
      self.unobserve(entry.target)
    }
  })
}, config)

imgs.forEach((image) => {
  observer.observe(image)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

总结

估计图片懒加载问的比较少 重点路由懒加载
备注 个人建议 路由懒加载是项目重点 图片懒加载权当了解

最新更新时间 2022年 7月22日 歌谣