当前位置：首页 > VUE

vue的懒加载实现

2026-02-22 18:14:51VUE

Vue 懒加载的实现方法

懒加载（Lazy Loading）在 Vue 中通常用于延迟加载组件、图片或其他资源，以提升页面初始加载性能。以下是几种常见的实现方式：

路由懒加载（组件懒加载）

使用 Vue Router 时，可以通过动态导入语法实现路由级别的懒加载。这样只有在访问对应路由时才会加载相关组件。

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

图片懒加载

可以通过 v-lazy 指令或 Intersection Observer API 实现图片懒加载。推荐使用第三方库如 vue-lazyload：

安装依赖：

npm install vue-lazyload

配置插件：

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: 'placeholder-image.png',
  error: 'error-image.png'
})

使用方式：

<img v-lazy="imageUrl" alt="Lazy Image">

懒加载自定义指令

可以自定义指令实现元素的懒加载行为：

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="Custom Lazy Image">

动态导入（按需加载）

对于非路由组件，可以使用动态导入语法实现按需加载：

vue的懒加载实现

const LazyComponent = () => import('./LazyComponent.vue')

export default {
  components: {
    LazyComponent
  }
}

注意事项

Webpack 会将动态导入的组件打包成单独的 chunk 文件
可以配合魔法注释为 chunk 命名：component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
懒加载可能会略微增加后续导航的延迟，需要权衡首屏性能和交互体验

通过以上方法，可以有效实现 Vue 应用中的各种懒加载需求，优化应用性能。