路由懒加载的工作原理
学习意义（源于2022年歌谣的某面试）
路由懒加载的定义
路由懒加载就是在使用到该页面的时候才会加载这个页面，像vue这种单页面加载的，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，
造成进入首页时，需要加载的内容过多，时间过长，会造成长时间的白屏，即使做了loading也是不利于用户体验，
而运用路由懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
路由懒加载的书写方式
function load(component) { return () => import(`views/${geyao}`) }
路由懒加载的工作原理
Webpack编译打包后，会把每个路由组件的代码分割成一一个js文件，初始化时不会加载这些js文件，只当激活路由组件才会去加载对应的js文件。 在这里先不管Webpack是怎么按路由组件分割代码，只管在Webpack编译后，怎么实现按需加载对应的路由组件js文件。
核心要点 webpack 按需加载路由组件
其他延伸（图片懒加载）
为什么使用图片懒加载？
图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，
所以，我们需要使用图片懒加载。
实现图片懒加载
HTMl实现图片懒加载
//给img标签增加loading
<img src="xxx.jpg" loading="lazy">
js实现懒加载方法
判断图片是否达到可视化区域，如果达到可视化区域的话就给img设置src属性，然后再进行绑定 window 的 scroll 事件对其进行监听，在页面初始化的时候，图片的src实际上是放在data-src属性上的，当元素处于可视范围内的时候，就把data-src赋值给src属性，完成图片加载。
<img src="./img/default.png" data-src="./img/1.jpg" /> 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') } }) }
//最后给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))
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) })
总结
估计图片懒加载问的比较少 重点路由懒加载
备注 个人建议 路由懒加载是项目重点 图片懒加载权当了解
