Skip to content

Code Splitting

Jean-Michel FRANCOIS edited this page May 28, 2021 · 1 revision

Context

This is the next big topic. Here we are in early stage so the content and decision may change

UI continue to grow. every component added to it is added everywhere. Code Splitting means we would like the app to download only needed code. Official React doc on it

Option 1: Code splitting per route

Each route lazy load the needed component using React.Lazy

Option 2: Code splitting per component

This is efficient when a component use heavy libraries. For example react-ace in code widget.

This is the React.Lazy + import() function. To do so we need to activate a new babel plugin in ui-scripts](https://github.com/Talend/ui-scripts/pull/39)

An other option is to rely on internal API. Example POC lazyload react ace in forms #3258