Dynamic imports with meteor and react-router

If you're using react-router (V4) with meteor and have screens in your app that aren't needed by all of your website visitors, then you can reduce the bundle size, for those visitors, with dynamic imports.

By using dynamic imports, with react-router, I've reduced my app's bundle size by 120kB, for 99% of visitors. To find out how - and see an example - read on!

I'm building an online booking system for barbers. 99% of the site's visitors are people wanting to book a haircut; they only need a few screens to do this. The final 1% are the barbers, who require many more screens/modules to manage their account, services, timetables etc.

Rather than declaring (and hence importing) all of our Routes upfront, we instead only decalre what Routes the user needs. We determine if the visitor needs the staff routes by using the alanning/roles package, to see if they are staff. If they are staff, then the extra Routes are asynchronously loaded.

Below is a simplified version of my code-split app: