Code splitting in Ionic 3

We recently released Ionic 3.0.0 beta! The biggest thing in this release is the long awaited integration of code splitting in Ionic! Code splitting is the first YUGEEE step in getting our bundle size smaller and we have already seen some great improvements in load time in our testing. If you have not given it a try yet you can check out this forum post https://forum.ionicframework.com/t/ionic-3-0-0-beta/84540?u=mhartington for the instructions on how to update and implement code splitting in your Ionic app. Below i will try to explain why code splitting is so important for performant loading on the web and why we are so excited to introduce this feature in Ionic.

If your interested in PWA's i'm sure you have noticed the "bundle size crisis" that the web is in at the moment. Traditionally on the web we have taken all of our code, webpacked them into one huge bundle and then shipped that bundle. When websites were relatively simple this was mostly fine as that one bundle was relatively small, but as the web has evolved and gotten more capable we have started to ship bigger and bigger apps, which unfortunately has meant we are now in a position where we are shipping multiple MB bundles. Now, you may be wondering why this is an issue because on your Google Pixel or iPhone 7 connected to wifi that 2MB bundle loads very fast, but you have to remember that most of your users are going to be on low end android phones (think 1st gen Moto G) on a flaky 2G or 3G network. On these devices and these networks a 2MB bundle can take up to 20 seconds (or even worse) to load and parse, which when you consider that studies show that the average person will leave your web app if it does not load within 3 seconds is an obvious problem.

Now that we understand the problem we can talk about how code splitting goes towards fixing this issue. Code splitting allows us to split that one huge bundle into multiple smaller bundles and then lazy load these bundles based on what route the user is on at the moment. So, with an Ionic 3 app with code splitting set up, when the user navigates to your PWA only the bundle needed for that first view will need be shipped over the network and parsed. Then, as they navigate through your app the other bundles will be lazy loaded and parsed as they are needed. This means that we have now greatly reduced the amount of code that needs to be sent over the network and parsed for the user to start using your PWA!

We are very very happy to be shipping code splitting in Ionic 3! The entire team is laser focused on getting our bundle size as small as possible and our time to interactive as fast as possible and code splitting is our first huge step towards these goals. I urge you to give the beta a try and start testing out how code splitting helps your load time!