当前位置：首页 > VUE

vue实现页面分段加载

2026-01-22 05:40:27VUE

Vue 实现页面分段加载的方法

分段加载（Lazy Loading）是优化页面性能的常见手段，尤其在 Vue 中可以通过多种方式实现。以下是几种常见方法：

使用动态导入（Dynamic Import）实现组件懒加载

通过 Vue Router 的 import() 语法实现路由级组件的按需加载：

const routes = [
  {
    path: '/heavy-component',
    component: () => import('./HeavyComponent.vue') // 动态导入
  }
]

结合 Suspense 组件处理加载状态：

<template>
  <Suspense>
    <template #default>
      <HeavyComponent />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

基于 Intersection Observer 的视图内加载

监听元素是否进入视口，触发内容加载：

// 指令实现
Vue.directive('lazy-load', {
  inserted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        binding.value().then(component => {
          new Vue(component).$mount(el)
        })
        observer.unobserve(el)
      }
    })
    observer.observe(el)
  }
})

模板中使用：

<div v-lazy-load="() => import('./LazyComponent.vue')"></div>

数据分块加载技术

对于长列表数据，可采用分页或虚拟滚动方案：

// 示例：分页加载
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      allData: [],
      visibleData: []
    }
  },
  methods: {
    loadMore() {
      const start = (this.currentPage - 1) * this.pageSize
      this.visibleData = [
        ...this.visibleData,
        ...this.allData.slice(start, start + this.pageSize)
      ]
      this.currentPage++
    }
  }
}

资源文件的按需加载

通过 Webpack 的魔法注释实现更细粒度的控制：

const HeavyModule = () => import(
  /* webpackChunkName: "heavy-module" */
  /* webpackPrefetch: true */
  './HeavyModule.js'
)

骨架屏（Skeleton Screen）优化体验

在内容加载前显示占位结构：

vue实现页面分段加载

<template>
  <div v-if="loading" class="skeleton">
    <div class="skeleton-header"></div>
    <div class="skeleton-content"></div>
  </div>
  <RealContent v-else />
</template>