Rebuild extremely slow

[asadsahi]

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Windows 10

2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.11-webpack.8
   node: 6.3.0
   os: win32 x64

3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   app created with 1.0.0-beta.11-webpack.2 and later on upgraded to 1.0.0-beta.11-webpack.8 with appropriate changes.

4. The log given by the failure. Normally this include a stack trace and some
   more information.
   The slow behavious is observed when upgraded from 1.0.0-beta.11-webpack.2 to 1.0.0-beta.11-webpack.8

5. Mention any other details that might be useful.
   Slow behavious reproduceable in following repo:
   https://github.com/asadsahi/ng2fb-bootstrap

   ---

I have experience this on two operating systems, windows 7 and windows 10. Has anyone else experieced this? For me rebuilds are dramatically slow, taking roughly 7-8 seconds which on same machine with cli version webpack.2 was taking rougly 2-3 seconds.

[stellasoft-george]

+1 Rebuilds are extremely slow for me on OSX 10.11.6

[RicardoVaranda]

+1 also quite slow on linux x64 after I moved my assets from the app folder to the appropriate assets folder, it now optimizes the assets folder every time I make a change to any of the code which seems to be the reason for the added delay.

[filipesilva]

@TheLarkInn can you weigh in? It seems related with CopyWebpackPlugin.

[ghost]

I also have a very slow "chunk assert optimization" step (~8s all the time even for small changes in one file). looking at webpack/webpack#539 (comment) it seems it could be due to the source-map configuration chosen.

[intellix]

Would DLL loading for vendor items help here? They must be 90% of bundle size

[dasAnderl]

+1 build/rebuilds extremely slow, as well as the update/recompiling in the browser.
as well as ng test

[guiomie]

+1, new to angular2. I really like how it was easy to get started, sadly, keeping going is much harder. Every time I modify a file and save, it takes more than 10 seconds before I can reload the browser and see my update. For web development, I can't do this. Maybe I'll switch to Angular2 JS.

Here is what I see in my shell on ubuntu:

webpack: bundle is now VALID.
webpack: bundle is now INVALID.
1337ms building modules                                                       
19ms sealing
1ms optimizing 
0ms basic module optimization 
468ms module optimization
3ms advanced module optimization 
56ms basic chunk optimization       
0ms chunk optimization 
0ms advanced chunk optimization 
51ms module and chunk tree optimization
900ms module reviving
8ms module order optimization 
11ms module id optimization
9ms chunk reviving 
2ms chunk order optimization 
44ms chunk id optimization
212ms hashing
1ms module assets processing 
0ms chunk assets processing 
11ms additional chunk assets processing
0ms recording 
1ms additional asset processing 
0ms chunk asset optimization 
1618ms asset optimization
1ms emitting 
Hash: 8e4aceb7595d757b77f1
Version: webpack 2.1.0-beta.22
Time: 12081ms
           Asset     Size  Chunks       Chunk Names
  main.bundle.js  4.04 MB    0, 2       main
styles.bundle.js  10.2 kB    1, 2       styles
       inline.js  5.53 kB       2       inline
        main.map  4.31 MB    0, 2       main
      styles.map    14 kB    1, 2       styles
      inline.map  5.59 kB       2       inline
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  3.69 kB       0  

[thorsten]

Same issue here.

[filipesilva]

#2570 moved away from CopyWebpackPlugin to a simpler glob copy. This should help with @RicardoVaranda's issue.

[filipesilva]

@asadsahi with beta.17 I registered a 6633ms second rebuild time, is this in line with your experience?

webpack: bundle is now INVALID.
406ms building modules
15ms sealing
1ms optimizing
1ms basic module optimization
133ms module optimization
58ms advanced module optimization
49ms basic chunk optimization
1ms chunk optimization
0ms advanced chunk optimization
36ms module and chunk tree optimization
167ms module reviving
4ms module order optimization
9ms module id optimization
6ms chunk reviving
2ms chunk order optimization
39ms chunk id optimization
58ms hashing
4ms module assets processing
78ms chunk assets processing
5ms additional chunk assets processing
1ms recording
1ms additional asset processing
1992ms chunk asset optimization
532ms asset optimization
53ms emitting
Hash: ee2a562c10e2a5133f8d
Version: webpack 2.1.0-beta.25
Time: 6633ms
                                 Asset     Size  Chunks             Chunk Names
                      styles.bundle.js   173 kB    7, 9             styles
  25a32416abee198dd821b0b17a198a8f.eot  76.5 kB
  1dc35d25e61d819a9c357074014867ab.ttf   153 kB
 c8ddf1e5e5bf3682bc7bebf30f394148.woff  90.4 kB
