fix(@angular/cli); show only changed chunks on build #8875

filipesilva · 2017-12-14T14:57:05Z

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: 2018-01-03T12:22:56.414Z
Hash: 38ba8d730f1803e5322f
Time: 8548ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 723 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 576 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 43 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 6.47 MB [initial] [rendered]

webpack: Compiled successfully.
webpack: Compiling...
Date: 2018-01-03T12:23:00.593Z • Hash: 9d8c8a72035d0d707df3 • Time: 259ms
4 unchanged chunks
chunk {main} main.bundle.js (main) 723 kB [initial] [rendered]

webpack: Compiled successfully.
webpack: Compiling...
Date: 2018-01-03T12:23:04.151Z • Hash: a95ea7bcfe80f0e4d747 • Time: 124ms
4 unchanged chunks
chunk {main} main.bundle.js (main) 723 kB [initial] [rendered]

webpack: Compiled successfully.

Fix #8621

ghetolay · 2017-12-14T16:48:39Z

packages/@angular/cli/utilities/stats.ts

-    }).join('\n')}
+    }).join('\n');
+
+  const unchangedChunkNumber = json.chunks.filter((chunk: any) => !chunk.rendered).length;


Wouldn't this work too ? no need to loop through chunks again.
const unchangedChunkNumber = json.chunks.length - changedChunksStats.length;

nvm didn't see the join. Could still keep the resulting array and join later.

That's a good idea, I'll do that.

elvisbegovic · 2017-12-15T11:05:52Z

packages/@angular/cli/utilities/stats.ts

+    Date: ${w(new Date().toISOString())}
+    Hash: ${w(json.hash)}
+    Time: ${w('' + json.time)}ms
+    ${changedChunksStats ? changedChunksStats + '\n' : ''}${unchangedChunksMessage}


Thanks to this pullrequest. @filipesilva What you think to reorder console & get little bit more concis (because in dev mode, imo, short is better)
Before:

After:

I think this looks really good :) It's no longer than this line either:

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

I like the shorter as well.

I've updated the first message to show the shorter output in the after snippet.

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

TobiasSchulte · 2018-01-23T15:21:25Z

packages/@angular/cli/utilities/stats.ts

+
+  if (unchangedChunkNumber > 0) {
+    return rs(stripIndents`
+      Date: ${w(new Date().toISOString())} • Hash: ${w(json.hash)} • Time: ${w('' + json.time)}ms


This output leads to two beep sounds on windows systems due to the two '•' characters, see https://blogs.msdn.microsoft.com/oldnewthing/20070104-00/?p=28513

Let's use a fancy character they said. What could go wrong they said.

😞

@TobiasSchulte does this happen on your system? I tried on mine (Windows 10, basic cmd) and I didn't get a beep.

@filipesilva Yes, it happens on my machine and on the machine of a colleague. Both are Windows 7 systems, it happens in a normal cmd, but not for example in the vscode integrated terminal.

Would you be interested in making a PR that changes • to -?

@filipesilva Pull request is created

@TobiasSchulte we have already made that change in #9336

angular-automatic-lock-bot · 2019-09-12T11:41:18Z

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.}

filipesilva self-assigned this Dec 14, 2017

filipesilva requested a review from hansl December 14, 2017 14:57

googlebot added the cla: yes label Dec 14, 2017

filipesilva mentioned this pull request Dec 14, 2017

group lazy modules in console when doing ng serve #8621

Closed

filipesilva force-pushed the short-rebuild-stats branch from f159b3b to a2c726d Compare December 14, 2017 16:05

ghetolay reviewed Dec 14, 2017

View reviewed changes

elvisbegovic reviewed Dec 15, 2017

View reviewed changes

filipesilva force-pushed the short-rebuild-stats branch from a2c726d to 2e33cc5 Compare January 3, 2018 12:23

clydin mentioned this pull request Jan 9, 2018

fix(@angular/cli): show errors after warnings #8745

Closed

hansl approved these changes Jan 9, 2018

View reviewed changes

clydin merged commit 788c8f9 into angular:master Jan 9, 2018

TobiasSchulte reviewed Jan 23, 2018

View reviewed changes

filipesilva deleted the short-rebuild-stats branch January 23, 2018 15:24

filipesilva mentioned this pull request Jan 23, 2018

fix(@angular/cli): replaced bullet character due to unwanted beeping … #9336

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 12, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(@angular/cli); show only changed chunks on build #8875

fix(@angular/cli); show only changed chunks on build #8875

filipesilva commented Dec 14, 2017 •

edited

ghetolay Dec 14, 2017 •

edited

ghetolay Dec 14, 2017

filipesilva Jan 3, 2018

elvisbegovic Dec 15, 2017

intellix Dec 16, 2017 •

edited

filipesilva Jan 3, 2018

filipesilva Jan 3, 2018

TobiasSchulte Jan 23, 2018

filipesilva Jan 23, 2018

filipesilva Jan 23, 2018

TobiasSchulte Jan 23, 2018

filipesilva Jan 23, 2018

TobiasSchulte Jan 23, 2018

filipesilva Jun 5, 2018

angular-automatic-lock-bot bot commented Sep 12, 2019

fix(@angular/cli); show only changed chunks on build #8875

fix(@angular/cli); show only changed chunks on build #8875

Conversation

filipesilva commented Dec 14, 2017 • edited

ghetolay Dec 14, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

intellix Dec 16, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 12, 2019

filipesilva commented Dec 14, 2017 •

edited

ghetolay Dec 14, 2017 •

edited

intellix Dec 16, 2017 •

edited