vue实现懒加载
vue实现懒加载的方法
懒加载（Lazy Loading）是一种优化技术，延迟加载非关键资源，提升页面初始加载速度。Vue中可以通过以下方式实现懒加载。
路由懒加载
使用动态导入语法import()实现路由组件懒加载，Webpack会自动将动态导入的模块拆分为单独的文件。
const routes = [
{
path: '/home',
component: () => import('./views/Home.vue')
},
{
path: '/about',
component: () => import('./views/About.vue')
}
]组件懒加载
通过defineAsyncComponent定义异步组件，结合动态导入实现懒加载。
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)图片懒加载
使用Intersection Observer API或第三方库如vue-lazyload实现图片懒加载。
安装vue-lazyload：
npm install vue-lazyload配置和使用：
import VueLazyload from 'vue-lazyload'
const app = createApp(App)
app.use(VueLazyload, {
preLoad: 1.3,
loading: 'loading-image.png',
error: 'error-image.png',
attempt: 1
})模板中使用v-lazy指令：
<img v-lazy="imageUrl" />懒加载指令
自定义指令实现元素进入视口时加载内容。
const lazyLoadDirective = {
mounted(el, binding) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
binding.value()
observer.unobserve(el)
}
})
})
observer.observe(el)
}
}
app.directive('lazy', lazyLoadDirective)使用自定义指令：
<div v-lazy="loadData">加载数据...</div>懒加载库推荐
@vueuse/core：提供useIntersectionObserver等组合式APIvue-lazy-hydration：针对SSR的组件懒加载方案lozad.js：轻量级Intersection Observer库
这些方法可根据具体场景选择，路由和组件懒加载适合代码分割，图片懒加载优化媒体资源加载性能。
