Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I speed up Angular CLI Live Reload - 1-2 minutes per change

I have been using AngularCLI for my ng2 project and for the last few months it has been great. In the last few weeks, it seems to be getting slower and slower.

If I make a simple HTML change it now takes between 1 and 2 minutes to run with "ng serve" and refresh the browser. NodeJS consumes a lot of RAM and CPU when this happens.

I ran the same code and process on a new laptop next to me and it takes around 20 seconds. I am currently using CLI 1.0.0-beta.21 on Windows Home 10. I have 8 gigs ram/SSD/i7.

I have tried:

  • Deleting and reinstalling Node Modules
  • Upgrading to latest CLI version
  • Turning off Windows Defender (and excluding Node/and proj folder from scans)

All to no avail.

Here is the output:

webpack: bundle is now INVALID.
6938ms building modules
72ms sealing
4ms optimizing
1ms basic module optimization
1074ms module optimization
5ms advanced module optimization
149ms basic chunk optimization
1ms chunk optimization
1ms advanced chunk optimization
702ms module and chunk tree optimization
2202ms module reviving
55ms module order optimization
71ms module id optimization
181ms chunk reviving
20ms chunk order optimization
806ms chunk id optimization
544ms hashing
7ms module assets processing
924ms chunk assets processing
45ms additional chunk assets processing
3ms recording
1ms additional asset processing
22536ms chunk asset optimization
1063ms asset optimization
545ms emitting
[default] Checking started in a separate process...
Hash: dedfa5a221b1992287d6
Version: webpack 2.1.0-beta.25
Time: 88912ms
                               Asset     Size  Chunks             Chunk Names
bb73d75e8296ab5bc0a26b5d82006129.png  74.3 kB
                      main.bundle.js  7.26 MB    0, 2  [emitted]  main
                    styles.bundle.js  43.2 kB    1, 2             styles
                    inline.bundle.js  5.54 kB       2             inline
                   styles.bundle.map  58.7 kB    1, 2             styles
                   inline.bundle.map   5.6 kB       2             inline
                     main.bundle.map  8.03 MB    0, 2  [emitted]  main
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  8.11 kB       0
webpack: bundle is now VALID.
like image 489
Rodney Avatar asked Dec 21 '16 21:12

Rodney


People also ask

Does angular have hot reload?

Angular (and really any of the major JavaScript UI frameworks that integrate with the WebPack Dev Server) provides a built-in Live Reload Web server that makes it quick and easy to see UI changes updated in the browser as soon as you make a change to your code, HTML or CSS content.

What is the use of HMR in Angular 11?

HRM is Webpack feature which is also used by Angular11 team since Angular build system is Webpack based. HRM feature enables development faster because it updates limited resource after you save code in project.


1 Answers

For anybody in 2021, you can add --source-map=false it reduced my reload time by half.

like image 186
Han Che Avatar answered Nov 09 '22 08:11

Han Che