e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2  71.9 kB
                            0.chunk.js    36 kB    0, 9
                            1.chunk.js  16.9 kB    1, 9
                            2.chunk.js  21.8 kB    2, 9
                            3.chunk.js  9.87 kB    3, 9
                            4.chunk.js  14.5 kB    4, 9
                            5.chunk.js  11.9 kB    5, 9
                        main.bundle.js  4.42 MB    6, 9  [emitted]  main
  d7c639084f684d66a1bc66855d193ed8.svg   392 kB
                     scripts.bundle.js   466 kB    8, 9             scripts
                             inline.js  5.53 kB       9             inline
                                 0.map  30.7 kB    0, 9
                                 1.map    15 kB    1, 9
                                 2.map  18.8 kB    2, 9
                                 3.map  7.45 kB    3, 9
                                 4.map  13.3 kB    4, 9
                                 5.map  9.82 kB    5, 9
                            styles.map   236 kB    7, 9             styles
                           scripts.map   576 kB    8, 9             scripts
                            inline.map  5.59 kB       9             inline
                              main.map  4.66 MB    6, 9  [emitted]  main
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  3.8 kB       0
webpack: bundle is now VALID.

[sasxa]

@filipesilva I also noticed rebuilds are about two times faster when I upgraded from beta.16 to beta.17; with average of 4 seconds.

I'm still new to webpack world, so I don't yet really understand how things work internally, but after a quick search I found TypeStrong/ts-loader#78. Is this what's slowing down CLI's build process? I used custom gulp build process few months ago and had average 250ms rebuild times, so even 3-6 seconds with CLI is quite a setback ;(

Also, bit off topic, is it possible to isolate app code from vendor code in dev builds? Would that speed things up?

[guiomie]

250ms would be like a dream!

@filipesilva if I add all the ms in your run extract, we get: 3651ms total. There is still a 3 seconds missing right?

When I run ng-serve, change some code, save my file, the change from "webpack: bundle is now VALID" to "webpack: bundle is now INVALID", takes a few second. Could this be optimized also?

[filipesilva]

@sasxa we don't use ts-loader, but I skimmed the issue and didn't find anything we could apply to the CLI.

@guiomie I am not too sure of how the numbers add up. All of that is handed over to webpack.

I also asked @TheLarkInn and there seem to be some incoming Webpack 2 optimizations that would help with speed.

[asadsahi]

@filipesilva yes I can confirm that rebuilds are somewhere taking same amount of time and I also suspect its somewhere in webpack because I am having similar rebuild times in another non-cli based project based on webpack 2.

@sasxa webpack dll is for the purpose of separating vendor from application files for speeding up rebuilds.

[ipassynk]

I see the similar issue and "ng serve" on any small sccs change reports these optimizations steps. It is very very slow. See the output:

webpack: bundle is now VALID.
webpack: bundle is now INVALID.
536ms building modules
6ms sealing
0ms optimizing
1ms basic module optimization
126ms module optimization
1ms advanced module optimization
25ms basic chunk optimization
0ms chunk optimization
0ms advanced chunk optimization
13ms module and chunk tree optimization
79ms module reviving
2ms module order optimization
5ms module id optimization
4ms chunk reviving
1ms chunk order optimization
16ms chunk id optimization
47ms hashing
1ms module assets processing
1ms chunk assets processing
4ms additional chunk assets processing
0ms recording
0ms additional asset processing
0ms chunk asset optimization
825ms asset optimization
5ms emitting

ng version:

angular-cli: 1.0.0-beta.16
node: 4.5.0
os: darwin x64

[hnrchrdl]

