I've been trying to optimize my code based on the official guide: https://reactjs.org/docs/code-splitting.html
My app only displays a login form at the beginning. So having it load the whole app is pointless. It would be ideal for it to just load enough for it do display quickly (React, HTML, and CSS - the login form does not use any of the UI widgets we use inside). And in the background, prefetch the rest of the code while the user is logging in.
But the problem seems to be (I think) that webpack tries to create a "vendor" bundle with everything in it, and this includes React and the rest of the UI widget library. So even though I can try to split with dynamic components loaded with React router, all this does is split my code. The libraries for all components (even the login form) are all in the main bundle, and all of them reference this bundle anyways.
How can I split my code in such a way that the login form will load only what it actually requires to work, and then the rest (ideally) silently on the background while the user is entering their credentials?