How to do Lazy loading resources/scripts in broswer app?

Ionic Framework ionic-v3
1

In my ionic2 project, app.bundle.js files is around 3 MB and I think it will grow as I am adding more features.

When I deploy it as browser app its takes, it takes time to load, **Is there any easy way to lazy load scripts by **
module/feature instead of merging together??

2

Currently, there isn’t an easy way to do this, but there is some hope.

So right now V2 uses webpack for bundling all it’s assets (ng2, ionic2, and any node modules), and it will bundle everything even if you’re not using it. Not ideal.

Webpack 2 though has a tree shaking feature. As it builds your assets, it will only bundle the code needed for your app. So you only get what you need. Much better over all.

Not exactly the answer you were probably looking for, but this could address the file size issue.

1 Like
3

Thanks @mhartington for your reply.

But don’t you think that merging all files in one is a bad idea?

  • every time whenever there are changes it has to be download
  • initial loading time is high
  • if user is not visiting any other screens still those files are getting downloaded
  • my context is ionic 2 browser app.
4

Well it depends really.

People have been concatenating all their files down to once for quite some time, so I don’t think it’s too bad.
Webpack2 also bring incremental builds via module replacement. So say Page1 changes, only the contents of Page1 will be update, and not the whole build

Minified and GZIP, the file size won’t be anything too crazy. Plus, as angular2/ionic2 progress, we can expect to see file size drop a lot :smile:

Again, it’s the same logic in an ionic 1 app. Even if a user didn’t go to a particular state, all the controllers and templates for that state were loaded upfront, so not much has changed here. Plus both projects are still in beta, so there’s no reason to think that this could change.

1 Like
5

something can be made now.
Our site is completely on Ionic2 beta.8

I have hybrid app too and I did some optimizations and got 417ms loading time.
Look at report https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/17
Also Site size decreased 600% (3Mb -> 500 Kb)
User interaction response speed improved 2000% (2 seconds -> 100ms)

Good recommendations: http://blog.angular-university.io/how-to-run-angular-2-in-production-today/36

I’ll post all my gulp settings and link to appstore here: http://www.sherpadesk.com/blog/