Not an issue, Question on Multiple Bundles

[ghost]

Hi rackt,

This looks really cool and I am just getting into webpack myself but I am curious about a best practices approach for a multi-page app and how one would achieve it. I want to use a router on a javascript app and load pages on demand. So if you visit the homepage then it only loads a bundle for the homepage, if you visit an about page then it will load code for the about page but not until you visit that page. I can generate multiple bundles in webpack but I am not sure how that fits in with a router because the router usually requires the handler (aka the page if I understand correctly) which would then bundle the page into the main bundle thus not keeping it in a separate bundle (I think....) and also webpack does not allow you to require entry points as a dependency which makes it a little tougher as well.

Is there a way to configure webpack to generate multiple bundles, ideally one per page, and have the router only load the necessary bundle and also only have one page living in the dom at a time?

I came up with a hacky solution here https://github.com/Summer-Top/single-page-react-webpack but I don't like it. I am using a home made router which I plan to switch for something better later on, I just made it myself for the learning experience so I could really understand how they work. In mine I generate multiple bundles but then I have multiple pages loaded at once. For example, if the user visits ten different pages in one session. I will have 10 divs, 9 of which are hidden, and the active page is visible. I would imagine this is not the greatest for performance once they get past 2 - 3 pages as that could be a lot of content living in the dom at once. Ideally I would have a single div and render the current component into it but I am struggling with doing this and having multiple bundles. I have been able to get one or the other to work but not both.

[ryanirilli]

@ryanflorence , we are dealing with a similar issue as @Summer-Top. We have an app with a handful of static pages and then our app, split into two bundles. The issue is that both bundles use the <Link> component and cross over. Do you have a good strategy for dealing with this?

One solution we have going from the app to a static page is to put a wildcard route at the bottom of our app routes that will essentially reload the page when it doesn't match, effectively loading our static page/bundle, if the route still isnt found our wildcard route on the static page redirects to 404.

Clever and hacky as it is, it doesn't allow us to do the same thing from static to the app. So we're kind of at a loss here. Any thoughts on this?

Thank you for your time and consideration here.