search

scality / metalk8s

An opinionated Kubernetes distribution with a focus on long-term on-prem deployments
Apache License 2.0
361 stars 45 forks source link

UI : Split webpack bundle into smaller chunks by lazy loading routes components #3124

Open JBWatenbergScality opened 3 years ago

JBWatenbergScality commented 3 years ago

Component:

UI

Why this is needed:

The JS bundles is becoming bigger and bigger impacting UI performance for our users but also minification steps in our build chain that requires more memory to manage the bundles.

What should be done:

We should split the bundle in smaller chunks.

Implementation proposal (strongly recommended):

Use React.lazy (https://reactjs.org/docs/code-splitting.html#reactlazy) to lazy-load routes components.

Test plan:

Cypress integration and e2e tests should still pass. Also run npm run build and ensure new chunks of smaller size appeared. Current chunks :

692.46 KB build/static/js/2.2aaac6c7.chunk.js 54.55 KB build/static/js/main.c7fa4455.chunk.js 12.88 KB build/static/css/2.aeba31b1.chunk.css 787 B build/static/js/runtime-main.3342e3a9.js 441 B build/static/css/main.9707ba81.chunk.css

gdemonet commented 3 years ago

<1MB is affecting performance for our users? I'd be surprised. Didn't know it impacted minification though.

JBWatenbergScality commented 3 years ago

I basically just went into this issue when building using doit : 

Failed to minify the bundle. Error: static/js/2.20d7d005.chunk.js from Terser
Error: Call retries were exceeded
    at compiler.run (/home/node/node_modules/react-scripts/scripts/build.js:196:23)
    at finalCallback (/home/node/node_modules/webpack/lib/Compiler.js:257:39)
    at hooks.done.callAsync.err (/home/node/node_modules/webpack/lib/Compiler.js:273:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/node/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/node/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/home/node/node_modules/webpack/lib/Compiler.js:271:21)
    at hooks.afterCompile.callAsync.err (/home/node/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/node/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/node/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/home/node/node_modules/webpack/lib/Compiler.js:678:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/node/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/node/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (/home/node/node_modules/webpack/lib/Compilation.js:1423:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/node/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/node/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeChunkAssets.callAsync.err (/home/node/node_modules/webpack/lib/Compilation.js:1414:32)
Read more here: https://bit.ly/CRA-build-minify

For now I will try to workarround it by increasing the memory capacity of the node build process