Slow Ember CLI builds and Sass @extends methods

Posted on July 22, 2015 by Ben Limmer

After transitioning back to an older Ember project of mine, I noticed incredibly slow build times compared to other apps I’ve worked on. The initial build was taking almost a full minute, and subsequent builds were taking almost 30 seconds.

Cold Build

Build successful - 51632ms.

Slowest Trees                                 | Total
----------------------------------------------+---------------------
SassCompiler                                  | 20416ms
Babel                                         | 7292ms
Babel                                         | 4652ms
CoffeeScriptFilter                            | 2922ms
ES6: App Tree                                 | 2773ms

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
SassCompiler (1)                              | 20416ms
Babel (8)                                     | 12836ms (1604 ms)
CoffeeScriptFilter (2)                        | 4721ms (2360 ms)
ES6: App Tree (1)                             | 2773ms

Subsequent Builds

file changed foo/bar.js

Build successful - 25769ms.

Slowest Trees                                 | Total
----------------------------------------------+---------------------
SassCompiler                                  | 20473ms

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
SassCompiler (1)                              | 20473ms

Removing @extends

This was driving me insane, and I finally tracked down the cause of the slow builds. It was actually our use of Sass @extends. Removing them produced this:

Cold Builds

Build successful - 33243ms.

Slowest Trees                                 | Total
----------------------------------------------+---------------------
Babel                                         | 7005ms
Babel                                         | 4645ms
Concat: Vendor                                | 3184ms
CoffeeScriptFilter                            | 2737ms
ES6: App Tree                                 | 2534ms
JSHint tests- Mocha                           | 2330ms
CoffeeScriptFilter                            | 1836ms
JSHint app- Mocha                             | 1833ms

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
Babel (12)                                    | 13011ms (1084 ms)
CoffeeScriptFilter (2)                        | 4574ms (2287 ms)
Concat: Vendor (1)                            | 3184ms
ES6: App Tree (1)                             | 2534ms
JSHint tests- Mocha (1)                       | 2330ms
JSHint app- Mocha (1)                         | 1833ms

Subsequent Builds

file changed foo/bar.js

Build successful - 6372ms.

Slowest Trees                                 | Total
----------------------------------------------+---------------------
SassCompiler                                  | 1474ms
Funnel: App JS Files                          | 692ms
ES6: App Tree                                 | 617ms
Concat: App                                   | 603ms
Concat: Vendor                                | 438ms
TreeMerger (appAndDependencies)               | 355ms

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
SassCompiler (1)                              | 1474ms
Funnel: App JS Files (1)                      | 692ms
ES6: App Tree (1)                             | 617ms
Concat: App (1)                               | 603ms
Concat: Vendor (1)                            | 438ms
Babel (12)                                    | 424ms (35 ms)
TreeMerger (appAndDependencies) (1)           | 355ms

The solution

Turns out that each instance of @extends was increasing our build time by about 3-4 seconds. So, if your builds are suddenly really slow, try cutting out your use of @extends. Some would say mixins are better, anyway.

At any rate, this has made developing our older app so much more pleasant.