vue 懒加载

// Vue 懒加载示例代码

// 1. 使用路由懒加载（适用于 Vue Router）
const routes = [
  {
    path: '/foo',
    // 懒加载组件，当路由被访问时才加载对应的组件
    component: () => import(/* webpackChunkName: "foo" */ './Foo.vue')
  }
]

// 2. 使用动态导入实现组件懒加载
<template>
  <div>
    <button @click="loadComponent">Load Component</button>
    <component v-if="MyComponent" :is="MyComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      MyComponent: null
    };
  },
  methods: {
    loadComponent() {
      // 动态导入组件，只有在点击按钮时才会加载
      import('./MyComponent.vue').then((module) => {
        this.MyComponent = module.default;
      });
    }
  }
};
</script>

// 3. 图片懒加载
<template>
  <img v-lazy="imageSrc" />
</template>

<script>
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload);

export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
};
</script>

解释说明：

1. 路由懒加载：通过 import() 函数实现按需加载组件。当用户导航到 /foo 路由时，才会加载 Foo.vue 组件，从而减少初始加载时间。

2. 动态导入组件：使用 import() 函数动态导入组件，只有在用户点击按钮时才会加载组件。这种方式可以优化性能，避免一次性加载所有组件。

3. 图片懒加载：使用 vue-lazyload 插件实现图片懒加载。图片只有在进入视口时才会加载，提升页面性能。