Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Build is abysmally slow with experimentalWatchApi enabled #746

Closed
MLoughry opened this issue Mar 16, 2018 · 4 comments
Closed

Build is abysmally slow with experimentalWatchApi enabled #746

MLoughry opened this issue Mar 16, 2018 · 4 comments

Comments

@MLoughry
Copy link
Contributor

Expected Behaviour

experimentalWatchApi should, ideally, make dev builds faster

Actual Behaviour

The initial build time is 25-35x slower on my personal project when experimentalWatchApi is enabled, as compared to when no options are provided at all.

Steps to Reproduce the Problem

Using ts-loader@4.0.1, enable the experimentalWatchApi option in your webpack config.

Location of a Minimal Repository that Demonstrates the Issue.

I don't have a minimal repro, as the issue seems to be an O(kn) issue that's not noticeable with small repositories.

When I tried running this on my work repository, I had to kill it before it ever made any real progress. On a much smaller personal project, I got the following traces:

With experimentalWatchApi

$ webpack -d --watch --profile --progress
  0% compiling
Webpack is watching the files…
                                                                                                                                                                                             45078ms building modules
6ms finish module graph
1ms sealing
0ms basic dependencies optimization
1ms dependencies optimization
0ms advanced dependencies optimization
10ms after dependencies optimization
0ms optimizing
0ms basic module optimization
1ms module optimization
0ms advanced module optimization
0ms after module optimization
1ms basic chunk optimization
0ms chunk optimization
10ms advanced chunk optimization
1ms after chunk optimization
0ms module and chunk tree optimization
0ms after module and chunk tree optimization
1ms basic chunk modules optimization
0ms chunk modules optimization
0ms advanced chunk modules optimization
0ms after chunk modules optimization
0ms module reviving
0ms module order optimization
0ms advanced module order optimization
3ms before module ids
1ms module ids
3ms module id optimization
0ms chunk reviving
0ms chunk order optimization
1ms before chunk ids
0ms chunk id optimization
3ms after chunk id optimization
3ms record modules
1ms record chunks
15ms hashing
1ms after hashing
0ms record hash
0ms module assets processing
193ms chunk assets processing
2ms additional chunk assets processing
0ms recording
0ms additional asset processing
1ms chunk asset optimization
0ms after chunk asset optimization
0ms asset optimization
0ms after asset optimization
134548ms after seal
156ms emitting
Hash: 1ae83539a98df740aced
Version: webpack 4.1.1
Time: 180116ms
Built at: 2018-3-15 21:48:35
      Asset       Size  Chunks                    Chunk Names
pshelper.js   7.16 MiB    main  [emitted]  [big]  main
 index.html  439 bytes          [emitted]
Entrypoint main [big] = pshelper.js
[./node_modules/css-loader/index.js??ref--5-1!./node_modules/sass-loader/lib/loader.js!./src/styles/globalStyles.scss] ./node_modules/css-loader??ref--5-1!./node_modules/sass-loader/lib/loader.js!./src/styles/globalStyles.scss 2.12 KiB {main} [built]
       [./src/index.tsx] 3107ms -> [./src/styles/globalStyles.scss] 1364ms -> factory:222ms building:21ms = 4714ms
[./src/app/index.ts] 52 bytes {main} [built]
       [./src/index.tsx] 3107ms -> [./src/bootstrap/index.ts] 1364ms -> [./src/bootstrap/initialization/bootstrap.tsx] 1064ms -> factory:1846ms building:874ms = 8255ms
[./src/auth/index.ts] 66 bytes {main} [built]
       [./src/index.tsx] 3107ms -> [./src/bootstrap/index.ts] 1364ms -> [./src/bootstrap/initialization/bootstrap.tsx] 1064ms -> [./src/app/index.ts] 2720ms -> [./src/app/components/App.tsx] 2198ms -> factory:10087ms building:7838ms dependencies:7855ms = 36233ms
