-
Notifications
You must be signed in to change notification settings - Fork 12k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
group lazy modules in console when doing ng serve #8621
Comments
I agree it's not very useful to show the bundles every time on rebuild and that it can make it hard to see errors. If someone wants to take a look, the file where we show stats is https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/utilities/stats.ts. But remember that we'd need to do it differently for initial builds (show all) than rebuilds (show less). |
will do it, can you please tell me how from this statsToString() method I can check if it’s initial build or rebuild? Do you even want this behavior: And how/what should this grouped line displayed in console Thanks |
can you please tell here, what would you mean by "show less" do you meaning grouping all lazy modules ( number of files + total size ) somehitng like : If yes can you just write the line that console must display ? OR a lot easier first build console must show all then only write in console something like : "rebuild finish !" cc/ @filipesilva @hansl |
@istiti I don't think there is a good way to check if it is a initial build. Maybe what you can do is call it differently if using Regarding how to show less, that really is an open question... I think your approach of showing the number of lazy modules and the total size is pretty good. @hansl what do you think? |
Thanks @Taha-Di-Nero , let team accept or not, imho your approach is a little bit radical. I would too go with empty return BUT showing newly added lazymodule because they are considered as « first time builded» I mean for existing and edited files return ‘ ‘ but if durning serve you add new lazyload module and add it in a routing show them in console after rebuild. What do you think? |
I brought this up with the team yesterday and they think it's a good idea. @istiti and @Taha-Di-Nero what do you think of showing only bundles that changed? For instance if you add a new lazy loaded chunk it would show up. But if you edit something that changes your main chunk that one would show as well. This is easy to determine because chunks that change show |
This is exactly what I mean. +1 Cc @filipesilva |
For projects with a lot of lazy modules the rebuild messages can easily fill the whole console window. This PR shows only chunks that changed instead of showing all chunks. Before: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:56:13.707Z Hash: 7490b2942c48ffcf0f0f Time: 7317ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:17.054Z Hash: dbb03cc0994e8bf69e76 Time: 310ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:20.290Z Hash: fe53cbcd529dd2508cfc Time: 267ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. ``` After: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:53:40.216Z Hash: 44065f5ec5c4c8cf884a Time: 7312ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 724 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 576 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:42.089Z Hash: 492a7350b12ec1557b61 Time: 241ms chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:49.762Z Hash: 7490b2942c48ffcf0f0f Time: 296ms chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. ``` Fix angular#8621
What do you think of the fix in #8875? |
For projects with a lot of lazy modules the rebuild messages can easily fill the whole console window. This PR shows only chunks that changed instead of showing all chunks. Before: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:56:13.707Z Hash: 7490b2942c48ffcf0f0f Time: 7317ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:17.054Z Hash: dbb03cc0994e8bf69e76 Time: 310ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:20.290Z Hash: fe53cbcd529dd2508cfc Time: 267ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. ``` After: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:53:40.216Z Hash: 44065f5ec5c4c8cf884a Time: 7312ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 724 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 576 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:42.089Z Hash: 492a7350b12ec1557b61 Time: 241ms chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:49.762Z Hash: 7490b2942c48ffcf0f0f Time: 296ms chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. ``` Fix angular#8621
For projects with a lot of lazy modules the rebuild messages can easily fill the whole console window. This PR shows only chunks that changed instead of showing all chunks. Before: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:56:13.707Z Hash: 7490b2942c48ffcf0f0f Time: 7317ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:17.054Z Hash: dbb03cc0994e8bf69e76 Time: 310ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:20.290Z Hash: fe53cbcd529dd2508cfc Time: 267ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. ``` After: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:53:40.216Z Hash: 44065f5ec5c4c8cf884a Time: 7312ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 724 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 576 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:42.089Z Hash: 492a7350b12ec1557b61 Time: 241ms chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:49.762Z Hash: 7490b2942c48ffcf0f0f Time: 296ms chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. ``` Fix angular#8621
For projects with a lot of lazy modules the rebuild messages can easily fill the whole console window. This PR shows only chunks that changed instead of showing all chunks. Before: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:56:13.707Z Hash: 7490b2942c48ffcf0f0f Time: 7317ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:17.054Z Hash: dbb03cc0994e8bf69e76 Time: 310ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:20.290Z Hash: fe53cbcd529dd2508cfc Time: 267ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. ``` After: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:53:40.216Z Hash: 44065f5ec5c4c8cf884a Time: 7312ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 724 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 576 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:42.089Z Hash: 492a7350b12ec1557b61 Time: 241ms chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:49.762Z Hash: 7490b2942c48ffcf0f0f Time: 296ms chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. ``` Fix #8621
For projects with a lot of lazy modules the rebuild messages can easily fill the whole console window. This PR shows only chunks that changed instead of showing all chunks. Before: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:56:13.707Z Hash: 7490b2942c48ffcf0f0f Time: 7317ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:17.054Z Hash: dbb03cc0994e8bf69e76 Time: 310ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:20.290Z Hash: fe53cbcd529dd2508cfc Time: 267ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. ``` After: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:53:40.216Z Hash: 44065f5ec5c4c8cf884a Time: 7312ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 724 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 576 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:42.089Z Hash: 492a7350b12ec1557b61 Time: 241ms chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:49.762Z Hash: 7490b2942c48ffcf0f0f Time: 296ms chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. ``` Fix #8621
For projects with a lot of lazy modules the rebuild messages can easily fill the whole console window. This PR shows only chunks that changed instead of showing all chunks. Before: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:56:13.707Z Hash: 7490b2942c48ffcf0f0f Time: 7317ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:17.054Z Hash: dbb03cc0994e8bf69e76 Time: 310ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:56:20.290Z Hash: fe53cbcd529dd2508cfc Time: 267ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] chunk {main} main.bundle.js (main) 725 kB [initial] chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] webpack: Compiled successfully. ``` After: ``` $ ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2017-12-14T14:53:40.216Z Hash: 44065f5ec5c4c8cf884a Time: 7312ms chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered] chunk {main} main.bundle.js (main) 724 kB [initial] [rendered] chunk {polyfills} polyfills.bundle.js (polyfills) 576 kB [initial] [rendered] chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered] chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered] webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:42.089Z Hash: 492a7350b12ec1557b61 Time: 241ms chunk {main} main.bundle.js (main) 725 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. webpack: Compiling... Date: 2017-12-14T14:53:49.762Z Hash: 7490b2942c48ffcf0f0f Time: 296ms chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered] 4 unchanged chunks webpack: Compiled successfully. ``` Fix angular#8621
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. |
Versions
all
REPRO
ng serve
Observed behavior
I think this is a very ergonomics problem to see so many output in console which have scroll:
And in many IDE your console takes often 25% of the height
In fact problem will come when you have an error which not break your "ng serve" and you edit many times a file , the cli rebuild many times and you have sometimes error at the begining of you console, you can't see it quickly, you need scroll the console to read it just because of numberous lines
chunk {name.module} name.module.chunk.js () 58.7 kB [rendered]
You can see error here :
Desired behavior
I think CLI should NOT show these NOT important informations (on big project with many lazy module) because your console isn't clean and not ergonomics, not easy to use, to see if error happends.
I think these lazymodule chunk should still be here only with
--verbose
flag.And if you run
ng s
just output the minimum informations maxmimum of 7 or 10 lines and maybe regroup lazymodule in one lines, something like :RESULT SHOULD BE
What you think ?
The text was updated successfully, but these errors were encountered: