“组件、路由懒加载”，在 Vue3 和 React 中分别如何实现？ (copy)

Vue3 和 React 组件懒加载实现方式

React 中组件懒加载的实现方式

React 提供了 React.lazy 和 Suspense 两个 API 来实现组件的懒加载。React.lazy 用于动态导入组件，而 Suspense 则用于指定加载过程中的占位内容。例如，可以通过以下代码实现懒加载：

import React, { Suspense } from 'react';const OtherComponent = React.lazy(() => import('./OtherComponent'));function App() {return (<div><Suspense fallback={<div>Loading...</div>}><OtherComponent /></Suspense></div>);
}

此外，在路由级别上也可以使用懒加载。通过结合 React.lazy 和 Suspense，可以按需加载不同的路由模块4：

import React, { Suspense, lazy } from 'react';
import { Route, Switch } from 'react-router-dom';const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));function App() {return (<Suspense fallback={<div>Loading...</div>}><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /></Switch></Suspense>);
}

Vue3 中组件懒加载的实现方式

在 Vue3 中，可以通过动态导入语法来实现组件的懒加载。例如，可以在 defineAsyncComponent 的帮助下实现懒加载

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

Vue3 中 defineAsyncComponent 的作用及懒加载实现

在 Vue3 中，defineAsyncComponent 是用于定义异步组件的 API，它允许开发者通过动态导入的方式实现组件的懒加载。这种方式能够显著减少首屏加载时的资源消耗，提升页面性能。

defineAsyncComponent 的基本用法

最简单的用法是直接传入一个返回 Promise 的函数（通常为 import()），该函数负责加载组件：

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

此外，还可以传入一个包含更多选项的对象，以增强功能3：

const AsyncPopup = defineAsyncComponent({loader: () => import('./ArticleList.vue'), // 异步加载组件的函数loadingComponent: LoadingComponent, // 加载中显示的组件errorComponent: ErrorComponent, // 加载失败时显示的组件delay: 200, // 延迟显示加载组件的时间（默认 200ms）timeout: 3000 // 超过此时间未加载成功则显示错误组件（默认 Infinity）
});

通过上述配置，可以更灵活地控制组件加载过程中的用户体验。

同时，Vue3 还支持图片懒加载功能，借助插件如 vue3-lazyload 可以更方便地实现懒加载效果2。以下是使用 vue3-lazyload 插件的一个示例：

import VueLazyload from 'vue3-lazyload';app.use(VueLazyload, {loading: '/path/to/loading-image.png',error: '/path/to/error-image.png',
});

模板中可以这样使用：

                  HTML<template><img v-lazy="imageSrc" alt="Lazy loaded image" />
</template><script>
export default {data() {return {imageSrc: 'https://example.com/image.jpg',};},
};
</script>

---