Defer Tetikleyici Yanlış Yapılandırması

Bu tanılama, @defer bloklarındaki erişilemez veya gereksiz tetikleyicileri tespit eder.

import {Component} from '@angular/core';

@Component({
  template: `
    @defer (on immediate; on timer(500ms)) {
      <large-component />
    }
  `,
})
class MyComponent {}

Bunda ne yanlış?

Bu tanılama, defer tetikleyici yapılandırmasında şunlara yol açan birkaç sorunlu kalıbı tanımlar:

• Gereksiz kod - davranışı hiçbir zaman etkilemeyen kod
• Kaçırılan optimizasyon fırsatları - daha iyi performans için
• Erişilemez prefetch tetikleyicileri - hiçbir zaman çalışmayacak olan tetikleyiciler

Tanılama uyarısı durumları

Bu tanılama aşağıdaki sorunlu kalıpları işaretler:

Prefetch tetikleyicileri ile immediate

@Component({
  template: `
    @defer (on immediate; prefetch on idle) {
      <my-cmp />
    }
  `,
})
class MyComponent {}

@Component({
  template: `
    @defer (on immediate) {
      <my-cmp />
    }
  `,
})
class MyComponent {}

Prefetch zamanlayıcısı ana zamanlayıcıdan erken değil

@Component({
  template: `
    @defer (on timer(100ms); prefetch on timer(3000ms)) {
      <my-cmp />
    }
  `,
})
class MyComponent {}

@Component({
  template: `
    @defer (on timer(500ms); prefetch on timer(500ms)) {
      <my-cmp />
    }
  `,
})
class MyComponent {}

@Component({
  template: `
    @defer (on timer(1000ms); prefetch on timer(500ms)) {
      <large-component />
    }
  `,
})
class MyComponent {}

Ana tetikleyici olmadan prefetch

@Component({
  template: `
    @defer (prefetch when someFlag()) {
      <heavy-comp />
    }
  `,
})
class MyComponent {
  someFlag = signal(false);
}

Bu yapılandırma, prefetch'in yalnızca someFlag true olduğunda çalışacağını düşündürebilir. Ancak ana tetikleyici hâlâ varsayılan olarak on idle olduğundan, ertelenen içerik tarayıcının boşta kaldığı dönemde daha erken getirilebilir ve böylece amaçlanan koşul fiilen atlanmış olur.

@Component({
  template: `
    @defer (on interaction; prefetch when someFlag()) {
      <heavy-comp />
    }
  `,
})
class MyComponent {
  someFlag = signal(false);
}

Aynı prefetch ve ana tetikleyiciler

@Component({
  template: `
    @defer (on viewport; prefetch on viewport) {
      <my-cmp />
    }
  `,
})
class MyComponent {}

@Component({
  template: `
    <button #loadBtn>Load</button>
    @defer (on interaction(loadBtn); prefetch on interaction(loadBtn)) {
      <large-component />
    }
  `,
})
class MyComponent {}

@Component({
  template: `
    <button #loadBtn>Load</button>
    @defer (on interaction(loadBtn)) {
      <large-component />
    }
  `,
})
class MyComponent {}

@Component({
  template: `
    <div #hoverArea>Hover to prefetch</div>
    <button #clickBtn>Click to load</button>
    @defer (on interaction(clickBtn); prefetch on hover(hoverArea)) {
      <large-component />
    }
  `,
})
class MyComponent {}

Yapılandırma gereksinimleri

Herhangi bir genişletilmiş tanılamanın verilmesi için strictTemplates etkinleştirilmelidir. deferTriggerMisconfiguration, strictTemplates dışında ek bir gereksinime sahip değildir.

Bunu önleyemezsem ne olur?

Bu tanılama, projenin tsconfig.json dosyası düzenlenerek devre dışı bırakılabilir:

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "deferTriggerMisconfiguration": "suppress"
      }
    }
  }
}

Daha fazla bilgi için genişletilmiş tanılama yapılandırması bölümüne bakın.