How do I get React / webpack to split bundles & render dynamically?

I've inherited a server-side rendered / Universal React/Redux app. Building it for Production leaves me with a 6MB bundle and ~1 sec (wifi) load time which i'd obviously like to reduce.

Being a SSR app it's split like:

src/
  client/
  server/

For build, in client.webpack.config i have the Client-side entry point (no server-rendering).

compiled and bundled with an entry like:

 entry: [
      './src/client/index.js',
    ],

Bundle comes out 6MB.

Tried:

1. splitting entry points into all the containers (eg src/client/pages/Account/index.js, src/client/pages/About/index.js etc). Not sure how to say "src/client/index.js but then a child folder within that area should be its own bundle". Even with stipulating ALL containers, it doesnt seem to create a new bundle for all of them, which is what i was expecting from Webpack Documentation.

2. Loadable Components (/lazy loading). This seems to treat containers as async objects/modules to be loaded in, that don't then halt the main interactive content, which makes sense. But how would that work with SSR section of the application? If you're loading '/' afresh, it's going to be server side rendered components. Not client side lazy load stuff.

I basically just want to do this:

• tell webpack to split bundle into 3. (LandingPage / root, Signup Flow, Account area).
• tell application to use specific bundle depending on URL/location.

How do i do that?