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>
                
              

---