vue懒加载实现
vue懒加载的实现方法
懒加载（Lazy Loading）是优化前端性能的重要手段，Vue中可通过多种方式实现组件或资源的按需加载。
路由懒加载
使用动态导入语法实现路由级别的懒加载，适用于Vue Router：
const routes = [
{
path: '/about',
component: () => import('./views/About.vue') // 动态导入组件
}
]Webpack会将动态导入的组件自动分割为单独的chunk文件，在访问对应路由时才加载。
组件懒加载
通过defineAsyncComponent实现组件级别的懒加载：
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
export default {
components: {
AsyncComponent
}
}图片懒加载
使用v-lazy指令或Intersection Observer API：
<img v-lazy="imageUrl" alt="lazy image">需安装vue-lazyload插件：
import VueLazyload from 'vue-lazyload'
app.use(VueLazyload, {
preLoad: 1.3,
loading: 'loading.gif',
error: 'error.png'
})指令实现原理
自定义懒加载指令的核心逻辑：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target
img.src = img.dataset.src
observer.unobserve(img)
}
})
})
app.directive('lazy', {
mounted(el) {
observer.observe(el)
el.dataset.src = el.src
el.src = ''
}
})Webpack魔法注释
控制chunk命名和加载行为：
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackPrefetch: true */ './Bar.vue')webpackPrefetch会在浏览器空闲时预加载资源，webpackPreload会与父chunk并行加载。
性能优化建议
结合Suspense组件处理加载状态：
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>对于图片较多的场景，建议设置合理的threshold和loading占位图。现代浏览器已原生支持loading="lazy"属性，可作为备用方案。
