Angular 6.04 ,building sourceMap cause ng serve slow

[xujiesh0510]

Bug Report or Feature Request (mark with an x)

- [ x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [x ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular CLI: 6.1.2 Node: v8.11.3 npm: 6.2.0

Repro steps

### " 92% after chunk asset optimization SourceMapDevToolPlugin main.js generate SourceMap " too slow

After upgrade angular to 6.04, ng serve takes 5 minutes building source map.( SourceMapDevToolPlugin is very slow). Modifying source code take 5 minutes to regenerate source map too.

Is there any way to decrease the time building source map during ng serve ? I don't want to use --source-map=false option. use --max-old-space-size does not do any help.

The log given by the failure

Desired functionality

Mention any other details that might be useful

[xujiesh0510]

part of my package.json

"dependencies": { "@amcharts/amcharts3-angular": "2.0.3", "@angular/animations": "^6.0.4", "@angular/common": "^6.0.4", "@angular/compiler": "^6.0.4", "@angular/core": "^6.0.4", "@angular/forms": "^6.0.4", "@angular/http": "^6.0.4", "@angular/platform-browser": "^6.0.4", "@angular/platform-browser-dynamic": "^6.0.4", "@angular/platform-server": "^6.0.4", "@angular/router": "^6.0.4", "@aspnet/signalr": "^1.0.0", "@fancyapps/fancybox": "^3.1.25", "@ng-select/ng-select": "^2.3.5", "abp-ng2-module": "^3.0.0", "abp-web-resources": "^3.7.0", "amcharts": "3.14.5", "angular-2-dropdown-multiselect": "^1.8.0", "angular2-counto": "^1.2.5", "angular2-logger": "0.7.0", "animate.css": "3.5.2", "autosize": "^4.0.0", "block-ui": "^2.70.1", "blueimp-file-upload": "^9.19.1", "bootstrap": "^4.0.0", "bootstrap-daterangepicker": "^2.1.25", "bootstrap-hover-dropdown": "^2.2.1", "bootstrap-markdown": "^2.10.0", "bootstrap-maxlength": "^1.6.0", "bootstrap-notify": "^3.1.3", "bootstrap-select": "1.12.4", "bootstrap-switch": "^3.3.4", "bootstrap-timepicker": "^0.5.2", "bootstrap-touchspin": "^3.1.1", "bootstrap4-datetimepicker": "^5.2.3", "bower": "", "chart.js": "^2.6.0", "chartist": "^0.11.0", "core-js": "^2.4.1", "css-toggle-switch": "^4.0.3", "d3": "3.5.12", "d3-drag": "^1.2.1", "d3-selection": "^1.3.0", "datamaps": "^0.5.8", "del-cli": "^1.1.0", "detect-zoom": "^1.0.2", "dropzone": "^5.1.1", "easy-pie-chart": "^2.1.7", "famfamfam-flags": "^1.0.0", "fc-gui": "0.0.1-alpha.1", "flot": "^0.8.0-alpha", "font-awesome": "^4.7.0", "gmaps": "^0.4.24", "inputmask": "^3.3.7", "ion-rangeslider": "^2.2.0", "jasmine-spec-reporter": "^4.2.1", "jquery": "^3.2.1", "jquery-form": "^4.2.1", "jquery-migrate": "^3.0.0", "jquery-slimscroll": "^1.3.8", "jquery-sparkline": "^2.4.0", "jquery-validation": "^1.15.1", "jquery.counterup": "^2.1.0", "jquery.flot.tooltip": "^0.9.0", "jquery.inputmask": "^3.3.4", "jquery.uniform": "^4.2.0", "jqueryui": "^1.11.1", "jqvmap": "^1.5.1", "js-cookie": "^2.1.4", "js-url": "^2.3.0", "json2": "", "jstree": "^3.3.4", "karma": "^1.7.0", "localforage": "^1.5.0", "lodash": "^4.17.4", "malihu-custom-scrollbar-plugin": "^3.1.5", "moment": "^2.20.1", "moment-timezone": "^0.5.14", "morris.js": "^0.5.0", "mustache": "^2.3.0", "ng-recaptcha": "^4.0.0-beta.1", "ng2-file-upload": "^1.3.0", "ng2modules-easypiechart": "^0.0.4", "ng2modules-flot": "^0.0.1", "ngx-bootstrap": "^3.0.1", "ngx-color-picker": "4.5.0", "ngx-ui-switch": "^6.0.3", "nvd3": "^1.8.6", "pace-progress": "^1.0.2", "popper.js": "^1.12.5", "primeicons": "1.0.0-beta.9", "primeng": "6.0.0", "prismjs": "^1.8.1", "push.js": "1.0.4", "quill": "^1.3.0", "rangeslider.js": "^2.3.1", "raphael": "^2.2.7", "rtl-detect": "^1.0.0", "rxjs": "^6.2.0", "select2": "^4.0.3", "select2-bootstrap-theme": "0.1.0-beta.9", "simple-line-icons": "^2.4.1", "snapsvg": "0.5.1", "socicon": "^3.0.5", "spin.js": "^2.3.2", "summernote": "^0.8.6", "sweetalert": "^2.0.8", "tether": "^1.4.0", "timeago": "^1.6.1", "toastr": "^2.1.2", "topojson": "^3.0.2", "ts-helpers": "^1.1.2", "typeahead.js": "^0.11.1", "typescript": "2.7.2", "underscore": "^1.8.3", "urijs": "^1.19.0", "waypoints": "^4.0.1", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.0", "@angular/cli": "6.2.0-beta.0", "@angular/compiler-cli": "^6.0.4", "@angularclass/hmr": "^2.1.3", "@angularclass/hmr-loader": "^3.0.4", "@types/bootstrap": "^3.3.33", "@types/grecaptcha": "^2.0.31", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/jquery": "^3.2.12", "@types/jquery.blockui": "0.0.28", "@types/jqueryui": "1.11.32", "@types/jstree": "^3.3.34", "@types/lodash": "^4.14.62", "@types/moment": "^2.13.0", "@types/moment-timezone": "^0.5.4", "@types/morris.js": "^0.5.6", "@types/node": "^8.0.27", "@types/tether": "^1.4.2", "@types/toastr": "^2.1.33", "codelyzer": "^4.1.0", "d3-path": "^1.0.5", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "^4.2.1", "karma": "^1.7.0", "karma-chrome-launcher": "~2.2.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "nswag": "11.17.10", "protractor": "~5.1.2", "ts-node": "~3.3.0", "tslint": "^5.9.1", "typescript": "2.7.2" }

[KrakenTyio]

Same for as, release with source maps now takes 40-50min on jenkins before was about 15min

always stuck on SourceMapDevToolPlugin

Building by webpack and AngularCompilerPlugin

[xujiesh0510]

chunk {styles} styles.js, styles.js.map (styles) 984 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 12.4 MB [initial] [rendered]

Is it necessary to create vender.js.map (12,4MB) ?

[dkztv]

all 6+ angular-cli versions are crashed, fuckin 92% chunk... build 2+ minutes, serve breaks after recompiling, takes 12+ hours on jenkins; but for now using angular cli 1.7.4: webpack: Compiling... Time: 773ms webpack: Compiled successfully.

[aljasPOD]

We're also seeing a huge speed decrease in rebuilds on our project too, related to source maps.

Angular-cli 1.6.8 and angular 5.2.3, initial build with ng serve:

Time: 56588ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 19.6 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 901 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 686 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 9.49 MB [initial] [rendered]

Rebuild:

Date: 2018-08-29T10:15:57.764Z - Hash: 2287c76cf2eeee96f57c - Time: 11352ms
4 unchanged chunks
chunk {main} main.bundle.js (main) 19.6 MB [initial] [rendered]

On angular-cli 6.1.5, with angular 6.1.4 the same build takes much longer:

Time: 87672ms
chunk {main} main.js, main.js.map (main) 7.14 MB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 420 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 239 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.15 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

But the main issue we have is the rebuild, which has increased to over 4 times the previous time:

Date: 2018-08-29T10:49:00.517Z - Hash: 7464725cde21f7c58357 - Time: 47268ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 7.14 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

The only way I could reach acceptable rebuild speeds was with turning sourcemaps off, but that has other (obvious) side effects on our daily development work:

Date: 2018-08-29T10:59:11.359Z - Hash: 7464725cde21f7c58357 - Time: 2516ms
4 unchanged chunks
chunk {main} main.js (main) 7.14 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

Is there anything that can be done to keep the source maps and speed up the rebuild?

[alan-agius4]

Can you try to remove the package-lock and see if the problem persists?

Last week webpack-sources released a performance fix which is related to sourcemaps in webpack.

[aljasPOD]

For us the new webpack-sources update seems to improve the speed:

Initial build is back to the previous performance:

Time: 56654ms
chunk {main} main.js, main.js.map (main) 7.14 MB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 420 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 239 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.15 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

Rebuild is still a bit slower, but I'd say it's now in the acceptable region:

Date: 2018-09-04T13:48:10.374Z - Hash: 4799daa924af20604696 - Time: 14137ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 7.14 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

[michalczukm]

I can also confirm large performance improvement, Updated package-lock.json or yarn.lock.json to version "1.2.0" at webpack-sources node

webpack-sources@^1.0.1, webpack-sources@^1.1.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.2.0.tgz#18181e0d013fce096faf6f8e6d41eeffffdceac2"
  dependencies:
    source-list-map "^2.0.0"
    source-map "~0.6.1"

[xujiesh0510]

yeah. the solution ： just open the package.json, modify the "devDependencies" section, add line "webpack-sources": "1.2.0", just looks like code below: "devDependencies": { "webpack-sources": "1.2.0",

then run yarn install or npm install

take 14s . that's acceptable

[clydin]

Also a quick note that 1.2.0 will be the minimum required version in CLI 7.0.

[theNotoriousHxc]

How do i update the webpack-sources? Do i have to manually change the version of each in the yarn.lock or package.lock?

[frapa]

I have the same question actually. I have no "webpack-sources": "1.2.0", in package.json. How do I update?

[michalczukm]

@frapa please note that it should be only in yours package-lock.json or yarn.lock not in package.json. Its a @angular/cli dependency.

And yes - update it manually. Take a look at mine post above.

PS in @angular/cli 7.0.x its already 1.2.0 version for webpack-sources

[armanhussain7]

While doing ng serve in angular6 is very slow.. Anyone have suggestion regarding this.Please let me know.

[angular-automatic-lock-bot[bot]]

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