trying to use lazy/Suspense results in slow dev build and random crash
See original GitHub issueI’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.
Issue Analytics
- State:
- Created 5 years ago
- Comments:5
Top Results From Across the Web
Development build crashes when using React.lazy()
I am using react Lazy and Suspense for a component to load, but if i try to build the app using npm run...
Read more >Improve React Performance using Lazy Loading and Suspense
In this article, we will look into how to use lazy loading to optimize load time in our React apps. Tip:...
Read more >How High Online Traffic Can Crash Your Website - Queue-it
When this happens, your website will slow down, freeze, or crash. Simply put: websites crash because insufficient resources lead to system ...
Read more >Lazy loading React components - LogRocket Blog
Learn how to apply code-splitting and lazy loading to React components with React.lazy() and React.Suspense.
Read more >The React Handbook – Learn React for Beginners
This book does not try to cover everything under the sun related to React, ... Modern JavaScript developers might choose to only use...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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).
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.