Skip to content

Commit 0188516

Browse files
authored
perf(material/core): speed up M3 compilation (angular#29009)
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.
1 parent d2aeb8b commit 0188516

File tree

1 file changed

+27
-14
lines changed

1 file changed

+27
-14
lines changed

src/material/core/tokens/_m3-tokens.scss

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,32 @@
5757
);
5858
}
5959

60+
$_cached-token-slots: null;
61+
62+
/// Determines the token slots for all components.
63+
@function _get-token-slots() {
64+
// Cache the slots since they're constant and calculating
65+
// them appears to be expensive (see #29009).
66+
@if ($_cached-token-slots) {
67+
@return $_cached-token-slots;
68+
}
69+
70+
// TODO(mmalerba): Refactor this to not depend on the legacy theme when moving out of
71+
// material-experimental. This is a hack for now because there is no good way to get the token
72+
// slots in material-experimental without exposing them all from material.
73+
$fake-theme: m2-theming.define-light-theme((
74+
color: (
75+
primary: m2-theming.define-palette(m2-theming.$red-palette),
76+
accent: m2-theming.define-palette(m2-theming.$red-palette),
77+
warn: m2-theming.define-palette(m2-theming.$red-palette),
78+
),
79+
typography: m2-theming.define-typography-config(),
80+
density: 0
81+
));
82+
$_cached-token-slots: m2-tokens.m2-tokens-from-theme($fake-theme) !global;
83+
@return $_cached-token-slots;
84+
}
85+
6086
/// Generates a set of namespaced tokens for all components.
6187
/// @param {Map} $systems The MDC system tokens
6288
/// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
@@ -75,20 +101,7 @@
75101
// DO NOT REMOVE
76102
// This function is used internally.
77103
$systems: format-tokens.private-format-tokens($systems);
78-
79-
// TODO(mmalerba): Refactor this to not depend on the legacy theme when moving out of
80-
// material-experimental. This is a hack for now because there is no good way to get the token
81-
// slots in material-experimental without exposing them all from material.
82-
$fake-theme: m2-theming.define-light-theme((
83-
color: (
84-
primary: m2-theming.define-palette(m2-theming.$red-palette),
85-
accent: m2-theming.define-palette(m2-theming.$red-palette),
86-
warn: m2-theming.define-palette(m2-theming.$red-palette),
87-
),
88-
typography: m2-theming.define-typography-config(),
89-
density: 0
90-
));
91-
$token-slots: m2-tokens.m2-tokens-from-theme($fake-theme);
104+
$token-slots: _get-token-slots();
92105

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

0 commit comments

Comments
 (0)