Ionic-app-scripts: Experimental manual treeshaking leaves deptree.js

Created on 11 Feb 2017  Β·  20Comments  Β·  Source: ionic-team/ionic-app-scripts

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

Enabling the experimental manual treeshaking feature in 1.1.0 leaves a dependency tree at www/build/deptree.js when none of the 3 dep. tree options are set to true.

What behavior are you expecting?

Not having this file in the build unless specified in the config.

Steps to reproduce:

  1. Set ionic_experimental_manual_treeshaking to "true" in package.json. No printing dep. tree options set.
  2. Run ionic build android --prod --release.
  3. A dep. tree file is created at www/build/deptree.js (8.3 MB)

Which @ionic/app-scripts version are you using?
1.1.0

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

Most helpful comment

There could be any number of factors. We use fast Macs so we know it's fast on those.

Our thought process is it doesn't matter how long a prod build is (Within reason) since you shouldn't be doing them very often. It is much more beneficial to have a small, optimized, high performant output than a fast build process with a slower output.

Thanks,
Dan

All 20 comments

Cool, I forgot about this. Should be extremely easy to remove. It'll be in 1.1.1.

Thanks,
Dan

Great! I'm glad this helped πŸ‘

@FdezRomero
does your build works well with ionic_experimental_manual_treeshaking?

It does, but made no difference in file size so I disabled it for the moment. I did have some problems removing the decorators, but I haven't been able to isolate the issue so I'm not sure.

As an aside, I saw --prod bundle reduction from 2.5MB to 2.2MB using the latest app-scripts with ionic_experimental_manual_treeshaking & ionic_experimental_purge_decorators.

Randomly playing with other settings, adding ionic_use_experimental_babili increased the bundle to 2.3MB, removing that and adding ionic_use_experimental_closure reduced the bundle to 1.64MB, however the app no longer functioned.

Is there a general tracking bug for bundle size and feedback on experimental bundling config?

Also on a tangent to this issue, using ionic_experimental_manual_treeshaking in my app results in a browser console error "ReferenceError: Chip is not defined" (I don't use the Chip component in my app). Removing that and enabling closure does something similar but says "Uncaught TypeError: Cannot read property 'prototype' of undefined at b (main.js:1872)" - I suspect they may be related even though they are different optimisation paths.

babili is needed if you want to use es2015. Uglify is essentially deprecated and doesn't intend to support ES2015. We think over the course of the next few months it could be viable to ship ES2015.

Closure tearing up the code doesn't surprise me. It is very experimental so far.

The Chip component missing giving an error is strange. Hmm!

Thanks,
Dan

After adding both flags aswell, the size is decreased by 46kb.
Old: 3059KB
New: 3013KB

Worked flawless, the only point I noticed that building the APK of android (--prod) tooks nearly 3-4 minutes, on old app-scripts it took about 30-40 seconds

@graphefruit, it shouldn't take that long. It's very CPU intensive. Everything is in memory after the optimizations step build. For me it takes about ~20-30 seconds longer on a 10-15 page project.

Thanks,
Dan

@danbucholtz I gonna give it a try on a second pc and report back to you ;)
But I've tried to do a complete new installation of Ionic2, therefore it shouldn't be any problem with an old version which was upgraded.

Greetings
graphefruit

There could be any number of factors. We use fast Macs so we know it's fast on those.

Our thought process is it doesn't matter how long a prod build is (Within reason) since you shouldn't be doing them very often. It is much more beneficial to have a small, optimized, high performant output than a fast build process with a slower output.

Thanks,
Dan

You're definitely right Dan ;) Waiting 3 minutes to get a build which is decreased and much more faster is worth the wait.
For development we got ionic serve πŸ‘

@danbucholtz deptree.js is still in release apk with app scripts 1.1.1.
Even without experimental flags.

On Tue, 14 Feb 2017, 17:21 graphefruit notifications@github.com wrote:

You're definitly right dan ;) Waiting 3 minutes to get a build which is
decreased and much more faster is worth the wait.
For development we got ionic serve πŸ‘

β€”
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic-app-scripts/issues/735#issuecomment-279736701,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVoOP3_xJ43cyI-riQIg8U9F6TV-9QBiks5rccZegaJpZM4L-Prc
.

Yep, I haven't looked at it yet. It'll get fixed soon. 1.1.1 is 99% an internal release with things. Public can use it certainly, but I just released it so we can use it to build our ~200 E2E tests and demos internally.

Thanks,
Dan

I pushed a 1.1.2 with this in it.

Thanks,
Dan

Thanks Dan.

On Thu, 16 Feb 2017, 17:05 Dan Bucholtz notifications@github.com wrote:

I pushed a 1.1.2 with this in it.

Thanks,
Dan

β€”
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic-app-scripts/issues/735#issuecomment-280355370,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVoOP_q2v-dJ0ryhBiN1MA7HlH3qDTNZks5rdGXAgaJpZM4L-Prc
.

Just updated to 1.1.2 - where am I supposed to specify the flag to enable ionic_experimental_manual_treeshaking?

is it just ionic build ios --prod --ionic_experimental_manual_treeshaking?

@ghenry22 if I understood correctly you could specify it in your package.json too, like

"config": {
     ... your other stuffs here ...
     "ionic_experimental_manual_treeshaking": true,
    "ionic_experimental_purge_decorators": true
  }

@peterpeterparker thanks! I actually found it in the app-scripts docs right just now as well

Was this page helpful?
0 / 5 - 0 ratings