Vue 异步组件 和 路由懒加载

Vue 异步组件 和 路由懒加载

概要

提示：这两个vue的特性都可以为我们优化项目前端的性能

一、Vue异步组件

定义： Vue异步组件允许将组件定义为一个返回Promise对象的工厂函数。当组件需要渲染时，Vue会等待这个Promise解析完成，然后再渲染组件。这种方式非常适合用来拆分大型应用，将不常用的组件或者需要按需加载的组件进行异步加载，以优化应用的初始加载性能。

使用方法： 通过defineAsyncComponent方法来定义一个异步组件，也可以使用工厂函数来返回一个Promise对象。
示例1：使用defineAsyncComponent方法

import { defineAsyncComponent } from 'vue';  
  
const AsyncComponent = defineAsyncComponent(() =>  
  import('./MyComponent.vue')  
);  
export default {  
  components: {  
    AsyncComponent  
  }  
}

示例2：使用更简洁的工厂函数语法

const AsyncComponent = () => import('./MyComponent.vue');  
  
export default {  
  components: {  
    AsyncComponent  
  }  
}

二、路由懒加载

定义： 路由懒加载允许将路由对应的组件进行异步加载，从而优化应用的初始加载性能。当路由被访问时，Vue Router会动态地加载对应的组件，而不是在应用启动时一次性加载所有组件。

使用方法： 在Vue Router中，通过在路由配置中使用import()语法来实现。

示例1：使用import()语法进行懒加载

const routes = [  
  {  
    path: '/home',  
    name: 'Home',  
    component: () => import('./views/Home.vue')  
  },  
  {  
    path: '/about',  
    name: 'About',  
    component: () => import('./views/About.vue')  
  }  
];  
  
const router = new VueRouter({  
  routes  
});

示例2：结合Webpack的魔法注释进行代码分割，指定每个异步组件加载后生成的chunk的名称。这有助于我们更好地管理和优化代码分割。

const routes = [  
  {  
    path: '/home',  
    name: 'Home',  
    component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')  
  },  
  {  
    path: '/about',  
    name: 'About',  
    component: () => import(/* webpackChunkName: "about" */ './views/About.vue')  
  }  
];