Angular component tests after upgrading from 13.x to 14.x 5 times slower due to justInTimeCompile

[jaibeales]

Current behavior

We are experiencing a significant performance degradation in our Angular component tests after upgrading Cypress from version ⁠13.x to ⁠14.x. For a library with approximately 40 component test files, the execution time in our CI environment increased from roughly 10 minutes to around 1 hour (a 5-6x slowdown).

These tests are part of an Angular NX mono repo with multiple applications and libraries, and component tests are executed at the library level.

We confirmed the issue is related to the Cypress upgrade, as downgrading to ⁠13.x resolved the slowdown. After reviewing the Cypress ⁠14.x release notes, we identified that the ⁠justInTimeCompile option for component testing is now enabled by default.

Disabling this feature - by setting ⁠component: { justInTimeCompile: false } in our ⁠cypress.config.ts - fixed the performance problem and restored the previous execution times.

Desired behavior

Component tests to maintain efficient execution times after a Cypress version upgrade.

Test code to reproduce

A typical library cypress.config.ts

import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';
import { defineConfig } from 'cypress';
import coverageWebpack from './cypress/cypress.webpack';

// Use NX defaults for Cypress Component Tests
const options = nxComponentTestingPreset(__filename);

// Use a separate tsconfig.cy.json for Cypress Component Tests
// (By default, NX lets Cypress use the tsconfig.json in the root of the project which we use to set stricter rules
// and don't want to build with!)
export default defineConfig({
  component: {
    ...options,
    // Cypress 14 made justInTimeCompile true by default.
    // This is currently causing builds between each test file - rather than one build per lib - making test runs incredibly slow CI.
    justInTimeCompile: false,
    devServer: {
      ...options.devServer,
      webpackConfig: coverageWebpack,
      options: {
        ...options.devServer.options,
        projectConfig: {
          ...options.devServer.options.projectConfig,
          buildOptions: {
            ...options.devServer.options.projectConfig.buildOptions,
            tsConfig: 'tsconfig.cy.json',
          },
        },
      },
    },
    setupNodeEvents(on, config) {
      // eslint-disable-next-line @typescript-eslint/no-var-requires
      require('@cypress/code-coverage/task')(on, config);

      // It's IMPORTANT to return the config object
      // with any changed environment variables
      return config;
    },
  },
});

Cypress Version

14.3.2

Node version

Happens in all: v.20.x v22.x and v23.x

Operating System

macOS an linux

Debug Logs

Other

No response

[jennifer-shehane]

@jaibeales Hi, we did offer the option to opt out of justInTimeCompile for just this reason. It was not a 100% improvement for all situations, but it did fix a large majority of performance issues that our customers were having with CT performance. In your case, turning the flag off is a good option - we don't intend to remove this configuration so you can opt out forever.

I'll forward this example to the team to see if there's any improvements we could learn from the justInTimeCompile option we offer.