Code splitting your Meteor application

Code splitting is the ability to split your javascript bundle into multiple bundles and only load what you need. This is really nice because if you have a massive Admin app, you probably don’t want your regular users to load the stuff only the admin can use.

The way it works is it create the splitted bundles, a common bundle and the main bundle. When you open the / page, it will load the main and common bundle. Then, as soon as you go inside /admin, it will detect the admin bundle has not been loaded and automatically load it.

I think this is a massive optimization compared to how the Meteor bundle is working today. I think I would rather create a different Meteor app just for the admin than serving it to everyone. But now I don’t need to.

If you want to see an example of that in action, you can look at the AdminApp inside my kickstart project. Webpack is doing an awesome job at code splitting.

Let me know how you guys are handling this problem and how we can do this better :smile:

6 Likes