无法将 React.lazy 与 Material UI 图标一起使用

因为我的应用程序中的很多地方都有很多图标，所以我想对它们使用代码分割。

我创建了辅助组件来执行此操作：

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

interface LazyMuiIconProps {
  name: string;
}

export const LazyMuiIcon: FunctionComponent<LazyMuiIconProps> = ({ name }) => {
  console.log(name);
  const IconElement = React.lazy(() => import(`@material-ui/icons/${name}`));
  // const IconElement = React.lazy(() => import(`@material-ui/icons/Home`));
  return (
    <Suspense fallback={null}>
      <IconElement />
    </Suspense>
  );
};

当我使用具有固定名称的注释行时Home它可以工作并且它会延迟加载主页图标，但是一旦我将其更改为上面的行，webpack就会在编译过程中崩溃并出现低级错误：

69% 构建 15623/15657 模块 34 个活动模块 ...terial-ui/icons/AccessibleOutlined.d.ts

[30:0x33f4320] 77272 毫秒：清除 1142.0 (1422.8) -> 1141.5 (1423.3) MB，1.4 / 0.0 毫秒（平均 mu = 0.300，当前 mu = 0.342） 分配失败[30:0x33f4320] 77275 ms：Scavenge 1142.3 (1423.3) -> 1141.7 (1423.8) MB，1.5 / 0.0 毫秒（平均 mu = 0.300， 当前 mu = 0.342) 分配失败 [30:0x33f4320] 77278 ms: 清除 1142.4 (1423.8) -> 1141.9 (1424.3) MB，1.5 / 0.0 毫秒（平均 mu = 0.300，当前 mu = 0.342) 分配失败

==== JS 堆栈跟踪 ===========================================

0: ExitFrame [pc: 0x16ac4804fb5d] Security context: 0x02fea7a9d921 <JSObject>
1: add [0x2fea7a906c9](this=0x10fbf120c2e1 <Set map = 0x3f914303d81>,0x1a97709947e1 <DependenciesBlock map =

0x1c000787d3b1>) 2：新集（又名集）[0x2fea7a90391]（this = 0x056d59402691，0x33036eb7fbe1） 3：构造框架[pc：0x16ac48009e66] 4: StubFrame [pc: 0x16ac480f932c] 5: processDependencyBlocksForC... 70% 块图致命错误：接近堆限制的无效标记压缩 分配失败 - JavaScript 堆内存不足 1：0x948d20 节点::中止() [/usr/local/bin/node] 2: 0x9499bc 节点::OnFatalError(char const*, char const*) [/usr/local/bin/node] 3: 0xb1160e v8::Utils::ReportOOMFailure(v8::内部::隔离*，字符 常量*，布尔）[/usr/local/bin/node] 4：0xb11844 v8::内部::V8::FatalProcessOutOfMemory(v8::内部::隔离*，字符 const*, bool) [/usr/local/bin/node] 5: 0xf0def2 [/usr/local/bin/node] 6: 0xf0dff8 v8::internal::Heap::CheckInefficientMarkCompact(unsigned long, double) [/usr/local/bin/node] 7: 0xf1a718 v8::内部::堆::执行垃圾收集(v8::内部::垃圾收集器, v8::GCCallbackFlags) [/usr/local/bin/node] 8: 0xf1b22b v8::内部::堆::收集垃圾(v8::内部::分配空间， v8::内部::GarbageCollectionReason、v8::GCCallbackFlags) [/usr/local/bin/node] 9: 0xf1df61 v8::内部::堆::AllocateRawWithRetryOrFail(int, v8::内部::分配空间、v8::内部::分配对齐） [/usr/local/bin/节点] 10：0xee7​​e96 v8::内部::工厂::AllocateRawArray(int, v8::内部::PretenureFlag) [/usr/local/bin/node] 11: 0xee885a v8::internal::Factory::NewFixedArrayWithFiller(v8::internal::Heap::RootListIndex, int，v8::内部::对象*，v8::内部::PretenureFlag） [/usr/local/bin/节点] 12：0xee8900 v8::内部::句柄 v8::internal::Factory::NewFixedArrayWithMap(v8::internal::Heap::RootListIndex, int，v8::internal::PretenureFlag) [/usr/local/bin/node] 13: 0x108e547 v8::内部::OrderedHashTable::分配（v8::内部::隔离*，int，v8::内部::PretenureFlag） [/usr/local/bin/节点] 14: 0x1091ab1 v8::内部::OrderedHashTable::Rehash(v8::内部::隔离*, v8::内部::句柄，int） [/usr/local/bin/node] 15: 0x109202b v8::内部::OrderedHashTable::EnsureGrowable(v8::内部::隔离*, v8::内部::句柄） [/usr/local/bin/node] 16: 0x117ee2c v8::internal::Runtime_SetGrow(int, v8::internal::Object**、v8::internal::Isolate*) [/usr/local/bin/node] 17：0x16ac4804fb5d 中止（核心转储）

我的 Babel 插件：

plugins: [
                // plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
                "@babel/plugin-syntax-dynamic-import",
                ['@babel/plugin-proposal-decorators', { legacy: true }],
                ['@babel/plugin-proposal-class-properties', { loose: true }],
                'react-hot-loader/babel',

据我所知，它试图加载所有图标，而不仅仅是一个图标（我将使用的实例减少到一个，以便更容易找到解决方案），然后它崩溃了。

UPDATE

如果我尝试使用，也会发生完全相同的情况react-loadable...

return Loadable({
    loader: () => import(`@material-ui/icons/${props.name}`),
    loading: () => <span>icon</span>
  });

如果您使用 Webpack，问题是如果您想要动态加载文件（在本例中为图标），webpack 默认情况下会为该模块生成一个块。如果您使用的是 Webpack 4 或更高版本，则可以使用webpackMode: eager来解决这个问题。因此，在这种情况下，导入将如下所示：

const IconElement = React.lazy(() => import(/* webpackMode: "eager" */`@material-ui/icons/${name}`));

这基本上会强制 Webpack 将块包含到你的包中（减少 http 请求的数量） - 我认为这使得使用 Lazy / Suspense 的全部意义变得无用，但这Github问题 https://github.com/facebook/create-react-app/issues/5940与您的问题类似，表明不值得单独加载每个图标，即您应该导入@material-ui/icons打包并使用您需要的图标。

更新（因为有问题的更新参考react-loader ) :

使用时react-loader您还需要指定文件的扩展名。我曾经遇到过这个问题，并通过导入指定文件的扩展名来解决它。在这种情况下 ：

return Loadable({
    loader: () => import(`@material-ui/icons/${props.name}.ts`),
    loading: () => <span>icon</span>
  });

但我不确定它是否仍然有效，正如我在有关 Webpack 和延迟加载的回答中已经建议的那样。