Increased main.js bundle size but less lazy chunks after updating to angular 9.0.0-rc.1 #16146
Comments
|
Any chance of reproduction please? |
alan-agius4
added
the
needs: repro steps
|
I will try this afternoon, but its little bit hard as its a customer's project |
|
@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 |
|
I hope this comment can help. p.s. File sizes at disk are increased, checked this. |
|
@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. |
|
@filipesilva you are right. |
|
@parys Thank u for the tip, I have multiple material imports in different lazy loaded modules. |
|
I have a simmiliar experience 9.0.0-rc.1 exact numbers on disk
vs 8 in 8 the numbers reported are wrong ... exact numbers disk v8
|
|
@elvirdolic I think something similar happened in your case: version 8 has 13 application js bundles, while version 9 has only 10 application js bundles. The extra size seems to have come from code moving from some of the lazy bundles back into the main chunk. |
|
@filipesilva I checked the file sizes. These are my results: And for Version 9.0.0-rc.1 There are less files in Version 9.0.0-rc.1, but the overall file size is increased. I didn't update material, so there shouldn't been any restructuring. |
|
While It looks like @parys is the only one who has reported an issue with a supported configuration. Is it possible that you can post a GitHub repo with a reproduction? |
|
@Splaktar my setup is based on angular material 9.0.0-x. angular 9.0.0-x and angular-cli 9.0.0-x @filipesilva how is this possible without any code changes, just run material schematics update where the import path of the modules changed. |
|
@Splaktar Right now have no time. but you can look at my repo mylfc. in master is the latest stable angular. At brunch poc/angular9 updated |
|
@parys based on the commit, did you use Can you try running the update schematics manually via @elvirdolic did you run this manually for your project before posting those size results? This issue was fixed in PR angular/components#17704 today. We're hoping to get out an |
|
@Splaktar yes i run the schematics manually with —migrate-only flag when I realized that it didn’t worked by default. We have a quiet big monorepo running this manually would have take too much time. I experienced that some files were not changed and I changed the import paths manually. |
|
@elvirdolic if you have any info on why certain files might have been missed, please open up an issue for that in the Angular Components repo. |
|
@parys thank you for the repro! This are the steps I followed to use it: This got me an Ivy build in Then I added To calculate the total size for es2015 bundles in Ivy and VE I used the following commands: I can verify exactly what you described: Ivy is a total of 2.8M while VE is 3.6M. Ivy did have a slightly bigger (1.2 vs 1.1M) main bundle. I chalk this one off as a victory for Ivy though. It's a huge size savings! |
|
@elvirdolic well anytime that dependencies are updated, the total application code changes. In version 9 we also switch projects over to using Ivy so that might change things further. @elvirdolic @wambowams if you can provide me access to the project I can investigate your cases directly. Making a private github project (which is free now) and inviting me to it might be the best way to do it without exposing client projects to the web. |
|
@filipesilva I'm not allowed to share the projects source to anyone outside our company. But thank u for the offer. I will update material and will take more attention to file size over the next releases. |
|
@filipesilva our main went from 2MB to 2.2MB after upgrade. Overall size reduction is massive but the main is bigger :). If you can guide me what do you need, I could help to create a reproduction. |
I recently switched to the ES/ivy way of importing the lazy module and I noticed the same issue you described (main bundle got bigger, lazy bundle got smaller, so some code got moved to main bundle from the lazy one). But I got the expected behavior back by explicitly telling the webpack that I want _db-view module to be put into a separate chunk. So if you load the lazy module using old/deprecated way, using Not sure this info will be helpful to someone since I don't use Angular CLI in the referenced project but use AngularCompilerPlugin directly. |
|
@elvirdolic I'm currently following up on this in https://github.com/angular/angular-cli/issues/16866. If you could provide me with a repro, even privately, I could take a look. @vladimiry I'm very interested in what you're doing! Can you give me a bit more context please? I didn't quite follow. An example would be super cool too! |
|
@filipesilva, I just described the use of chunks splitting webpack's feature. See 4 different output listings using angular v9.0.0:
So if |
|
@vladimiry not super sure what's happening there. That would make sense if you were not using Ivy though. You had angular-cli/packages/ngtools/webpack/src/transformers/import_factory.ts Lines 107 to 114 in 6091879 But I think you were using Ivy in your example? So that's really weird. |
|
@filipesilva, the comment you referenced seems to be related to rewriting the Route definitions during the compiling stage. But I was describing the case of lazy-loading the Angular module without using the Route-thing, just dynamic lazy-loading the module from any point of the app.
Yes, Ivy enabled there starting from some Angular v8 version. |
|
Tried to reproduce by doing this:
So I'm really confused by the behaviour you're seeing. I don't understand how you could use Any chance you could give me a repro, or instructions on how to build your repo and what changes to make to see this behaviour? |
I put it as constructor(
private moduleLoader: NgModuleFactoryLoader,
) {}And then you call it like on this line:
Repo is here https://github.com/vladimiry/ElectronMail/ To build Angular-related stuff you run |
|
@vladimiry I did this:
So without the I checked your tsconfig and noticed you were using
Now we can actually see multiple separate chunks be created automatically (one for each lazy import) and a much smaller You can even do better if you disable your vendor This way you get a slightly smaller total payload, and a significantly smaller initial payload. More to the point insofar as this issue is concerned though, the cache group doesn't do anything useful when you already have ES |
|
@filipesilva, thanks for thorough analysis. So
Yeah, that |
|
This was pretty frustrating when expecting the file size to improve. I have a fairly large app and the file size on main went up from 587K to 610K. I'm not even sure where to start looking for the issue. "dependencies": { |
|
@santhony7 can you check if your total app size, with the size of the lazy bundles included, went down? |
|
@filipesilva got same problem, here is bundle-analyzer results |
|
I think this may be due to ngcc processing |
|
Yes, ngcc should process those packages. Webpack Bundle analyzer won't give the correct numbers in a lot of cases though. Using |
|
@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. |
|
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? |
|
Yes. I use material, but it is not big part of my app. Thanks for your help. |
|
@filipesilva Yes sir we do. "@angular/material": "^9.1.0", |
|
Hi everyone! my main.js is considerably bigger with ivy. Any idea what it could be? Before: |
|
@yamidvo the tool you are using ( |
|
|
|
Similarly, the difference is large before: after: |
|
@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. |
|
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. |
🐞 Bug report
Command (mark with an
x)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 --namedChunkswith following configuration:🌍 Your Environment
The text was updated successfully, but these errors were encountered: