Vue3优化之实现懒加载和子组件异步加载

stu_kk2023-12-10 16:02

路由懒加载

因为Vue在打包的时候将所有路由组件一次性打包到一个文件中，会导致初始加载时需要下载较大的文件。而使用路由懒加载，可以将路由组件拆分为多个小文件，只有在需要时才会下载对应的文件，从而降低初始资源负载。按需加载组件的资源，提高资源使用率、提高用户体验。.

原来路由的写法：

javascript 复制代码

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  // 其他路由...
];

const router = new VueRouter({
  routes
});

export default router;

路由懒加载的写法：

javascript 复制代码

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  },
  // 其他路由...
];

const router = new VueRouter({
  routes
});

export default router;

异步组件

因为vue在加载的时候会先加载完子组件之后，才把父组件给加载了，这样如果子组件加载时间过长，就会导致页面出现长时间的空白，使用异步组件就可以解决这个问题。

vue3提供了 defineAsyncComponent ，它可以更简洁地定义异步组件。0只需要传递一个返回 import() 函数的参数，该函数会在需要时动态加载组件。这样可以减少手动编写异步加载的代码。

代码：

html 复制代码

import { defineAsyncComponent, Suspense } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./components/AsyncComponent.vue'));

export default {
  // ...
  components: {
    AsyncComponent
  },
  // ...
  template: `
    <div>
      <Suspense>
        <AsyncComponent />
      </Suspense>
    </div>
  `
};

这样我们的页面加载就会很快了。