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

2023-12-13 10:16:17

路由懒加载

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

原来路由的写法:

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;

路由懒加载的写法:

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()?函数的参数,该函数会在需要时动态加载组件。这样可以减少手动编写异步加载的代码。

代码:

import { defineAsyncComponent, Suspense } from 'vue';

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

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

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

文章来源:https://blog.csdn.net/m0_54409739/article/details/134899449
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。