reactjs - How to load async react components without Webpack imports with SSR and RR4 -

i have been looking solution load async react components on demand @ matched route without webpack import, system.import, require.ensure, ...

i want avoid webpack footprints in client-side code.

on server fetch routes , render matched locations static html/js. classic ssr.

my solution is:

• pack async components webpack static bundles (c1.js, c2.js, ...)
• store map routes => async components json ("/path" => c1.js)
• request react-rroute(rr4) matched path param wrap=true on ajax
• if route exists, , param wrap=true render c1.js on server fetch data (universal ajax) db
• wrap data , raw c1.js script response
• append response script child @ body or parent react component dom
• script unwraps data , code, stores them (e.g. redux) , append/render async component (c1.js) react dom

this way have small entry file , could:

1. request route https://host , load component (/path) on demand
2. request route https://host/path on entry , render compleate components (no async)
3. request route https://host/path rr4 , fetch , render async component(s)
4. reload page 2.

5. use browser history (back-forward) without requests data or components (both exist in redux store , script tag)

6. be able use component pagination (load more data , reuse fetched component)

my thoughts on this:
render async components direct dom instead cache them in script tag lose component code on unmount parent component (because async component not exist in main.bundle.js)

questions:

• is there proven approach handle async component loading (react code only , without webpack hacky imports) , able render universal?

• is bad practice split react code on independent bundles?

  `<script src=bundle.js /><script>*c1.js* code</script>` 

• is bad practice appand script tag react component dom (like <app/> or <home/>)
  • whats hmr (maybe side effects)?