延迟加载多个默认导出的组件

Question

我有一个包含多个图标组件的组件库，我想将它们引入到我的新项目中，但我想延迟加载，但我不确定如何进行此操作。

图标组件都是从各自的组件文件中默认导出的。

我已经看到了延迟加载组件的标准方法：

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

但是，我看到的例子只是来自同一个项目......外部库似乎没有像我想做的那样显示任何内容。

我的组件库的结构如下：

.
└── My-Library/
    └── src/
        └── icons/
            └── svg/
                ├── person.ts
                ├── car.ts
                └── ...

每个图标组件的结构如下：

export default Person = () => (
    <svg>
        ...
    </svg>
)

可以导入这些吗？

Answer 1

您可以将这些组件延迟加载到您的主项目中，如下所示：

import React, { lazy, Suspense } from 'react';

// Lazy load the icon components
const LazyPersonIcon = lazy(() => import('My-Library/icons/svg/person'));
const LazyCarIcon = lazy(() => import('My-Library/icons/svg/car'));
// ...

function App() {
    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                {/* Use the lazily loaded icon components */}
                <LazyPersonIcon />
                <LazyCarIcon />
                {/* ... */}
            </Suspense>
        </div>
    );
}

export default App;