trying to use lazy/Suspense results in slow dev build and random crash

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.

[miraage]

I clearly recall webpack being slow if you overuse code splitting. Like 8-10+ chunks made webpack really slow. I wouldn’t recommend to extract each icon into a separate chunk. Use chunks for vendors, runtime, page, reusable modules (modules, not components).

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.