Ionic-app-scripts: How to Lazy Load w/ Deep Links

[yozman]

I made a mobile app with ionic2
and my owner said we need the same mobile web site.

I already done with deeplink.
the only problem is the first page is loading to long.
the javascript file main.js is more than 1500kb.

so how can I build the project to lazy load?
like split main.js to chunk.0.js chunk.1.js and more.
angular-cli is already automatic.

[danbucholtz]

Stay tuned 😸 . It's a WIP right now.

We'll have more to share on this story very soon. This is our #1 priority right now. We're figuring out the tooling behind it to make it simple/trivial to implement.

Thanks,
Dan

[yozman]

@danbucholtz
wish you goal it as soon as posible
BTW ionic 2 stable is release.

[aggarwalankush]

I can see @danbucholtz working day and night on this. @yozman Just look into following few branches he is working on
https://github.com/driftyco/ionic-app-scripts/branches
https://github.com/driftyco/ionic-closure/branches
https://github.com/driftyco/ionic/tree/dan2

he is even dreaming about it 😛
https://twitter.com/danbucholtz/status/824617478747676675

[danbucholtz]

@aggarwalankush, LOL!!!!!

[yozman]

@aggarwalankush @danbucholtz
amazing 👍

[timowolf]

@danbucholtz Great work.

we are also using the scripts for building pure angular 2 web applications and would like to use the lazy load functionality of submodules using loadChildren: 'modulePath#ModuleName' in the routing.

Will this be support in this change?

Thanks a lot.

[yozman]

@timowolf
maybe not.
ionic2 nav system is different from angular router

[danbucholtz]

@timowolf, to be totally honest, I doubt it. Our deep linking system is simpler than Angular's router. We are also looking to use an ID or a name for a router instead of using paths. We can figure out the paths at build time.

We are making progress on this issue. Nothing to share yet. Stay tuned though. We know how important this is.

Thanks,
Dan

[yozman]

everybody can try the feature
use ionic_experimental_parse_deeplinks
for config in package.json
it's experimental
not works sometime for me

[yozman]

@danbucholtz
will this feature work will ionic2 or 3.x?

[kwarpechowski]

@yozman, @danbucholtz Do you have any example for deeplinks and lazyloading?

I tryging, but not effect

{ loadChildren: './settings.module#SettingsModule', name: 'Settings' }, { component: SettingsPage, name: 'Settings', segment: 'settings' },

@NgModule({
  declarations: [
    SettingsPage,
    SettingsSubpage,
  ],
  imports: [
    IonicModule.forRoot(SettingsPage),
  ],
  entryComponents: [
    SettingsPage,
    SettingsSubpage

  ]
})
export class SettingsModule { }

I usage ionic serve --experimentalParseDeepLinks

[yozman]

@kwarpechowski
u can check this out https://github.com/driftyco/lazy-loading-poc

[kwarpechowski]

@yozman. Yes, but this example was written in v3.

v2 not have IonicModule.forChild method.
https://github.com/driftyco/lazy-loading-poc/blob/master/src/pages/page-one/page-one.module.ts

Do you have any example written in current stable version?

[yozman]

@kwarpechowski
I think it will come up with v3

[kwarpechowski]

@yozman Thank you for response. I tried make a extension IonicModule (implement forChild and other references), but I not have positive effect. I showed commit logs v3 branch. New version has many new code dependencies.

@danbucholtz Do you have plan for release lazy loading feature in v2 ? I think that many developers need this feature in current stable version. Do you need any help ?

[yozman]

@danbucholtz @kwarpechowski
by the way I think forChild isn't a good way to lazyloading.

I think everything should be automatic using webpack.

ionic user just need to config deeplink to set the page and route.

the lazyloading is split route to do that.

[yozman]

@danbucholtz
I check the branch v3.
and found lazy load.
but I don't think it's easy to use.
if I have to use module,
why don't use angular-router?

I suggest lazy load can be an feature easy to use without use module.

[mburger81]

@yozman was you able to get work DeepLink with Module? My pages are all modules so how we have to do for that? Can you help?

[danbucholtz]

The implementation within app-scripts is done and published in 1.2.0. We will be publishing a beta of Ionic 3 on Monday or Tuesday along with instructions. Please follow our twitter account or our Ionic forum for more details.

Thanks,
Dan

[yozman]

@danbucholtz

amazing,
thanks for your work

rifle

[yozman]

hi, everybody
u can taste this feature with ionic3.0.0-beta.3

this is the example repo
ionic2-starter-mobile

[warlockdn]

Any update on this ? Still can't get it to work