Improve Sass compilation performance when importing all components #1752
Conversation
We currently import the settings, tools and helpers layers within each component so that users can import just a single component (e.g. `@import govuk/components/button/button`) and it'll import its own dependencies. However, Ruby Sass in particular is slow to resolve these imports, and so when importing `govuk/all`, the fact that every component imports the dependencies again has a big impact on the compilation time. By moving everything except the imports into a separate file (`_style.scss`) and including that in the original component .scss file, we can then import just the styles when importing all and shortcut all of the imports.
We already import `helpers/all`, so we don't need to then import the typography helpers separately.
|
Apart from it being a bit weird it seems like a good way forward, nice thinking. custom buildWhat should people do to get a performant custom build. Explaining the two filesShould we have documentation explaining why we have two files? Does this solve the original issue?There seems like big improvements on ruby sass, but we know the issues are more to do Rails wrappers running ruby code regardless of the compiler, since even the libsass sassc-rails implementation seemed to have issues. Should we run this benchmark against something more real world? Is this a breaking change?This might be a breaking change for any folks (low risk) that import only |
|
Just on the last point whilst I think about the others…
I think the next step might be to publish this as a pre-release and ask GOV.UK to do some benchmarking to understand if it improves things for them? |
I guess we could add a single import of the three layers to |
Good question. I think I'd expect people to start with a copy of @import "settings/all";
@import "tools/all";
@import "helpers/all";
@import "core/all";
@import "objects/all";
@import "components/button/style";
@import "components/input/style";
@import "components/header/style";
@import "components/footer/style";
@import "utilities/all";
// Removed overrides as not using themThe use of Another option might be just to make this a proper breaking change, and remove the ability to import a single component without having to also import the I guess we should also bear in mind that at some point in the next 12 - 18 months we'll probably want to look at moving to the |
|
I think we should be taking more time to consider deprecation, some things we can't communicate deprecation that easily but Sass we often can do so pretty well with warnings. That said it might be that we just leave it as is until @uses yes... |
|
Having reviewed this as a team, we think that although it should be a non-breaking change for most users, it:
On that basis, we now think that the best approach would be to remove the settings, tools and helpers imports from the components entirely, and update our documentation to tell users to import those layers if they are importing individual components. There's more information on next steps in #1671 (comment). |
We currently import the settings, tools and helpers layers within each component so that users can import just a single component (e.g.
@import govuk/components/button/button) and it'll import its own dependencies.However, Ruby Sass in particular is slow to resolve these imports, and so when importing
govuk/all, the fact that every component imports the dependencies again has a big impact on the compilation time.By moving everything except the imports into a separate file (
_style.scss) and including that in the original component .scss file, we can then import just the styles when importing all and shortcut all of the imports.We can use the same logic to remove imports of dependent components (e.g. character count imports the styles for textarea).
Finally, we can remove two redundant imports of the typography helper, as we already import all helpers.
Ruby Sass
Before: 30s
After: 7.8s
Baseline (
master)After changes (
sass-perf)LibSass
Before: 0.2s
After: 0.18s
Baseline (
master)After changes (
sass-perf)Dart Sass
Before: 0.5s
After: 0.25s
Baseline (
master)After changes (
sass-perf)