trying to use lazy/Suspense results in slow dev build and random crash #5940
Description
I'm trying to make use of Material UI, but stumbled upon severe performance issues when trying to use it in conjunction with lazy and Suspense.
I've created a repo here. However it's just fresh create-react-app + @material-ui/core and @material-ui/icons.
Material UI has each icon as dedicated component, so there's a logical obstacle when one wants to load an icon dynamically. I wrote this:
const MaterialIcon = ({ icon }) => {
const Icon = lazy(() => import(`@material-ui/icons/${icon}`))
return <Suspense fallback={<div />}><Icon /></Suspense>;
}
...and then I use this component as following:
<MaterialIcon icon="Dashboard" />
But as soon as I do this, build time for my dev refresh increases dramatically (~30secs) and sometimes it crashes with:
Compiling...
<--- Last few GCs --->
[16480:0000028D0F300210] 129930 ms: Scavenge 1346.0 (1423.8) -> 1345.3 (1424.3) MB, 5.1 / 0.0 ms (average mu = 0.218, current mu = 0.180) allocation failure
[16480:0000028D0F300210] 129938 ms: Scavenge 1346.1 (1424.3) -> 1345.5 (1424.8) MB, 4.5 / 0.0 ms (average mu = 0.218, current mu = 0.180) allocation failure
[16480:0000028D0F300210] 129944 ms: Scavenge 1346.3 (1424.8) -> 1345.6 (1425.8) MB, 3.5 / 0.0 ms (average mu = 0.218, current mu = 0.180) allocation failure
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 000000E0DCEDC6C1]
1: StubFrame [pc: 000000E0DCEDDABF]
Security context: 0x0282a8b1e681 <JSObject>
2: /* anonymous */(aka /* anonymous */) [000002335FBAA179] [...\node_modules\webpack-sources\lib\ReplaceSource.js:~148] [pc=000000E0DD83EDEE](this=0x0268016826f1
<undefined>,str=0x02335fbaa2d9 <String[86]\: var _interopRequireDefault = require("@babel/runtime/helpers/interopRequir...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF7C8E2EEE5
2: 00007FF7C8E08CD6
3: 00007FF7C8E096E0
4: 00007FF7C9270D3E
5: 00007FF7C9270C6F
6: 00007FF7C91BC594
7: 00007FF7C91B2B67
8: 00007FF7C91B10DC
9: 00007FF7C91BA0B7
10: 00007FF7C91BA136
11: 00007FF7C92DF7B7
12: 00007FF7C93B87FA
13: 000000E0DCEDC6C1
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
If build succeeds icon is included and shown as expected.