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