אכיפת OnPush בכל ה - Components

This video explains the best practice of using the OnPush change detection strategy in all Angular components to improve application performance, along with practical steps to implement this strategy effectively.

אם משתמש נכנס לאתר שלך, והאתר איטי , המשתמש כנראה יעזוב. אנחנו צריכים להתאמץ לעשות את האפליקציה שלנו כמה שיותר מהירה. אחת הדרכים להאיץ את האפליקציה שלך היא להשתמש באסטרטגיית OnPush בכל ה - Components.
הצעדים הבאים יחייבו אותך להגדיר את כל ה - Components שלך להשתמש באסטרטגיית OnPush.

יצירת אפליקציה Angular חדשה

npx @angular/cli@latest new all-onpush --minimal --style css --routing false

Angular cli מוגדר ל OnPush

בעיה: אם תיצור קומפוננטה עם Angular cli, היא לא תהיה מוגדרת ל OnPush.
ודא שכל קומפוננטה חדשה שנוצרת עם Angular cli מוגדרת ל OnPush.

angular.json

...
"@schematics/angular:component": {
  ...
  "changeDetection": "OnPush"
},
...

הוספת Lint

בעיה: אם תסיר את ה OnPush באופן ידני, או תיצור קומפוננטה בלי Angular cli, ייתכן שתשכח להגדיר את אסטרטגיית ה - Change Detection ל OnPush. Lint יכול לעזור לך לקבל שגיאת lint על כל קומפוננטה שאינה מוגדרת ל OnPush.
כרגע ה - app.component.ts אינו מוגדר ל OnPush, אז נתקין את eslint כדי לעזור לנו לתפוס את הבעיות האלה.

npx ng lint

פקודה זו תתקין lint והרצתה שוב תראה לך את השגיאות lint. כרגע אין לנו שגיאות lint, בוא נגדיר שגיאת lint כאשר אנחנו לא משתמשים ב OnPush.

כלל ה - Lint: @angular-eslint/prefer-on-push-component-change-detection

צריך להגיד ל ESLint להתייחס לקומפוננטות שאינן משתמשות ב OnPush ולתת לנו שגיאת lint.

".eslintrc.json

"rules": {
  "@angular-eslint/prefer-on-push-component-change-detection": [
    "error"
  ],
  ...
}

ננסה להריץ את lint שוב:

npx ng lint

תראה שגיאה ב app.component.ts שלא משתמש ב OnPush

וודא שה - CI שלך מריץ lint

הגדר את ה - CI שלך להריץ lint, כך שלא תוכל למזג קוד שאינו משתמש ב OnPush.
בדוגמא זו בכל PR github actions יריץ ng lint.

.github/workflows/lint.yml

name: Lint

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Lint
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npx ng lint

יש תועלת משמעותית בביצועים כאשר משתמשים באסטרטגיית OnPush ב - Change Detection, בוא נשנה את כל ה - Components שלנו להשתמש ב OnPush, וגם לאכוף את זה עם lint.