当前位置：首页 > VUE

vue实现懒加载

2026-01-19 08:31:34VUE

Vue 实现懒加载的方法

懒加载（Lazy Loading）是一种优化技术，用于延迟加载非关键资源，从而提升页面初始加载速度。Vue 中可以通过多种方式实现懒加载，以下是几种常见方法：

路由懒加载

通过动态导入语法实现路由级别的懒加载，Vue Router 支持这种方式。当访问路由时才会加载对应的组件。

const routes = [
  {
    path: '/about',
    component: () => import('./views/About.vue') // 懒加载组件
  }
]

组件懒加载

使用 defineAsyncComponent 或动态导入语法实现组件的懒加载。适用于非路由组件。

import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

// 或在模板中直接使用动态导入
const LazyComponent = () => import('./components/LazyComponent.vue')

图片懒加载

通过 v-lazy 指令或 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: 'path/to/loading.gif',
  error: 'path/to/error.png'
})

在模板中使用：

<img v-lazy="imageUrl" />

懒加载第三方库

对于非必要的第三方库，可以动态导入以延迟加载。

const loadLibrary = async () => {
  const library = await import('some-library')
  // 使用库
}

使用 Intersection Observer API

对于自定义懒加载逻辑，可以使用 Intersection Observer API 监听元素是否进入视口。

vue实现懒加载

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 加载资源
      observer.unobserve(entry.target)
    }
  })
})

observer.observe(document.querySelector('.lazy-element'))