因为我的应用程序的很多地方都有很多图标，所以我想对它们使用代码拆分。
我创建了辅助组件来做到这一点：
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 module 34 个活动 ...terial-ui/icons/AccessibleOutlined.d.ts <--- 最后几次 GC --->
[30:0x33f4320] 77272 ms: Scavenge 1142.0 (1422.8) -> 1141.5 (1423.3) MB，1.4 / 0.0 ms（平均 mu = 0.300，当前 mu = 0.342:0.342:0 mscavenge 1142.0.0.0.340:4230.0.0.340:0.0.340.0.13230.13230.1230.1230.0.0.0.0.0.0 ms）分配失败 [1141.5 (1423.3) MB] ) -> 1141.7 (1423.8) MB, 1.5 / 0.0 ms (平均 mu = 0.300, 当前 mu = 0.342) 分配失败 [30:0x33f4320] 77278 ms: Scavenge 1142.4 (1423.10.14) ->.1423.10.10.10 ms（平均 mu = 0.300，当前 mu = 0.342）分配失败
<--- JS 堆栈跟踪 --->
==== JS 堆栈跟踪 ==========================================
0: ExitFrame [pc: 0x16ac4804fb5d] Security context: 0x02fea7a9d921 <JSObject> 1: add [0x2fea7a906c9](this=0x10fbf120c2e1 <Set map = 0x3f914303d81>,0x1a97709947e1 <DependenciesBlock map =0x1c000787d3b1>）2：新的一组（又名集）[0x2fea7a90391]（这= 0x056d59402691，0x33036eb7fbe1）3：ConstructFrame [PC：0x16ac48009e66] 4：StubFrame [PC：0x16ac480f932c] 5：processDependenciesBlocksForC ... 70％的块状graphFATAL ERROR：无效接近堆限制的标记压缩分配失败 - JavaScript 堆内存不足 1: 0x948d20 node::Abort() [/usr/local/bin/node] 2: 0x9499bc node::OnFatalError(char const*, char const*) [ /usr/local/bin/node] 3: 0xb1160e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node] 4: 0xb11844 v8: :internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node] 5: 0xf0def2 [/usr/local/bin/node] 6: 0xf0dff8 v8::内部::堆::CheckIn EffectiveMarkCompact(unsigned long, double) [/usr/local/bin/node] 7: 0xf1a718 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/ bin/node] 8: 0xf1b22b v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node] 9 : 0xf1df61 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node] 10: 0xee7e96 v8::internal:: Factory::AllocateRawArray(int, v8::internal::PretenureFlag) [/usr/local/bin/node] 11: 0xee885a v8::internal::Factory::NewFixedArrayWithFiller(v8::internal::Heap::RootListIndex, int, v8::internal::Object*, v8::internal::PretenureFlag) [/usr/local/bin/node] 12: 0xee8900 v8::internal::处理 v8::internal::Factory::NewFixedArrayWithMap(v8::internal::Heap::RootListIndex, int, v8::internal::PretenureFlag) [/usr/local/bin/node] 13: 0x108e547 v8::internal ::OrderedHashTable::Allocate(v8::internal::Isolate*, int, v8::internal::PretenureFlag) [/usr/local/bin/node] 14: 0x1091ab1 v8::internal::OrderedHashTable::Rehash( v8::internal::Isolate*, v8::internal::Handle, int) [/usr/local/bin/node] 15: 0x109202b v8::internal::OrderedHashTable::EnsureGrowable(v8::internal::Isolate *, v8::internal::Handle) [/usr/local/bin/node] 16: 0x117ee2c v8::internal::Runtime_SetGrow(int, v8::internal::Object**, v8::internal::Isolate *) [/usr/local/bin/node] 17: 0x16ac4804fb5d 中止（核心转储）PretenureFlag) [/usr/local/bin/node] 13: 0x108e547 v8::internal::OrderedHashTable::Allocate(v8::internal::Isolate*, int, v8::internal::PretenureFlag) [/usr/local /bin/node] 14: 0x1091ab1 v8::internal::OrderedHashTable::Rehash(v8::internal::Isolate*, v8::internal::Handle, int) [/usr/local/bin/node] 15: 0x109202b v8::internal::OrderedHashTable::EnsureGrowable(v8::internal::Isolate*, v8::internal::Handle) [/usr/local/bin/node] 16: 0x117ee2c v8::internal::Runtime_SetGrow( int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node] 17: 0x16ac4804fb5d 中止（核心转储）PretenureFlag) [/usr/local/bin/node] 13: 0x108e547 v8::internal::OrderedHashTable::Allocate(v8::internal::Isolate*, int, v8::internal::PretenureFlag) [/usr/local /bin/node] 14: 0x1091ab1 v8::internal::OrderedHashTable::Rehash(v8::internal::Isolate*, v8::internal::Handle, int) [/usr/local/bin/node] 15: 0x109202b v8::internal::OrderedHashTable::EnsureGrowable(v8::internal::Isolate*, v8::internal::Handle) [/usr/local/bin/node] 16: 0x117ee2c v8::internal::Runtime_SetGrow( int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node] 17: 0x16ac4804fb5d 中止（核心转储）int) [/usr/local/bin/node] 15: 0x109202b v8::internal::OrderedHashTable::EnsureGrowable(v8::internal::Isolate*, v8::internal::Handle) [/usr/local/bin /node] 16: 0x117ee2c v8::internal::Runtime_SetGrow(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node] 17: 0x16ac4804fb5d 中止（核心转储）int) [/usr/local/bin/node] 15: 0x109202b v8::internal::OrderedHashTable::EnsureGrowable(v8::internal::Isolate*, v8::internal::Handle) [/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',
从我看到的情况来看，它正在尝试加载所有图标，而不仅仅是一个（我将使用的实例减少到一个以更轻松地找到解决方案），然后它崩溃了。
更新
如果我尝试使用react-loadable...
return Loadable({
loader: () => import(`@material-ui/icons/${props.name}`),
loading: () => <span>icon</span>
});