自己实现vue懒加载
Vue 懒加载的实现方式
懒加载（Lazy Loading）是一种优化技术，用于延迟加载非关键资源，提升页面初始加载速度。在 Vue 中，懒加载通常用于路由组件和图片。
路由懒加载
通过动态 import() 语法结合 Vue Router 实现路由组件的懒加载。Webpack 会将动态导入的组件打包成单独的 chunk，仅在访问对应路由时加载。
const routes = [
{
path: '/home',
component: () => import('./views/Home.vue')
},
{
path: '/about',
component: () => import('./views/About.vue')
}
]图片懒加载
自定义指令实现图片懒加载，监听图片是否进入视口，再动态设置 src 属性。
// main.js 或单独指令文件
Vue.directive('lazy', {
inserted: (el, binding) => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
el.src = binding.value
observer.unobserve(el)
}
})
})
observer.observe(el)
}
})使用方式：
<img v-lazy="imageUrl" alt="Lazy Image">组件懒加载
使用 defineAsyncComponent 实现异步组件加载，适合非路由场景。
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() =>
import('./components/HeavyComponent.vue')
)注册后即可像普通组件一样使用：
<template>
<AsyncComponent />
</template>注意事项
- 动态导入语法需要构建工具支持（如 Webpack 或 Vite）。
- 图片懒加载需考虑兼容性，可添加 polyfill 支持旧浏览器。
- 异步组件可搭配 loading 和 error 状态处理提升用户体验。
通过以上方法可有效减少初始加载时间，尤其适合大型单页应用或媒体资源较多的场景。
