Description
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