Depending on what you are loading it may be more efficient to bundle everything in one file. If you are only loading a few kb per page, the overhead and extra time required for the network requests mean it's probably not worth splitting code.
At my day job we use app splitting rather than page splitting. Instead of breaking our codebase into individual pages and loading only those files, it's broken into apps. So you might load too much stuff for what you're currently doing, but you're never loading code that's completely unrelated.
A downside to that is that if you hit all our apps in one browsing session, you might download some vendor libraries like 10 times. But it's unlikely that a real user would ever do that.
That reminds me that I once found 3 versions of jquery (or perhaps jquery-ui, my memory fades) linked from the same page.
One was linked in the master (yes, this was webforms), one was being injected through a user control and the last was written into the page.
All three were all different versions so were all being downloaded. This came to light when a controls stopped working when one version was 'updated'.
https://webpack.js.org/plugins/commons-chunk-plugin
It does result in code being loaded when it isn't always needed, but in our case most libraries are used in every app.
In many cases it may not. Remember that you have to fetch data anyway when loading a new page. You could load the new parts of the CSS on the same connection.