Browsersync super slow when refreshing styles/scss

sage
1

Sage 9/Webpack, Browsersync is taking 6-10 seconds to refresh a simple background color change in main.scss. Editing a php template seems to work fine, but editing scss, it grinds…

Sage 8/Gulp is a little better, but slow as well.

2

For Sage 8/Gulp, have a look at Gulp watch taking way too long

3

Browsersync is not the problem here. Please look at: Webpack2 Performances and https://github.com/roots/sage/issues/1729.

Currently the only “solution” is to downgrade Webpack to v1 (manually which is not super easy) or use alpha.1 release of Sage 9 (which is based on Webpack v1).

1 Like
4

In Sage 8.4, CSSNano was causing extreme slowness. I replaced it with Clean CSS and that fixed it.

Here’s another post where people complained about CSSNano’s slowness:

CSSNano is also being used in Sage 9.0. Perhaps it’s causing the slowness there as well?

5

I’ve read (https://github.com/webpack/webpack/issues/1574) that downgrading css-loader to the previous version 0.14 will do the trick so I checked this track. There are some gains (about 1-2s) but it doesn’t seem to be the root of this problem.

As for cssnano in my Webpack v1 build I’m using version 3.7.4 and it’s blazing fast, so I don’t think replacing it will help. Of course if anyone has some spare time it might be worth checking.

1 Like