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

[jayarjo]

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).

[jayarjo]

But doesn't this effectively render useless the whole lazy/Suspense shebang?

I mean every presentation of the feature made it seem like we could reuse it (at least) hundreds of times.

[miraage]

@jayarjo I don't think it's worth to load each icon separately. You'll have way too many HTTP requests for that.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

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.