Ok, I could fix that (with the fix of beeman described in #4329).
But now, rebuild times are back at 15s with beta 28 on windows 7.

[Laurensvdmaas]

Great job!

From 2s-4s time to 300-600ms

[szilarddavid]

Massive improvement for me on Windows 10

beta26: ~12s
beta28: ~2s

Thanks!

[hccampos]

While it's better with the new cli, here it is...

webpack: bundle is now VALID.
webpack: bundle is now INVALID.
Hash: 4e3ed080d33362fa5a97                                                         
Time: 14510ms
chunk    {0} 0.chunk.js, 0.bundle.map 2.82 MB {1} {2} {3} {4} {6} [rendered]
chunk    {1} 1.chunk.js, 1.bundle.map 2.81 MB {0} {2} {3} {4} {6} [rendered]
chunk    {2} 2.chunk.js, 2.bundle.map 2.24 MB {0} {1} {3} {4} {6} [rendered]
chunk    {3} 3.chunk.js, 3.bundle.map 2.66 MB {0} {1} {2} {4} {6} [rendered]
chunk    {4} 4.chunk.js, 4.bundle.map 1.32 MB {0} {1} {2} {3} {6}
chunk    {5} polyfills.bundle.js, polyfills.bundle.map (polyfills) 418 kB {9} [initial]
chunk    {6} main.bundle.js, main.bundle.map (main) 143 kB {8} [initial] [rendered]
chunk    {7} styles.bundle.js, styles.bundle.map (styles) 412 kB {9} [initial]
chunk    {8} vendor.bundle.js, vendor.bundle.map (vendor) 4.72 MB [initial]
chunk    {9} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry]
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
Hash: 4e3ed080d33362fa5a97                                                         
Time: 6314ms
chunk    {0} 0.chunk.js, 0.bundle.map 2.82 MB {1} {2} {3} {4} {6}
chunk    {1} 1.chunk.js, 1.bundle.map 2.81 MB {0} {2} {3} {4} {6}
chunk    {2} 2.chunk.js, 2.bundle.map 2.24 MB {0} {1} {3} {4} {6}
chunk    {3} 3.chunk.js, 3.bundle.map 2.66 MB {0} {1} {2} {4} {6}
chunk    {4} 4.chunk.js, 4.bundle.map 1.32 MB {0} {1} {2} {3} {6}
chunk    {5} polyfills.bundle.js, polyfills.bundle.map (polyfills) 418 kB {9} [initial]
chunk    {6} main.bundle.js, main.bundle.map (main) 143 kB {8} [initial]
chunk    {7} styles.bundle.js, styles.bundle.map (styles) 412 kB {9} [initial]
chunk    {8} vendor.bundle.js, vendor.bundle.map (vendor) 4.72 MB [initial]
chunk    {9} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry]
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
Hash: 4e3ed080d33362fa5a97                                                         
Time: 5401ms
chunk    {0} 0.chunk.js, 0.bundle.map 2.82 MB {1} {2} {3} {4} {6}
chunk    {1} 1.chunk.js, 1.bundle.map 2.81 MB {0} {2} {3} {4} {6}
chunk    {2} 2.chunk.js, 2.bundle.map 2.24 MB {0} {1} {3} {4} {6}
chunk    {3} 3.chunk.js, 3.bundle.map 2.66 MB {0} {1} {2} {4} {6}
chunk    {4} 4.chunk.js, 4.bundle.map 1.32 MB {0} {1} {2} {3} {6}
chunk    {5} polyfills.bundle.js, polyfills.bundle.map (polyfills) 418 kB {9} [initial]
chunk    {6} main.bundle.js, main.bundle.map (main) 143 kB {8} [initial]
chunk    {7} styles.bundle.js, styles.bundle.map (styles) 412 kB {9} [initial]
chunk    {8} vendor.bundle.js, vendor.bundle.map (vendor) 4.72 MB [initial]
chunk    {9} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry]
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
Hash: 4e3ed080d33362fa5a97                                                         
Time: 5380ms
chunk    {0} 0.chunk.js, 0.bundle.map 2.82 MB {1} {2} {3} {4} {6}
chunk    {1} 1.chunk.js, 1.bundle.map 2.81 MB {0} {2} {3} {4} {6}
chunk    {2} 2.chunk.js, 2.bundle.map 2.24 MB {0} {1} {3} {4} {6}
chunk    {3} 3.chunk.js, 3.bundle.map 2.66 MB {0} {1} {2} {4} {6}
chunk    {4} 4.chunk.js, 4.bundle.map 1.32 MB {0} {1} {2} {3} {6}
chunk    {5} polyfills.bundle.js, polyfills.bundle.map (polyfills) 418 kB {9} [initial]
chunk    {6} main.bundle.js, main.bundle.map (main) 143 kB {8} [initial]
chunk    {7} styles.bundle.js, styles.bundle.map (styles) 412 kB {9} [initial]
chunk    {8} vendor.bundle.js, vendor.bundle.map (vendor) 4.72 MB [initial]
chunk    {9} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry]
webpack: bundle is now VALID.

