Ionic 4 Lazy Loading and Modals

Ionic Framework
4

Ok so I investigated a bit playing with source map (see https://forum.ionicframework.com/t/solved-ionic-cli-v4-where-are-the-source-maps) and I think that declaring modals the following way may be lazy loading and bundle size safe

WARN I may be wrong but I think it’s ok, so plz correct me if it isn’t, I would appreciate it

  1. You create a modal

     @Component({
   templateUrl: './my-modal.modal.html',
   selector: 'my-modal'
 })
export class MyModal

  2. and for the modal your create also a separate module (important: don’t miss the entryComponents)

     @NgModule({
  declarations: [
      MyModal
  ],
  imports: [
      IonicModule,
      CommonModule
  ],
  entryComponents: [
      MyModal
  ]
})
export class MyModalModule {
}

  3. at this point you are good, you have a modal you could use everywhere. to do so, just include it in your pages/components respective modules

    imports: [
   MyModalModule
]

voilà :slight_smile:

then, about my tests, I did as a described above and included the modal only in one and only one page and module, let say A

I had a look to the source map (doing ionic build --source-map) and I found a reference to the modal only in A.js

Then, I added another reference to this modal in another page and module, let’s call it B. Ran the cmd and had a look at the js files and I find no references anymore in A.js but I found one reference to the modal in a file called A~B.js

That’s why I think it is safe to include modal this way to be lazy loading and bundle size safe because I only saw one reference to the modal in only one separate bundle file

p.s.: I’m agree seeing the reference only once in the bundle doesn’t say that it is 100% sure lazy loading safe, but it gave me a good hint that it is probably the case

2 Likes