vue 实现懒加载

在Vue中实现组件的懒加载，可以使用Vue的异步组件功能，结合Webpack的代码分割特性。以下是一个使用Vue的异步组件实现懒加载的例子：

首先，确保你的项目配置了Webpack，并支持代码分割。

然后，在你的Vue组件中，你可以这样使用异步组件来实现懒加载：

// 在Vue单文件组件中
export default {
  components: {
    // 异步加载的组件将会定义在这里
    'my-async-component': () => import('./path/to/MyAsyncComponent.vue')
  }
}

当你的组件首次渲染时，my-async-component将不会被加载，只有当它首次被访问时，Webpack会异步加载这个组件，这就实现了组件的懒加载。

这是一个完整的例子：

<template>
  <div>
    <button @click="showComponent = !showComponent">
      Toggle Async Component
    </button>
    <hr>
    <my-async-component v-if="showComponent"></my-async-component>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showComponent: false
    };
  },
  components: {
    'my-async-component': () => import('./MyAsyncComponent.vue')
  }
};
</script>

在这个例子中，点击按钮会切换my-async-component的显示与隐藏，当组件首次显示时，它会被懒加载。