First run is with a single line change, the others are without any changes at all. With https://github.com/AngularClass/angular2-webpack-starter the time goes to 1s (sometimes less), since it uses the DLLplugin (my guess as to the reason). Unfortunately we can't easily switch over because we are making heavy use of the cli's environments and testing setup, and it would be better to use the "official" setup.

Anyway, we might be sort of a special case since we are loading most of RxJS, ThreeJS, Openlayers, D3, crypto-js, lodash, turf and a bunch more.

[guiomie]

Hi, just wanted to say that I upgraded from beta 18 to 1.0.0 RC1, and the performance increase is spectacular, went from average rebuild of ~3-4 seconds to ~600ms-1000ms. I run "ng build --watch". Great job on getting this to an acceptable level.

I've got an Asus Zenbook 12gb ram, SSD.

[jmlivingston]

I would also be remiss without giving serious kudos to the team. I've been updating regularly over the last few months and the last few builds have shown a massive performance increase. Huge thanks all!

[albandaft]

Totally agree with John. Great work! Thanks.

…

On Mon, Mar 6, 2017 at 1:52 AM, John Livingston ***@***.***> wrote: I would also be remiss without giving serious kudos to the team. I've been updating regularly over the last few months and the last few builds have shown a massive performance increase. Huge thanks all! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1980 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AV1APdJ3JPHglkLsZZmR-FkicvzyjGTGks5ri2bJgaJpZM4J07P9> .

-- Alban Xhaferllari PHP Developer User Team

[filipesilva]

We aim to please 😄

[hanvyj]

I'm seeing 40-60 second build times with rc4, thought this was normal...

[hccampos]

@hanvyj build or rebuild? Our build times are now at nearly two minutes. Rebuilds are at 3s for no changes up to 30s in some cases. Did some profiling and it is mostly the source maps which are insanely slow. Disable them and builds become way faster...while debugging becomes a nightmare. All in all, you are still quite lucky I think. If things get really bad, there is always the option of ejecting. We have been considering it for a while.

[hanvyj]

Rebuild. The original build is a little longer. I've seen it as low as 46, but just then it was 88:

I'll try enabling source maps only if I'm doing some serious debugging. Thanks.

There's probably some other optimizations I can do, I'll google around a bit.

[clydin]

@hanvyj What's your command line look like?

[hanvyj]

I run it with an NPM command that calls "ng serve --aot=true --proxy-config proxy.conf.json":

"startNoServer": "concurrently --kill-others \"ng serve --aot=true --proxy-config proxy.conf.json\"",

