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.

    • Mike Hartington

      It’s definitely something we can consider. The generators will need to be adjusted once lazy loading becomes more stable and is the default.

      • Zarko Hristovski

        +1 to continue making default choices.

  • 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.

  • 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!