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

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

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

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

javascript 复制代码
import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}
                
              

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

javascript 复制代码
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 的帮助下实现懒加载

javascript 复制代码
import { defineAsyncComponent } from 'vue';

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

export default {
  components: {
    AsyncComponent,
  },
};
                
              

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

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

defineAsyncComponent 的基本用法

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

JavaScript 复制代码
import { defineAsyncComponent } from 'vue';

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

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

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

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

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

javascript 复制代码
import VueLazyload from 'vue3-lazyload';

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

模板中可以这样使用:

javascript 复制代码
                  HTML
                  <template>
  <img v-lazy="imageSrc" alt="Lazy loaded image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg',
    };
  },
};
</script>
                
              

相关推荐
ai小鬼头8 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's15 分钟前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络1 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
遗憾随她而去.1 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端
foxhuli2292 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端