[optimisation] - code split main bundle with webpack

[chrismclarke]

Is your feature request related to a problem? Please describe. Currently the full app code is bundled together and loaded in a single file (still quite small, less than 1MB but likely to grow). Ideally we want it to be split with different pages as entrypoints. I think this is done automatically with create-react-app, so it might be worth investigating un-ejecting the app to use default build again (I think most of the reasons to eject are now deprecated, but will need to review and test).

[chrismclarke]

Note, if doing so can also revisit current service worker behaviour if following issue resolved: https://github.com/facebook/create-react-app/issues/5316

[chrismclarke]

Another couple to consider:

https://www.styled-components.com/docs/tooling#babel-plugin https://www.styled-components.com/docs/tooling#babel-macro (allow custom css property on styled components)

https://github.com/timarney/react-app-rewired https://github.com/withspectrum/react-app-rewire-styled-components (cra overrides for working with things like styled components without eject)

[chrismclarke]

Note, custom code currently added to ejected version to support skipWaiting (config/webpack.config.js L561), suggest waiting until good solution to above issue solved before any uneject

[chrismclarke]

Update to skipWaiting, now possible through postMessage: https://github.com/facebook/create-react-app/issues/5316#issuecomment-496292914

[chrismclarke]

Note - whilst unejecting would be good to do some housekeeping. Can use tools like depcheck to analyze unused dependencies

[chrismclarke]

closing as we've been using lazy-loaded bundles for quite some time