I played with a project that split the vendor bundle into a separate webpack script that didn't watch for changes. (it's rarely changed), I think it was all dealing with webpack without the CLI though. Is something like that possible with the CLI (it adds so much functionality and ease of use I'd take it over a faster build and setting up webpack myself!)

[hccampos]

That explains it. AoT is extremely slow, too slow to be used while developing.

[hanvyj]

Ah, so I should turn it off when developing. I guess I'd have to be careful to not cause any changes that would break an AoT production build. Gets it down to 36 seconds build time, 5 second rebuild time - which is great!

I guess I'll have to be careful not to do anything that could break AoT though (interestingly, turning it off highlighted a few errors, a service not marked as @Injectable(), no idea how that worked with AoT on!).

Seems my method of creating Modal dialogs is completely broken, but there's a guide here I'll give a good read: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#jit-dev-aot-prod

[cyberprodigy]

I have hello world project created with
ng new HelloWorld

then I run ng build.
Takes 62 seconds.

Then I change a line in hello world
I run ng build, and it takes 62 seconds again. Is this normal? Is this how you develop?

[clydin]

@cyberprodigy please open a separate issue including the information from the template so that we can fully assist you. Please also be sure that you are using the latest version (1.0.0 at this time).
Thank you.

[MickL]

@cyberprodigy it takes like 1 second on my machine with latest cli. You may dont have the latest installed.

[ipassynk]

I upgraded a project from v2.4.10([email protected]) to 4.0.0 ( "@angular/cli": "1.0.0") and unfortunately don't see much improvements

here is stat from new cli:

> [email protected] start /projects/ctc/5390-promo/promo-client
> ng serve --host 0.0.0.0 --port 5555 --proxy-config proxy.conf.json -o

** NG Live Development Server is running on http://0.0.0.0:5555 **
 11% building modules 15/26 modules 11 active ...ode_modules/style-loader/addStyles.jswebpack: wait until bundHash: 4c427ff407b3e5292822                                                            

Time: 27387ms

chunk    {0} main.bundle.js, main.bundle.js.map (main) 1 MB {3} [initial] [rendered]
chunk    {1} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 295 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.26 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

and here is from old one:

> [email protected] start /Users/juliapassynkova/ctc/projects/5390-promo/promo-client
> ng serve --host 0.0.0.0 --port 5555 --proxy-config proxy.conf.json -o

** NG Live Development Server is running on http://0.0.0.0:5555. **                                                  10% building modules 3/3 modules 0 active[HPM] Proxy created: /api  ->  http://localhost:8080/promo
[HPM] Proxy created: /oauth  ->  http://localhost:8080/promo                                                   11% building modules 15/27 modules 12 active ...odules/bootstrap/dist/js/bootstrap.jswebpack: wait until bundle finished: /                                                                         11% building modules 16/30 modules 14 active ...s/webpack-dev-server/client/socket.js(node:6412) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.             22872ms building modules                              5ms add04223ms 131ms asse116ms emitting
Hash: 8531c2e494bb70e33827
Version: webpack 2.1.0-beta.25

Time: 29684ms
                                 Asset       Size  Chunks             Chunk Names
 fee66e712a8a08eef5805a46892932ad.woff      98 kB          [emitted]  
  bce071e976865da511003c50333620c5.eot    2.52 kB          [emitted]  
  b0aebd744ce7adb780a9342fd395535e.svg    2.67 kB          [emitted]  
  89889688147bd7575d6327160d64e760.svg     109 kB          [emitted]  
  674f50d287a8c48dc19ba404d20fe713.eot     166 kB          [emitted]  
  912ec66d7572ff821749319396470bde.svg     444 kB          [emitted]  
  e18bbf611f2a2e43afc071aa2f4e1512.ttf    45.4 kB          [emitted]  
 fa2772327f55d8198301fdb8bcfc8158.woff    23.4 kB          [emitted]  
448c34a56d699c29117adc64c43affeb.woff2      18 kB          [emitted]  
  b06871f281fee6b241d60582ae9369b9.ttf     166 kB          [emitted]  
af7ae505a9eed503f8b8e6982036873e.woff2    77.2 kB          [emitted]  
  f4769f9bdb7466be65088239c12046d1.eot    20.1 kB          [emitted]  
  d329cc8b34667f114a95422aaad1b063.ttf     162 kB          [emitted]  
  ac3f799d5bbaf5196fab15ab8de8431c.ttf     163 kB          [emitted]  
                        main.bundle.js    7.46 MB    0, 3  [emitted]  main
                      styles.bundle.js     295 kB    1, 3  [emitted]  styles
                     scripts.bundle.js     376 kB    2, 3  [emitted]  scripts
                      inline.bundle.js    5.53 kB       3  [emitted]  inline
                              main.map     7.9 MB    0, 3  [emitted]  main
                            styles.map     397 kB    1, 3  [emitted]  styles
                           scripts.map     462 kB    2, 3  [emitted]  scripts
                            inline.map     5.6 kB       3  [emitted]  inline
                            index.html  783 bytes          [emitted]  
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  3.17 kB       0       
webpack: Compiled successfully.
[default] Checking started in a separate process...
[default] Ok, 2.852 sec.

[jmlivingston]

@cyberprodigy - If you are running it locally for development purposes, you should be using "ng serve", not "ng build".

[flackjap]

I'm having the same issues.

Build takes 30 seconds on average.
Yes, I'm using ng serve, without any options and it was slow from the very beginning (clean ng cli).

I'm using Vagrant for development environment. I guess it could slow it down a bit, but I wouldn't expect this much.

It seems that it is compiling all modules everytime (even those from /node_modules) and doing chunk asset optimizations (probably for all assets). Is it developed that way or I am missing something in my configuration?

---

@angular/cli: 1.0.0
node: 6.10.0
os: linux x64
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.2

[clydin]

Ng serve watches for changes and rebuilds only the changed chunks automatically. Killing the process each time forces a full build.

[hansl]

What @clydin said, basically. Build times will not improve much (although webpack itself is reporting improvements so we shall see); rebuilding time should be much faster. Keep your process running and you'll see improvements.

Locking this conversation down. This issue has been resolved a long time ago.