[./src/bootstrap/index.ts] 68 bytes {main} [built]
       [./src/index.tsx] 3107ms -> factory:414ms building:950ms = 4471ms
[./src/bootstrap/initialization/bootstrap.tsx] 467 bytes {main} [built]
       [./src/index.tsx] 3107ms -> [./src/bootstrap/index.ts] 1364ms -> factory:7ms building:1057ms = 5535ms
[./src/bootstrap/initialization/initializeFirebase.ts] 647 bytes {main} [built]
       [./src/index.tsx] 3107ms -> [./src/bootstrap/index.ts] 1364ms -> [./src/bootstrap/initialization/bootstrap.tsx] 1064ms -> factory:1846ms building:874ms = 8255ms
[./src/bootstrap/initialization/initializeTheme.ts] 2.68 KiB {main} [built]
       [./src/index.tsx] 3107ms -> [./src/bootstrap/index.ts] 1364ms -> [./src/bootstrap/initialization/bootstrap.tsx] 1064ms -> factory:1846ms building:874ms = 8255ms
[./src/data/index.ts] 608 bytes {main} [built]
       [./src/index.tsx] 3107ms -> [./src/bootstrap/index.ts] 1364ms -> [./src/bootstrap/initialization/bootstrap.tsx] 1064ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 2720ms -> factory:1029ms building:950ms = 10234ms
[./src/data/orchestrators/onAuthenticateUser.ts] 497 bytes {main} [built]
       [./src/index.tsx] 3107ms -> [./src/bootstrap/index.ts] 1364ms -> [./src/bootstrap/initialization/bootstrap.tsx] 1064ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 2720ms -> [./src/data/index.ts] 1979ms -> factory:1143ms building:9815ms dependencies:16030ms = 37222ms
[./src/data/orchestrators/onCreateTeam.ts] 696 bytes {main} [built]
       [./src/index.tsx] 3107ms -> [./src/bootstrap/index.ts] 1364ms -> [./src/bootstrap/initialization/bootstrap.tsx] 1064ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 2720ms -> [./src/data/index.ts] 1979ms -> factory:1143ms building:9815ms dependencies:16030ms = 37222ms
[./src/data/orchestrators/onSetTeamId.ts] 634 bytes {main} [built]
       [./src/index.tsx] 3107ms -> [./src/bootstrap/index.ts] 1364ms -> [./src/bootstrap/initialization/bootstrap.tsx] 1064ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 2720ms -> [./src/data/index.ts] 1979ms -> factory:1143ms building:9815ms dependencies:16030ms = 37222ms
[./src/data/store.ts] 187 bytes {main} [built]
       [./src/index.tsx] 3107ms -> [./src/bootstrap/index.ts] 1364ms -> [./src/bootstrap/initialization/bootstrap.tsx] 1064ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 2720ms -> [./src/data/index.ts] 1979ms -> factory:1143ms building:9815ms dependencies:16030ms = 37222ms
[./src/data/utils/getNewId.ts] 171 bytes {main} [built]
       [./src/index.tsx] 3107ms -> [./src/bootstrap/index.ts] 1364ms -> [./src/bootstrap/initialization/bootstrap.tsx] 1064ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 2720ms -> [./src/data/index.ts] 1979ms -> factory:1143ms building:9815ms dependencies:16030ms = 37222ms
[./src/index.tsx] 117 bytes {main} [built]
       factory:51ms building:3056ms = 3107ms
