How do I make sense of why a very large, old ember app takes so long to build and rebuild?

#1

Hey friends! I could use some knowledgeable experience about how to take some next steps understanding why an app’s build and rebuild is so slow. I’ve looked through the indicators that I know of (ember build output and heimdall viz, accessible below) but I’m not sure how to translate those to next steps.

Are there resources on how to translate the information here to actions I can take? What’s the best indicator to choose to dig in on that will have the biggest payoff?

Initial Build:

Build successful (121613ms) – Serving on https://0.0.0.0:6002/editor/

Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
Babel (143)                                   | 80397ms (562 ms)
EslintValidationFilter (7)                    | 13904ms (1986 ms)
Concat (14)                                   | 7086ms (506 ms)

A rebuild example

Build successful (11539ms) – Serving on https://0.0.0.0:6002/editor/

Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
SourceMapConcat: Vendor JS (1)                | 5513ms
SnippetFinder (1)                             | 784ms
SassCompiler (2)                              | 732ms (366 ms)

Heimdall

Here is the heimdall output: https://cl.ly/0O3S2t2I1g1x

Dev build sizes

2.4M editor.css
1.6M editor.js
2.0M editor.map
25K test-support.css
461K test-support.js
577K test-support.map
1.1M tests.js
1.2M tests.map
112K vendor.css
8.3M vendor.js 😩
10M vendor.map

Prod build sizes

 - dist/assets/editor-1ffa2063f6ec890da0727be7472819a41.js: 1 MB (173.12 KB gzipped)
 - dist/assets/editor-a66025ec9b814a129c9b609dd198c8441.css: 656.82 KB (150.84 KB gzipped)
 - dist/assets/vendor-0718fe56cfd95090f6a14f9f0596c7141.js: 2.52 MB (609.09 KB gzipped)
 - dist/assets/vendor-17dbc3868d5d4ed4423eb372bac7febe1.css: 28.95 KB (8.04 KB gzipped)

This is all done on a 2013 macbook pro with a SSD:

18%20PM-242x104

#2

You don’t mention platform - those look like normal build times on Windows. :frowning:

#3

This is on a mac. I’ve updated the post to reflect it.

#4

You include initial and rebuild times, but I’m curious how the initial build time breaks down between “cold” and “warm” initial boot. Can you share the results of:

rm -rf node_modules
yarn # or npm ci
ember s # the time for this first build would be the "cold initial" time
<Ctrl-C>
ember s # the time for this would be the "warm initial" time

I’m also curious what the rebuild times are per file type. In the times you gave above, it seemed that both JS (for concat) and Sass were taking non-trivial time during rebuild, but I would have expected a .js file triggered rebuild to take essentially no time in Sass compilation.

#5

Could you also test with sourcemapping disabled? I’m not certain that this will affect the times too much, but its a useful point of information.

#6

Ok, here we go.

Cold initial

Build successful (121339ms) – Serving on https://0.0.0.0:6002/editor/

Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
Babel (142)                                   | 69188ms (487 ms)
EslintValidationFilter (7)                    | 17228ms (2461 ms)
Concat (13)                                   | 9255ms (711 ms)

Warm initial

Build successful (40283ms) – Serving on https://0.0.0.0:6002/editor/

Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
Babel (142)                                   | 8848ms (62 ms)
Concat (13)                                   | 6229ms (479 ms)
EslintValidationFilter (7)                    | 4499ms (642 ms)
StyleLinter (1)                               | 3091ms
ConcatWithMaps (3)                            | 2856ms (952 ms)

Warm initial, sourcemaps: false 

Build successful (36090ms) – Serving on https://0.0.0.0:6002/editor/

Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
Babel (142)                                   | 7732ms (54 ms)
EslintValidationFilter (7)                    | 5039ms (719 ms)
StyleLinter (1)                               | 3379ms
ConcatWithMaps (3)                            | 2434ms (811 ms)
Concat (13)                                   | 2045ms (157 ms)

Rebuild, .js file

Heimdall: https://cl.ly/131k3k240p2m

Build successful (6158ms) – Serving on https://0.0.0.0:6002/editor/

Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
SourceMapConcat: Vendor JS (1)                | 904ms
SnippetFinder (1)                             | 803ms
SassCompiler (2)                              | 429ms (214 ms)
Funnel (65)                                   | 383ms (5 ms)
SourceMapConcat: Concat App (1)               | 360ms

Rebuild, .js file, sourcemaps: false 

Build successful (3939ms) – Serving on https://0.0.0.0:6002/editor/

Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
SimpleConcatConcat: Vendor JS (1)             | 756ms
SnippetFinder (1)                             | 494ms
SassCompiler (2)                              | 269ms (134 ms)
SimpleConcatConcat: Concat App (1)            | 257ms

Incremental rebuild (on .scss file)

Heimdall: https://cl.ly/3R360J2H3H3L

Build successful (7352ms) – Serving on https://0.0.0.0:6002/editor/

Slowest Nodes (totalTime => 5% )              | Total (avg)
----------------------------------------------+---------------------
broccoli-persistent-filter:Autoprefixe... (1) | 1207ms
SnippetFinder (1)                             | 1197ms
SassCompiler (2)                              | 923ms (461 ms)
SourceMapConcat: Vendor JS (1)                | 803ms
SourceMapConcat: Concat App (1)               | 384ms
#7

Honestly, it seems totally okay for cold/rebuild timings. We have pretty big apps as well, max-optimized for builds, excluding all redundant modules/files, etc. And we even get higher build times in some cases. We kinda ok with that, got used to it (unless Ember CLI may handle it better, like replacing broccoli maybe ;-)).