We are revamping our mobile site as progressive web apps using Ionic2. We are having around 15 components in our app and our final bundle size is around 8 mb. Becoz of huge size the initial load takes around 22 sec in 3G connection. Is there a way to reduce the final bundle size. What I am looking for is instead of having all the components in the final bundle , can I have only the main components and progressively load the rest dynamically.
Please suggest…
Thanks in advance
@Sujan12 I have tried Lazy Loading but still size of final bundle was huge only and I faced few more issues while using ModalController and Popover in my project as they are not able to access Pipes/Components/Services until they are imported directly in app.module.ts or by importing shared.module.ts (which has all imports of services/components/pipes) in app.module.ts .
Adding to this, I am facing issue in first time load of app as it is caching huge amount of data not only for my app. I created a new application(based on tabs theme) by ionic start sampleProject --v2 and I started that service. I cleared cache in my browser and opened that service and checked for the cache which always comes around 4.5mb . So, my point here is if basic application is having 4.5mb cache storage on first time load, and I am having around 15 components then its cache storage on first time will be huge which will lead to increased loading time(even after I used lazy loading same scenario exists). And also I want to mention, first loading time of same application in IOS device takes around 3-4 seconds while in android device it takes around 20 secon ds.