[./src/styles/globalStyles.scss] 1.24 KiB {main} [built]
       [./src/index.tsx] 3107ms -> factory:414ms building:950ms = 4471ms
    + 368 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 812 bytes {0} [built]
           factory:32ms building:22ms = 54ms
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
           [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 54ms -> [./node_modules/lodash/lodash.js] 3190ms -> factory:4ms building:4ms = 3252ms
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
           [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 54ms -> [./node_modules/lodash/lodash.js] 3190ms -> factory:4ms building:4ms = 3252ms
        + 1 hidden module

With no options provided:

$ webpack -d --watch --profile --progress
  0% compiling
Webpack is watching the files…
                                                                                                                                                                                             4719ms building modules
5ms finish module graph
2ms sealing
4ms basic dependencies optimization
0ms dependencies optimization
0ms advanced dependencies optimization
6ms after dependencies optimization
0ms optimizing
0ms basic module optimization
0ms module optimization
0ms advanced module optimization
1ms after module optimization
0ms basic chunk optimization
1ms chunk optimization
12ms advanced chunk optimization
1ms after chunk optimization
0ms module and chunk tree optimization
0ms after module and chunk tree optimization
0ms basic chunk modules optimization
4ms chunk modules optimization
1ms advanced chunk modules optimization
0ms after chunk modules optimization
0ms module reviving
0ms module order optimization
2ms advanced module order optimization
7ms before module ids
1ms module ids
3ms module id optimization
0ms chunk reviving
0ms chunk order optimization
1ms before chunk ids
0ms chunk id optimization
2ms after chunk id optimization
9ms record modules
1ms record chunks
26ms hashing
0ms after hashing
1ms record hash
1ms module assets processing
251ms chunk assets processing
9ms additional chunk assets processing
0ms recording0ms additional asset processing
1ms chunk asset optimization
1ms after chunk asset optimization0ms asset optimization
0ms after asset optimization
132ms after seal88ms emitting
Hash: 1c673a750f6eec864d1d
Version: webpack 4.1.1
Time: 5352ms
Built at: 2018-3-15 21:51:47
      Asset       Size  Chunks                    Chunk Names
pshelper.js   7.16 MiB    main  [emitted]  [big]  main
 index.html  439 bytes          [emitted]
Entrypoint main [big] = pshelper.js
[./node_modules/css-loader/index.js??ref--5-1!./node_modules/sass-loader/lib/loader.js!./src/styles/globalStyles.scss] ./node_modules/css-loader??ref--5-1!./node_modules/sass-loader/lib/loader.js!./src/styles/globalStyles.scss 2.12 KiB {main} [built]
       [./src/index.tsx] 2028ms -> [./src/styles/globalStyles.scss] 533ms -> factory:248ms building:20ms = 2829ms
[./src/app/index.ts] 52 bytes {main} [built]
       [./src/index.tsx] 2028ms -> [./src/bootstrap/index.ts] 533ms -> [./src/bootstrap/initialization/bootstrap.tsx] 163ms -> factory:28ms building:3ms = 2755ms
[./src/auth/index.ts] 66 bytes {main} [built]
       [./src/index.tsx] 2028ms -> [./src/bootstrap/index.ts] 533ms -> [./src/bootstrap/initialization/bootstrap.tsx] 163ms -> [./src/app/index.ts] 31ms -> [./src/app/components/App.tsx] 201ms -> factory:392ms building:29ms dependencies:142ms = 3519ms
[./src/bootstrap/index.ts] 68 bytes {main} [built]
       [./src/index.tsx] 2028ms -> factory:508ms building:25ms = 2561ms
[./src/bootstrap/initialization/bootstrap.tsx] 467 bytes {main} [built]
       [./src/index.tsx] 2028ms -> [./src/bootstrap/index.ts] 533ms -> factory:8ms building:155ms = 2724ms
[./src/bootstrap/initialization/initializeFirebase.ts] 647 bytes {main} [built]
       [./src/index.tsx] 2028ms -> [./src/bootstrap/index.ts] 533ms -> [./src/bootstrap/initialization/bootstrap.tsx] 163ms -> factory:28ms building:3ms = 2755ms
[./src/bootstrap/initialization/initializeTheme.ts] 2.68 KiB {main} [built]
       [./src/index.tsx] 2028ms -> [./src/bootstrap/index.ts] 533ms -> [./src/bootstrap/initialization/bootstrap.tsx] 163ms -> factory:28ms building:3ms = 2755ms
[./src/data/index.ts] 608 bytes {main} [built]
       [./src/index.tsx] 2028ms -> [./src/bootstrap/index.ts] 533ms -> [./src/bootstrap/initialization/bootstrap.tsx] 163ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 31ms -> factory:185ms building:17ms = 2957ms
[./src/data/orchestrators/onAuthenticateUser.ts] 497 bytes {main} [built]
       [./src/index.tsx] 2028ms -> [./src/bootstrap/index.ts] 533ms -> [./src/bootstrap/initialization/bootstrap.tsx] 163ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 31ms -> [./src/data/index.ts] 202ms -> factory:78ms building:91ms dependencies:347ms = 3473ms
[./src/data/orchestrators/onCreateTeam.ts] 696 bytes {main} [built]
       [./src/index.tsx] 2028ms -> [./src/bootstrap/index.ts] 533ms -> [./src/bootstrap/initialization/bootstrap.tsx] 163ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 31ms -> [./src/data/index.ts] 202ms -> factory:78ms building:91ms dependencies:347ms = 3473ms
[./src/data/orchestrators/onSetTeamId.ts] 634 bytes {main} [built]
       [./src/index.tsx] 2028ms -> [./src/bootstrap/index.ts] 533ms -> [./src/bootstrap/initialization/bootstrap.tsx] 163ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 31ms -> [./src/data/index.ts] 202ms -> factory:78ms building:91ms dependencies:347ms = 3473ms
[./src/data/store.ts] 187 bytes {main} [built]
       [./src/index.tsx] 2028ms -> [./src/bootstrap/index.ts] 533ms -> [./src/bootstrap/initialization/bootstrap.tsx] 163ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 31ms -> [./src/data/index.ts] 202ms -> factory:78ms building:91ms dependencies:347ms = 3473ms
[./src/data/utils/getNewId.ts] 171 bytes {main} [built]
       [./src/index.tsx] 2028ms -> [./src/bootstrap/index.ts] 533ms -> [./src/bootstrap/initialization/bootstrap.tsx] 163ms -> [./src/bootstrap/initialization/initializeFirebase.ts] 31ms -> [./src/data/index.ts] 202ms -> factory:78ms building:91ms dependencies:347ms = 3473ms
[./src/index.tsx] 117 bytes {main} [built]
       factory:42ms building:1986ms = 2028ms
[./src/styles/globalStyles.scss] 1.24 KiB {main} [built]
       [./src/index.tsx] 2028ms -> factory:508ms building:25ms = 2561ms
    + 368 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 812 bytes {0} [built]
           factory:26ms building:18ms = 44ms
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
           [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 44ms -> [./node_modules/lodash/lodash.js] 2185ms -> factory:4ms building:4ms = 2237ms
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
           [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 44ms -> [./node_modules/lodash/lodash.js] 2185ms -> factory:4ms building:4ms = 2237ms
        + 1 hidden module
@MLoughry
Copy link
Contributor Author

@sheetalkamat, would you have any insight on the regression?

@sheetalkamat
Copy link
Contributor

Would need to add some logs and investigate to see whats causing this. Do you have repro project that I can look into.

@MLoughry
Copy link
Contributor Author

https://github.com/MLoughry/puzzle-safari-helper

@sheetalkamat
Copy link
Contributor

Could repro it on your project, Investigating...

@sheetalkamat sheetalkamat mentioned this issue Mar 16, 2018
Merged
johnnyreilly pushed a commit that referenced this issue Mar 17, 2018
@sheetalkamat @johnnyreilly
Do not create program multiple times when there are no changes in fil…
caec556 
…es (#747)

TypeScript cant tell if there is invalidation because of custom module resolution, that means it needs to create new program whenver asked for
Fixes #746
This was referenced Mar 19, 2018
Closed
Merged
Closed
Closed
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sheetalkamat @MLoughry