Skip to content

Commit

Permalink
perf(material/core): speed up M3 compilation
Browse files Browse the repository at this point in the history
Mitigates a compile time regression when generating M3 themes. These changes reduce the compilation time in half by caching the dummy theme instead of recreating it for each invocation. We can get away with this since the dummy theme is constant.

Although these changes are a significant improvement, there's more room for improvement. Timings for reference:

At head:
```
M2 benchmark - 35s
M3 benchmark - 90s
Theme from angular#28971 - 19s
```

After these changes changes:
```
M2 benchmark - 36s
M3 benchmark - 56s
Theme from angular#28971 - 10s
```

Relates to angular#28971.
  • Loading branch information
crisbeto committed May 7, 2024
1 parent 4d8af88 commit becc2bc
Showing 1 changed file with 24 additions and 14 deletions.
38 changes: 24 additions & 14 deletions src/material/core/tokens/_m3-tokens.scss
Expand Up @@ -57,6 +57,29 @@
);
}

$_cached-token-slots: null;

@function _get-token-slots() {
@if ($_cached-token-slots) {
@return $_cached-token-slots;
}

// TODO(mmalerba): Refactor this to not depend on the legacy theme when moving out of
// material-experimental. This is a hack for now because there is no good way to get the token
// slots in material-experimental without exposing them all from material.
$fake-theme: m2-theming.define-light-theme((
color: (
primary: m2-theming.define-palette(m2-theming.$red-palette),
accent: m2-theming.define-palette(m2-theming.$red-palette),
warn: m2-theming.define-palette(m2-theming.$red-palette),
),
typography: m2-theming.define-typography-config(),
density: 0
));
$_cached-token-slots: m2-tokens.m2-tokens-from-theme($fake-theme) !global;
@return $_cached-token-slots;
}

/// Generates a set of namespaced tokens for all components.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
Expand All @@ -75,20 +98,7 @@
// DO NOT REMOVE
// This function is used internally.
$systems: format-tokens.private-format-tokens($systems);

// TODO(mmalerba): Refactor this to not depend on the legacy theme when moving out of
// material-experimental. This is a hack for now because there is no good way to get the token
// slots in material-experimental without exposing them all from material.
$fake-theme: m2-theming.define-light-theme((
color: (
primary: m2-theming.define-palette(m2-theming.$red-palette),
accent: m2-theming.define-palette(m2-theming.$red-palette),
warn: m2-theming.define-palette(m2-theming.$red-palette),
),
typography: m2-theming.define-typography-config(),
density: 0
));
$token-slots: m2-tokens.m2-tokens-from-theme($fake-theme);
$token-slots: _get-token-slots();

// TODO(mmalerba): Fill in remaining tokens.
$result: sass-utils.deep-merge-all(
Expand Down

0 comments on commit becc2bc

Please sign in to comment.