react.lazy react.suspense实现动态引入组件

de_la_prada

于 2020-10-09 19:48:46 发布

阅读量1.3k

点赞数 2

分类专栏：前端文章标签： react javascript

本文链接：https://blog.youkuaiyun.com/weixin_41973410/article/details/108984348

版权

本文介绍了如何使用React.lazy和Suspense实现动态引入组件，从而实现Code Splitting，提升应用性能。通过React.lazy动态调用import()加载组件，并在Suspense组件中设置fallback展示加载状态。同时，文章提到了webpack的chunkFilename和publicPath配置，确保动态加载的chunk文件能够正确加载。此外，还简要提及了路由定义在动态加载中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

React.lazy和Suspense的功能主要是利用了webpack对es6的import动态载入组件，可以自动实现Code Splitting。Code Spliting，即代码分割，能够“懒加载”当前用户所需要的内容，显著提高应用的性能。尽管并没有减少应用整体的代码体积，但可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。

React.lazy

React.lazy函数能让你像渲染常规组件一样处理动态引入（的组件）。
使用之前：

import OtherComponent from './OtherComponent';

使用之后：

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

此代码将会在组件首次渲染时，自动导入包含OtherComponent组件的包。

React.lazy接受一个函数，这个函数需要动态调用import()。它必须返回一个Promise，该Promise需要resolve一个default export的React组件。

然后应在Suspense组件中渲染lazy组件，如此使得我们可以使用在等待加载lazy组件时做优雅降级（如loading指示器等）。

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

最低0.47元/天解锁文章