Reactjs 如何使用动态导入获得工作React.lazy/suspence？

我知道我可以延迟导入和渲染悬念之类的东西，但在这样的场景中会发生什么：

我有一个从该文件夹导出所有文件的索引文件：

从“/Reactjs”导出{defaultasreactjs}；
从“./Bootstrap”导出{default as Bootstrap}；
从“/Cypress”导出{默认为Cypress}；
从“/Firebase”导出{defaultasfirebase}；
等等

在我导入的路由器文件中，如下所示：

import*作为“/Components”中的组件；

然后，我有一个要渲染的路由列表：

const路由=[
"Reactjs",，
“反应路由器”，
“Redux”，
“材料”，
“Socketio”，
等等
];

这是我在每条路线上重复使用的代码：

{routes.map（（route）=>(
))}

在这个场景中，所有文件都是捆绑的，我希望使用React.lazy避免这种情况

我尝试过这样做，但是当您导航到这些路由中的任何一个时，路由没有绑定，没有抛出错误，只是没有内容，组件永远不会呈现

我知道只需将lazyly导入路由器组件中的每个组件并手动添加所有路由即可，但该项目发展迅速，正在寻找通用解决方案，有什么想法吗？

解决方案 这里的要点是使用

渲染

方法而不是

组件

。正如utils函数所建议的那样，它的工作方式是

最终代码：

import React，{suspend}来自'React'；
从“react router dom”导入{Route，Switch}；
从“./Components”导入*作为组件；
从“/前端”导入前端；
常数路由=[
"Reactjs",，
“反应路由器”，
“Redux”，
“材料”，
“Socketio”，
“HTML5”，
“CSS3”，
"胜利",，
“火力基地”，
"柏树",，
“开玩笑”，
“酶”，
“StyledComponents”，
"Sass",，
“Javascript”，
];
常量路径='/developer/frontend'；
常量renderLazyComponents=（WrappedComponent，道具）=>(
;
);
const FrontendRoutes=（道具）=>{
返回(
{routes.map（（route）=>(
renderLazyComponents（组件[路线]，道具）}
准确的
{…道具}
/>
))}
);
};
导出默认前端路由；

前邮政编码：

496.93 KB（-878 B）build/static/js/2.4e310625.chunk.js
28.2 KB（-7.41 KB）build/static/js/main.fa528c14.chunk.js
725 B build/static/js/runtime-main.3ce8a40d.js
574 B build/static/css/main.13004e90.chunk.css

下一个邮政编码：

497.9kb（+986b）build/static/js/2.376eba4d.chunk.js
34.98 KB（+6.78 KB）build/static/js/main.94a280ad.chunk.js
2.56 KB build/static/js/3.b1f8eb5c.chunk.js
1.26 KB（+567 B）build/static/js/runtime-main.0ae647e3.js
574 B build/static/css/main.13004e90.chunk.css
212 B build/static/js/16.1903fd99.chunk.js
208 B build/static/js/11.adc04e6c.chunk.js
206 B build/static/js/12.c2f29dcb.chunk.js
204 B build/static/js/15.654cac3a.chunk.js
204 B build/static/js/17.6a7c5409.chunk.js
204 B build/static/js/4.e5aeca49.chunk.js
204 B build/static/js/8.e22f9199.chunk.js
203 B build/static/js/13.2bc7ba5b.chunk.js
203 B build/static/js/6.4d3d0771.chunk.js
203 B build/static/js/9.59059160.chunk.js
202 B build/static/js/7.39b3929b.chunk.js
201 B build/static/js/14.d7fd54d7.chunk.js
201 B build/static/js/5.0c63c3bb.chunk.js
200 B build/static/js/10.5c3037d5.chunk.js

简单地说，您可以通过以下代码片段进行延迟加载：

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

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

现在在

ComponentUtils.js

文件中，编写以下通用函数：

import React, { Suspense } from 'react'
import LazyLoad from 'react-lazyload'
import BlockUi from 'react-block-ui'

export default class ComponentUtils {
    static getSuspenseFulLazyComponent(component, shouldLazyLoad, lazyLoadOffset) {
        return (
            <Suspense
                fallback={
                    <BlockUi tag="div" blocking={true}>
                        {' '}
                    </BlockUi>
                }
            >
                {!shouldLazyLoad ? component : <LazyLoad offset={100}>{component}</LazyLoad>}
            </Suspense>
        )
    }
}

import React，{suspend}来自“React”
从“react LazyLoad”导入LazyLoad
从“反应块ui”导入块ui
导出默认类ComponentUtils{
静态GetSuspendiveLazyComponent（组件、应加载、lazyLoadOffset）{
返回(
{！shouldLazyLoad？组件：{component}
)
}
}

---

我希望这个解决方案能帮助你找到自己的路

Thx@sidverma，我现在试试你的方法。在您的示例中，您使用的是命名导入

OtherComponent

它是否可以与dinamyc一起使用？我会试着把它拿回来。

OtherComponent

只是一个例子，你可以把你想要加载的原始组件放回去（是的）。如果您正在使用nextjs，那么可能会这样尝试：从“Next/dynamic”导入动态

constothercomponent=dynamic（（）=>import（“../../{filename}”），{ssr:false}）抱歉，如果不导入每个组件，然后再次将每个组件传递给GetSuspendousLazyComponentin
App.js
我就无法理解这里的要点，您必须像这样导入所有主要组件
const OtherComponent=React.lazy（（）=>import（'./OtherComponent'）
。因此，要动态加载这些组件，您可以编写一个
util.js
函数。在该参数化函数中，您可以将组件名称和其他内容传递给lazy load或not等。。。这就是Util函数对beThx sidverma的意义。你给了我主要的想法，使用
render
方法，而不是
component
，我将用最终的代码更新这个问题，Lazy的技术在哪一点真正应用？此外，由于文件的数量和大小都增加了，这种性能的好处是什么？
import React, { Suspense } from 'react'
import LazyLoad from 'react-lazyload'
import BlockUi from 'react-block-ui'

export default class ComponentUtils {
    static getSuspenseFulLazyComponent(component, shouldLazyLoad, lazyLoadOffset) {
        return (
            <Suspense
                fallback={
                    <BlockUi tag="div" blocking={true}>
                        {' '}
                    </BlockUi>
                }
            >
                {!shouldLazyLoad ? component : <LazyLoad offset={100}>{component}</LazyLoad>}
            </Suspense>
        )
    }
}