vue懒加载

// Vue 懒加载示例代码

// 1. 使用动态导入 (Dynamic Import) 实现组件懒加载
const LazyComponent = () => import('./LazyComponent.vue');

new Vue({
  el: '#app',
  components: {
    LazyComponent
  },
  template: `
    <div>
      <button @click="showComponent = true">显示懒加载组件</button>
      <lazy-component v-if="showComponent"></lazy-component>
    </div>
  `,
  data() {
    return {
      showComponent: false
    };
  }
});

// 2. 使用 Vue Router 实现路由懒加载
const routes = [
  {
    path: '/lazy',
    component: () => import('./views/LazyView.vue')
  }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

// 解释说明：
// 动态导入（import()）会在需要的时候才加载组件，而不是在应用初始化时就加载所有组件。
// 这样可以减少初始加载时间，提升应用性能。特别是在大型应用中，懒加载是非常有效的优化手段。
// 在 Vue Router 中，也可以使用同样的方式来实现路由的懒加载，从而进一步优化应用的加载速度。