Repository navigation
Increased main.js bundle size but less lazy chunks after updating to angular 9.0.0-rc.1 #16146
Description
🐞 Bug report
Command (mark with an x)
- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc
Description
After updating from Angular 8.2.3 to 9.0.0-rc.1 the bundle size was increased for main module and some of the feature modules:
Before it was:
After updating to Angular 9.0.0-rc.1 it is
🔬 Minimal Reproduction
running ng build --prod --namedChunks with following configuration:
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"commonChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "1mb",
"maximumError": "2mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
}
}
🌍 Your Environment
Angular CLI: 9.0.0-rc.1
Node: 10.15.3
OS: win32 x64
Angular: 9.0.0-rc.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.900.0-rc.1
@angular-devkit/build-angular 0.900.0-rc.1
@angular-devkit/build-optimizer 0.900.0-rc.1
@angular-devkit/build-webpack 0.900.0-rc.1
@angular-devkit/core 9.0.0-rc.1
@angular-devkit/schematics 9.0.0-rc.1
@angular/cdk 8.2.3
@angular/material 8.2.3
@ngtools/webpack 9.0.0-rc.1
@schematics/angular 9.0.0-rc.1
@schematics/update 0.900.0-rc.1
rxjs 6.5.3
typescript 3.6.4
webpack 4.41.2
Activity
alan-agius4 commentedon Nov 11, 2019
Any chance of reproduction please?
wambowams commentedon Nov 11, 2019
I will try this afternoon, but its little bit hard as its a customer's project
filipesilva commentedon Nov 12, 2019
@wambowams just to be really sure, can you show the sizes on disk for the dist folder? Sometime in 8 we had a bug where the
ng buildreported sizes weren't correct.parys commentedon Nov 12, 2019
I hope this comment can help.
Faced with increasing main module size(in es2015) from 1.06 to 1.15 MB (and es5 size increased too), but all other modules decreased. Full application size decreased from 3.44 to 2.67 MB.
webpack-bundle-analyzer shows that it caused by angular/material. it increased from 127 to 200 kB and increase main module.
core and cli is 9 RC1,
material and cdk is 9 RC0
p.s. File sizes at disk are increased, checked this.
filipesilva commentedon Nov 13, 2019
@parys can you check if you have the same number of files? I wouldn't be surprised if only of the lazy modules had been merged with the main module.
44 remaining items
filipesilva commentedon Mar 2, 2020
@santhony7 can you check if your total app size, with the size of the lazy bundles included, went down?
izmaylovdev commentedon Mar 2, 2020
@filipesilva got same problem, here is bundle-analyzer results
Before:
After:
izmaylovdev commentedon Mar 2, 2020
I think this may be due to ngcc processing
@angular/*packages, should ngcc do this?filipesilva commentedon Mar 2, 2020
Yes, ngcc should process those packages.
Webpack Bundle analyzer won't give the correct numbers in a lot of cases though. Using
source-map-explorerwill give you a more accurate picture of the code in your bundles, as described in https://angular.io/guide/deployment#inspect-the-bundles.santhony7 commentedon Mar 2, 2020
@filipesilva Yeah, I do know that the total size has been reduced but I also think it is important to be very specific about that when claiming file size reduction. As you know, the browser's time-to-interactive or the page-speed-index is pretty much the only metric that matters to leadership. Selling them the upgrade on the promise of faster (initial) download only to find out you made it worse can be a bit disheartening.
filipesilva commentedon Mar 2, 2020
To the best of my knowledge, we only have one situation currently where the main bundle gets bigger: https://github.com/angular/angular-cli/issues/16866. Still trying to figure out what we can do in that case. Do you also use material in your app?
izmaylovdev commentedon Mar 2, 2020
Yes. I use material, but it is not big part of my app. Thanks for your help.
santhony7 commentedon Mar 2, 2020
@filipesilva Yes sir we do. "@angular/material": "^9.1.0",
yamidvo commentedon Mar 26, 2020
Hi everyone! my main.js is considerably bigger with ivy. Any idea what it could be?
Before:
After:
filipesilva commentedon Mar 26, 2020
@yamidvo the tool you are using (
webpack-bundle-analyzer) will not provide very precise numbers with Angular CLI 9, because we process bundles after they leave webpack. A better tool to get that data would besource-map-exploreras described in https://angular.io/guide/deployment#inspect-the-bundles. That will give you very precise measurements.parys commentedon Mar 26, 2020
@filipesilva
Full bundle: 2.88 MB
Main bundle: 972, 9 KB (size in webpack-bundle-analyzer 973.6 KB (less than 1KB)
Angular modules: 704.45 KB + rxjs 48.26 + zone.js 35.7 = 788 KB is only for angular stuff. ( and I've already moved to lazy modules almost all material modules that not used at the index page. As I remember angular 9 decrease full size from 3.4 to 2.9 MB but increased main bundle a lot( and almost all is taken by angular(
yamidvo commentedon Mar 26, 2020
Similarly, the difference is large
before:
after:
filipesilva commentedon Mar 30, 2020
@parys I can't say much regarding that screenshot as I don't have anything to compare it to. Could you include a screenshot of the source map explorer output from before 9 please?
@yamidvo I noticed you have a large shared module, which can be a problem as described in #16146 (comment). Have you tried what I mention in the "What you can do right now" section of that comment? You might have static imports to your shared code from your main entry point, causing it to not be loaded lazily at all. I don't think this is a problem we can fix on our side.
Either way, something else you two can do is to opt out of Ivy, as described in https://angular.io/guide/ivy#opting-out-of-ivy-in-version-9. This should get back to the setup used in Angular version 8.
angular-automatic-lock-bot commentedon Apr 30, 2020
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.