feat(@angular/cli): add build-optimizer support #6520
Conversation
filipesilva
force-pushed
the
ngo
branch
3 times, most recently
from
39ad0d2 to
9dcacee
Compare
filipesilva
force-pushed
the
ngo
branch
3 times, most recently
from
673e7fe to
fdcdc66
Compare
filipesilva
force-pushed
the
ngo
branch
2 times, most recently
from
07a0630 to
0ad9430
Compare
|
:) |
| } else { | ||
| commandOptions.vendorChunk = true; | ||
| } | ||
| } |
There was a problem hiding this comment.
commandOptions.vendorChunk = !commandOptions.ngo ?
There was a problem hiding this comment.
Yeah that would be more concise 👍
filipesilva
force-pushed
the
ngo
branch
2 times, most recently
from
7f09ed4 to
195927c
Compare
filipesilva
changed the title
|
Readme link got broken, here is the new url: https://github.com/angular/devkit/tree/master/packages/angular_devkit/build_optimizer |
filipesilva
force-pushed
the
ngo
branch
2 times, most recently
from
bb9730f to
a8857b6
Compare
|
@Koslun good catch, updated 👍 |
|
PR changed to automatically default |
Adds the new flag `--build-optimizer` (`--bo`), usable only with `--aot` (or `--prod` since it auto enables `--aot`). This feature is experimental, and may not work correctly on your project. Should it work, total bundle size should go down. Savings are heavily dependent on the project. See https://github.com/angular/devkit/tree/master/packages/angular_devkit/build_optimizer for details about all the optimizations applied. Usage: `ng build --prod --build-optimizer`. Disabling the vendor chunk has been shown to improve total savings, and is done automatically when `--bo` is specified unless `--vendor-chunk` has a value. Please let us know if using `--build-optimizer` breaks your project so we can improve it further. Repos are very welcome.
|
ng serve is still working fine, but build with --prod or with --prod and --build-optimizer fails with the following cryptic error:
|
|
@chriszrc I think you're getting #7113. The solution is to update #7113 (comment). |
|
Ok, I updated to 1.3.0-rc.1 and ng build --prod is back to working (nice!). However with --build-optimizer, now I've got a different error:
|
|
Are we sure we want to disable In my app, which is a really classic one, total size with |
|
@chrisfitz now that one I have no idea what it is. I know we have some problems with RxJS operators in the build optimizer (angular/devkit#51) but unsure if that's exactly it. Is this a project I can check out? @cyrilletuzi our tests showed a marked improvement in total size by disabling vendor chunk in some projects. I haven't see any reverse case though. So it does seem more sensible to default to it for now, although that might change for a final release of it (it's still experimental). |
|
Hi, thanks for the link, my issue was the same as this other issue that was linked to it: Changing my rxjs imports from:
to
and then adding back all the individual operators:
worked! Not sure if this is the same issue as here (#7057) , but using the new --build-optimizer and trying to look at the sourcemaps to see how things are looking, you get this:
I can still see the local project dependencies, but all the information about vendor libraries is gone. Same with --vendor-chunk true and just looking at the vendor.bundle. Really nice work! My js dropped ~.7 mb with the new optimizations! |
|
@chriszrc do you include changing your RxJS imports in those ~700 KB savings? Given that for most users this would save quite a lot by itself. |
|
Hi, @chriszrc here (typo?), yes, that included rxjs import changes, I suspect the savings are mainly from that and material- |
|
@chriszrc yes, sorry, typo. And ok, makes sense. Know that tree-shaking classes should have a large effect on both RxJS and angular libraries as they both contain a lot of classes. While both RxJS and Material are quite large libraries they both allow a great deal of cherry picking. So curious how large the effect really is on projects who already cherry pick their imports. Will investigate a bit on my own when time allows but strongly recommend https://github.com/th0r/webpack-bundle-analyzer for investigating bundle sizes. As it's both quite easy to use and largely accurate numbers unlike for example https://chrisbateman.github.io/webpack-visualizer/. Would be quite awesome if there was just a negligible difference between cherry picking and just importing entire libraries. Though mostly for developer ergonomics it would likely overall reduce the output of quite a lot of angular applications in the wild which does not do this cherry picking. |
|
@filipesilva following my previous comment, as the build optimizer will be on by default in CLI 1.5 and Angular 5, will it stay with Total size is not the only criteria, having one big bundle means when the app is updated, all the big bundle will have to be downloaded again instead of just the |
|
@cyrilletuzi yes it should stay |
|
|
|
possibly connected #8900 |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Adds the new flag
--build-optimizer(--bo), usable only with--aot(or--prodsince it auto enables--aot).This feature is experimental, and may not work correctly on your project. Should it work, total bundle size should go down. Savings are heavily dependent on the project.
See https://github.com/angular/devkit/tree/master/packages/angular_devkit/build_optimizer for details about all the optimizations applied.
Usage:
ng build --prod --build-optimizer. Disabling the vendor chunk has been shown to improve total savings, and is done automatically when--bois specified unless--vendor-chunkhas a value.Please let us know if using
--build-optimizerbreaks your project so we can improve it further. Repos are very welcome.Note: the UglifyJS
pure_gettersoption is also turned on when using--build-optimizer. If your code has side effects in property access, they will likely not work properly.