Signup for the Ionic Newsletter to get the latest news and updates!

  • http://www.raymondcamdencom/ Raymond Camden

    Any plans on updating the CLI generator so I can make a page w/ this support built in? Maybe as a new template, lazypage.

  • jesusbotella

    How are you managing the common components/imports of every module? Are they splitted to a new common file?

    I am worried about loading the same code multiple times 🙁

    • Mike Hartington

      This is something I plan on addressing in a future post. We’re proposing a few different strategies, either one by one, or doing some mass import. I’ll go into further detail on this next week.

      • jesusbotella

        Oh, awesome, thank you. 🙂 I was just asking to know how you were doing it. I didn’t noticed that it was “part 1”.

      • http://www.badpenguin.org/ Antonio Gallo

        lets wait for “part 2” then

    • http://devdactic.com/ Simon Reimler

      I postet a little guide on this recently, it’s of course just one strategy for loading Pipes & Components: https://ionicacademy.com/ionic-3-lazy-loading/

  • http://www.thebrockellis.com/ Brock Ellis

    As a maintainer of a large-ish app, I am sooooo excited about lazy loading. Increasing start up will be huge for user satisfaction. Can’t wait for this to mature and stabilize. Great work, team!

  • Ankush Aggarwal

    I recently added lazy loading in my weather app – https://github.com/aggarwalankush/ionic2-mosum It’s not really difficult, actually simplifies the app. Refer to source code to see how to lazy load components, directives, how to use providers, animations.

  • http://www.badpenguin.org/ Antonio Gallo

    Finally! I had this problems with app with 50+ pages loading very slow since last summer. I will try it asap.

    • http://devdactic.com/ Simon Reimler

      If you have followed the standard naming scheme you can give my upgrade script a try which will automatically create the module files and add some stuff. But always backup / source control your code first! Check it out at the bottom here: https://ionicacademy.com/ionic-3-lazy-loading/

      • http://www.badpenguin.org/ Antonio Gallo

        ah thanks but actually i don’t want to implement a module for every page! We are already in production and don’t want to redo all the tests. Probably will use this feature onto the next project if still using Ionic.

        • Rako Nda ᵀᴴᴱ ᴼᴿᴵᴳᴵᴻᴬᴸ

          ” i don’t want to implement a module for every page! We are already in production “, this line is my nightmare when it comes to script improvement.

      • Khm

        How about adding a feature where we can exclude a specific page from the automated lazy loading process ? 🙂

  • Roberto Luiz Debarba

    I was waiting for this!
    I build big enterprise applications with dozens of pages and performance was a problem. We cosidered change to another framework to speed up our apps, but it can change our feature.

    Thanks!

  • Mashama McFarlane

    Very excited about this feature. Any chance you can update the Ionic Conference App to showcase Lazying Loading and Deep Linking features post version 2.x? I already tried integrate these new features into my app but encounter a road block seemingly related to https://github.com/driftyco/ionic-app-scripts/issues/848.

    Nevertheless Ionic rocks … thank you guys/gals for doing what you do. Keep doing it!

  • Roshan Dhabekar

    Great deal mAn

  • Niels

    Awesome! +1 for the Ionic Team!

  • James West

    Thank you for this implementation, much appreciated.
    Is there any scope to adding custom components to also be lazy loaded???

  • Dorayit

    Just I upgrade ionic and cordova today!
    I found lazy loading cannot working because of “Cannot find module ‘../pages/home/home.module’.”, BUT im sure this file is exists.

    • Jianming GUO

      I got the exactly same issue as yours, what’s going on here? Even I tried the provided lazyLoadTabs github repo, after ionic serve, the browser shows the same error.

    • Jianming GUO

      I think I solved it. I was using the cnpm rather than npm because network speed issue, and I just proved cnpm was broken, probably due to the fast paced updates on angular, ionic etc. recently . Just deleted the entire node_modules folder, and run npm install again, everything just works.

  • Romain Fallet

    Hello,

    I’ve just tried it out, it works !

    My question now is : how do you unit test lazy load pages ?

    I’m stuck with a fresh new blank project that only has the implementation you describe here.
    I set up a unit testing following your guide https://github.com/driftyco/ionic-unit-testing-example, but I have this error in the jasmine console :

    zone.js:630 Unhandled Promise rejection: invalid link: HomePage ; Zone: angular ; Task: Promise.then ; Value: invalid link: HomePage

    Any idea on how to make lazy load available in unit tests ?

    Thanks.

  • Naveed Ahmed

    @mhartington:disqus Would you please have look at https://github.com/driftyco/ionic/issues/11530 and share you opinion?

  • 卞中杰

    I’m afraid the example app (https://github.com/mhartington/lazyLoadTabs) doesn’t work. I tried to ionic serve on the browser and it says Cannot find module ‘../pages/tabs/tabs.module’. Could you take a look at that please?

  • Jan Strohhecker

    @mhartington:disqus : Great write up. Just one question, when i look at the screenshot with the file sizes, i wonder about your main.js. Its only ~600kb. How did you do that? When i create the blank ionic template, my main.js is almost 4mb!

  • Kim Wong

    The reason why ionic lazy loading is bad for large app:
    http://roblouie.com/article/456/ionic-3s-lazy-loading-is-bad/

  • Lloyd Williams

    Hello, I forked your tabs example but can’t get ionic serve to work, it complains about a missing gulp file. (after npm install). any ideas?

  • Xinhu Liu

    Thank you for your examples. However, I am using ion-slides. How can I lazily load each slide?

  • eongoo

    How can I force clients to refresh JavaScript files? How to add version number to 0.main.js?v=1.0.0

  • Mahmoud Rabie

    Thanks a lot for this brilliant post.

    What are steps to convert sample conference app to use Lazy Loading?

    Regards
    Mahmoud

  • Gabriel Angelo

    I’m getting the error ‘ No component factory found for DetailsPage. Did you add it to @NgModule.entryComponents?’

    • Gabriel Angelo

      I was calling the push without the ‘. Like push(HomePage) instead of push(‘HomePage’).

  • Quoc Nguyen

    hi, can we lazy load using cdn. Any option to specify cdn, and query string ?

  • akash

    Does it make any difference on android/ios app in performance if we use lazy loading in modules,
    because we already have all chunks locally in device?
    I know it really makes difference on web but just wanted to know how it improved performance if we use lazy loading?

  • Pepito Perez

    Any change at one year?

  • Harish Reddy

    I can understand this lazy loading in browser, because it has to download the main.js everytime we access our website. but my question is how the lazy loading of components works in mobile app, as the mobile app apk has all components in it.

    is the concept of lazy loading only applicable for web?