[SOLVED] App-scripts: webpack “scope hoisting” per default?

Ionic Framework ionic-v3
1

I just read the last Ionic blog post and hear about the “Webpack’s “scope hoisting”” improvement in Ionic app-scripts

Do someone knows if this improvement is published with last version? Does this comes per default or do it need an option/configuration?

And finally, isn’t that exactly the missing chain we were needed to use lazy loading with components (to avoid the duplication of codes in case components would be use in different pages aka to avoid the built app to contains x times the same components codes)?

Thx in advance for your thoughts and feedbacks!

http://blog.ionic.io/announcing-ionic-3-5-3/

2

Scope Hoisting was introduced with app-script 2.x. The changelog of that version contains a bit more info: https://github.com/ionic-team/ionic-app-scripts/releases/tag/v2.0.0 The linked changes to the config tell me this is activated by default.

(Here is some general explanation what it actually is, if someone doesn’t already know such basic stuff *ahem *just.googled.it: https://medium.com/webpack/brief-introduction-to-scope-hoisting-in-webpack-8435084c171f)

1 Like
3

Thx for the answer and pointing that out, I missed it in the change log

Of course I googled it (https://github.com/webpack/webpack/tree/master/examples/scope-hoisting) just wanted to have another opinion about it you know

p.s.: gonna try with my project this week and close the post afterwards

4

I just attempted to test this, and came up with the (sad) result of “no”. If anybody official can confirm that deduping is supposed to happen, I can clean up the scratch project I used for testing and submit it.

5

:frowning:

thx for the feedback. gonna try to with my project tomorrow if I’ve got the time, will post afterwards

6

@rapropos yep unfortunately I confirm your results too. Just tried to explore my app while using lazy loading, still find the same components in 1.js and 2.js for example :frowning:

wait & see, I still have hope :slight_smile:

P.S.: And regarding my first question too, I think that “scope hoisting” is use per default

7

Opened an issue about it

1 Like
8

Issue closed “not a Ionic problem could solve”…asked team if they don’t want to keep it open till resolved (see my comment in issue)

9

I wish the quasi-official Ionic documentation about lazy page loading would address this issue. I had to figure it out with trial and error and a lot of plowing through webpack bundles. Perhaps the app I was working on at the time is a bit unusual in terms of how many heavy components are reused in multiple pages, but it resulted in roughly a 30-35% increase in app binary size for no discernable loading speedup. In its current state, lazy loading is not a wise choice for all apps, yet I feel it is being pitched as such.

10

I had the luck to see one of your post about that issue that’s how I also discovered it. My app contains a lot of pages (> 30) and components (> 50) and therefor this is really a no go to lazy loading. Agree with you that it should be documented

1 Like
11

But encouraging news, look like following webpack issue will be merged

2 Likes
12

Documentation is on Github as well, I assume the team wouldn’t decline a PR that tells users about the pitfalls of lazy loading.

13

Silly question, but where on Github? Have you got the url right next to you :wink: ?

14

There is a link “Improve this doc” at the top of the page on ionicframework.com. For https://ionicframework.com/docs/api/navigation/IonicPage/ it links to https://github.com/ionic-team/ionic/edit/master/src/navigation/ionic-page.ts for example. Click Cancel to just see the file instead of editing it directly.

1 Like
15

What do you think guys about adding following remark in the https://ionicframework.com/docs/api/navigation/IonicPage/ ? Or would you like to write this differently?

Note about the use of IonicPage and IonicPageModule

Using IonicPage and IonicPageModule has for result that your app, once built, will be packed in split bundle.js instead of a single bundle.js for your all app. In case you would use the same component in different IonicPages, the code of your component gonna be contained multiple times in the split bundles.js which will have for effect that the size of your app gonna be bigger.

P.S.: Would appreciate your help guys, my first text was better but I kind of pressed the wrong key and had to write again everything from scratch :wink: