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.
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.