Skip to content

Significant Slowdown in M3 Runtime Compilation #28971

Open
@ghost

Description

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Building our NX monorepo, particularly when utilizing M3 material components at runtime, is experiencing noticeable delays. This slowdown in compilation time is impacting our development efficiency.

Without M3, the compilation process takes approximately 2 seconds. However, with M3 integrated, the compilation time extends to 40 seconds or more.

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

.

Actual Behavior

.

Environment

  • Angular: v18.0.0-rc.0
  • CDK/Material: v18.0.0-rc.0
  • Browser(s): chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): mac

Activity

crisbeto

crisbeto commented on May 6, 2024

@crisbeto
Member

I believe that Nx uses some sort of build caching. Do you see these slowdowns consistently or only on the initial build? Also what changes did you make to enable M3? We export all the APIs through the same _index.scss so I would expect the build graph to look identical no matter what version of Material you're using.

added
needs: clarificationThe issue does not contain enough information for the team to determine if it is a real bug
and removed
needs triageThis issue needs to be triaged by the team
on May 6, 2024
ghost

ghost commented on May 6, 2024

@ghost

@crisbeto
slowdown is consistent

@use '@angular/material' as mat;
@use 'sass:map';

mat.$theme-legacy-inspection-api-compatibility: false;

// Create a theme with the specified color type and density.
@function create-theme($type: light, $density: 0, $primary: mat.$blue-palette, $tertiary: mat.$violet-palette) {
  @return mat.define-theme(
    (
      color: (
        theme-type: $type,
        primary: $primary,
        tertiary: $tertiary
      ),
      density: (
        scale: $density
      ),
      typography: (
        brand-family: 'Be Vietnam Pro',
        plain-family: 'sans-serif',
        // regular-weight: 400,
        // medium-weight: 500,
        // bold-weight: 700
      )
    )
  );
}

// Define the default (light) theme.
$light-theme: create-theme(
  $type: light
);

// Create our dark theme.
$dark-theme: create-theme(
  $type: dark
);

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Include the default theme styles.
html {
  @include mat.all-component-themes($light-theme);
}
@include mat.typography-hierarchy($light-theme);

.dark-theme {
  // Include the dark theme color styles.
  @include mat.all-component-colors($dark-theme);
}

// Create classes for all density scales which are supported by all MDC-based components.
// The classes are applied conditionally based on the selected density in the dev-app layout
// component.
$density-scales: (0, -1, -2, -3, -4);
@each $scale in $density-scales {
  .density-#{$scale} {
    $density-theme: create-theme(
      $density: $scale
    );
    @include mat.all-component-densities($density-theme);
  }
}

.default {
  $light-theme: create-theme(
    $type: light,
    $primary: mat.$azure-palette,
    $tertiary: mat.$blue-palette
  );

  // Create our dark theme.
  $dark-theme: create-theme(
    $type: dark,
    $primary: mat.$azure-palette,
    $tertiary: mat.$blue-palette
  );

  // Theme Config
  @include mat.all-component-colors($light-theme);

  &.dark-theme {
    @include mat.all-component-colors($dark-theme);
  }

  // Enable backwards-compatibility CSS for color="..." API & typography hierarchy.
  &.back-compat {
    @include mat.color-variants-backwards-compatibility($light-theme);
    @include mat.typography-hierarchy($light-theme, $back-compat: true);

    &.dark-theme {
      @include mat.color-variants-backwards-compatibility($dark-theme);
    }
  }
}

Nx 18, 19
Angular 18 rc 0 even with experimental 17 package

before m3 and after m3 build times and runtimes doubled up

added
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
needs investigationA member of the team needs to do further investigation to determine the root cause
and removed
needs: clarificationThe issue does not contain enough information for the team to determine if it is a real bug
on May 7, 2024
crisbeto

crisbeto commented on May 7, 2024

@crisbeto
Member

Can you also post what your theme looked like for M2?

crisbeto

crisbeto commented on May 7, 2024

@crisbeto
Member

I've sent out #29009 which seems to cut the compilation time at least in half for M3.

9 remaining items

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    M3P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/coreneeds investigationA member of the team needs to do further investigation to determine the root cause

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @michalma@crisbeto@amysorto@andrewseguin@LuisTovar0

        Issue actions

          Significant Slowdown in M3 Runtime Compilation · Issue #28971 · angular/components