1.路由懒加载

方法一：

import { createRouter, createWebHistory } from 'vue-router';const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');
const Contact = () => import('./components/Contact.vue');const routes = [{ path: '/', component: Home },{ path: '/about', component: About },{ path: '/contact', component: Contact }
];const router = createRouter({history: createWebHistory(),routes
});export default router;

在上述代码中，我们使用动态导入语法 import() 来异步加载路由组件。当路由被触发时，相应的组件将被动态加载并渲染。

方法二：

import { createRouter, createWebHistory } from 'vue-router';const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');
const Contact = () => import('./components/Contact.vue');const routes = [{ path: '/', component: () => import('./components/Home.vue') },{ path: '/about', component: () => import('./components/About.vue') },{ path: '/contact', component: () => import('./components/Contact.vue') }
];const router = createRouter({history: createWebHistory(),routes
});export default router;

在上述代码中，我们将组件的 component 属性设为一个函数，当路由被触发时，对应的组件才会被动态加载。

2.图片懒加载

在 Vue 3 中，可以使用 v-lazy 指令和 Intersection Observer 来实现图片的懒加载。下面是一个基本的图片懒加载的示例：

1. 安装 vue-lazyload 插件：

在你的项目中，首先需要安装并引入 vue-lazyload 插件。你可以使用 npm 或者 yarn 来安装：

npm install vue-lazyload

或

yarn add vue-lazyload

1. 在项目入口文件（通常是 main.js）引入并使用 vue-lazyload 插件：

  import { createApp } from 'vue';import VueLazyload from 'vue-lazyload';import App from './App.vue';const app = createApp(App);app.use(VueLazyload);app.mount('#app');

1. 在模板中使用 v-lazy 指令：

<template><div><img v-lazy="'/path/to/image.jpg'" alt="Lazy-loaded Image"></div>
</template>

在上述示例中，v-lazy 指令用于指定需要懒加载的图片路径。当图片进入视口（viewport）时，vue-lazyload 会自动加载该图片，提升页面加载速度。

3.组件懒加载