יש לעקוב אחר גודל החבילות לאורך זמן כדי לוודא שהאפליקציה תמשיך לפעול במהירות.
חשוב לבצע אופטימיזציה של אפליקציה ב-Angular, אך כיצד תוכלו להבטיח שהביצועים שלה לא ייפגעו עם הזמן? על ידי הוספת מדדי ביצועים ומעקב אחריהם בכל שינוי בקוד!
מדד חשוב אחד הוא גודל קוד ה-JavaScript שנשלח עם האפליקציה. כדי להבטיח שהאופטימיזציות יישמרו לאורך זמן, תוכלו להגדיר תקציב ביצועים למעקב אחרי כל בקשת build או בקשת משיכה.
חישוב תקציב הביצועים
תוכלו להשתמש במחשבון התקציב הזה אונליין כדי להעריך כמה JavaScript האפליקציה יכולה להיטען, בהתאם לזמן השימוש ב-Interactive הרצוי.
הגדרת תקציב ביצועים ב-Angular CLI
אחרי שמגדירים תקציב יעד ל-JavaScript, אפשר לאכוף אותו באמצעות ממשק שורת הפקודה Angular (CLI). רוצים לדעת איך זה עובד? אפשר להיעזר באפליקציה לדוגמה הזו ב-GitHub.
התקציב הבא הוגדר בangular.json:
"budgets": [{
"type": "bundle",
"name": "main",
"maximumWarning": "170kb",
"maximumError": "250kb"
}]
הנה סיכום של הנתונים:
- קיים תקציב לחבילת JavaScript בשם
main. - אם החבילה של
mainגדולה מ- 170KB, ב-CLI של Angular תוצג אזהרה במסוף במהלך יצירת האפליקציה. - אם החבילה של
mainגדולה מ- 250KB, ה-build ייכשל.
עכשיו אפשר להריץ את ng build --prod כדי לפתח את האפליקציה.
השגיאה הזו אמורה להופיע במסוף:
כדי לתקן את שגיאת ה-build, כדאי לעיין בקובץ app.component.ts, שכולל ייבוא מ-rxjs/internal/operators. זהו ייבוא פרטי שלא אמור להיות בשימוש על ידי צרכנים של rxjs. היא מגדילה מאוד את החבילה! אחרי שתעדכנו את הקובץ לייבוא הנכון, rxjs/operators, ותפעילו שוב את ה-build, תוכלו לראות שהוא עובר בהצלחה את בדיקת התקציב.
שימו לב: מכיוון שטעינה דיפרנציאלית מופעלת כברירת מחדל ב-CLI של Angular, הפקודה ng build יוצרת שתי גרסאות build של האפליקציה:
- build לדפדפנים עם תמיכה ב-ECMAScript 2015. ה-build הזה כולל פחות מילויים מרובים ותחביר JavaScript מודרני יותר. התחביר הזה יותר אקספרסיבי, וזה מוביל לחבילות קטנות יותר.
- build לדפדפנים ישנים יותר ללא תמיכה ב-ECMAScript 2015. התחביר הישן הוא פחות אקספרסיבי, והוא דורש יותר מילויים, ומוביל לחבילות גדולות יותר.
קובץ index.html של האפליקציה לדוגמה מתייחס לשתי גרסאות ה-build כדי שדפדפנים מודרניים יוכלו לנצל את גרסת ה-build הקטנה יותר של ECMAScript 2015 והדפדפנים הישנים יותר יכולים לחזור ל-build של ECMAScript 5.
אכיפת התקציב כחלק מאינטגרציה רציפה (CI)
שילוב רציף (CI) מאפשר לעקוב בקלות אחרי התקציב של האפליקציה לאורך זמן. למרבה המזל, הדרך המהירה ביותר להגדיר זאת היא ליצור את האפליקציה באמצעות ה-Agular CLI – אין צורך לבצע פעולות נוספות. אם חבילת ה-JavaScript חורגת מהתקציב, התהליך יסתיים עם קוד 1 וה-build ייכשל.
אם תעדיפו, תוכלו גם לאכוף תקציב ביצועים באמצעות bundlesize ו-Lighthouse. ההבדל העיקרי בין תקציבי הביצועים ב-Agular CLI וב-Lighthouse הוא המועד שבו הבדיקות מבוצעות. ה-Angular CLI מבצע את הבדיקות בזמן ה-build, בוחן את הנכסים בסביבת הייצור ומאמת את הגודל שלהם. עם זאת, מערכת Lighthouse פותחת את גרסת האפליקציה שנפרסה ומודדת את גודל הנכס. לשתי הגישות יש יתרונות וחסרונות. הבדיקה של Angular CLI היא פחות חזקה, אבל מהירה בהרבה כי מדובר בחיפוש יחיד בדיסק. לעומת זאת, ב-LightWallet of Lighthouse אפשר לבצע בדיקה מדויקת מאוד על ידי שקלול משאבים שנטענים באופן דינמי, אבל צריך לפרוס את האפליקציה ולפתוח אותה בכל פעם שהיא פועלת.
גודל החבילה די דומה לבדיקת התקציב של Angular CLI; ההבדל העיקרי הוא שגודל החבילה יכול להציג את תוצאות הבדיקה ישירות בממשק המשתמש של GitHub.
סיכום
כדי לוודא שרמת הביצועים של האפליקציה ב-Angular, לא נערכת לאורך זמן, יש להגדיר תקציבי ביצועים באמצעות Angular CLI:
- ניתן להגדיר בסיס לגודל המשאב באמצעות מחשבון תקציב או לפי שיטות העבודה של הארגון.
- הגדרת תקציבי גודל ב-
angular.jsonבקטעprojects.[PROJECT-NAME].architect.build.configurations.production.budgets - התקציבים ייאכפו באופן אוטומטי בכל גרסת build באמצעות CLI של Angular.
- כדאי לשקול להוסיף מעקב אחרי התקציב כחלק מהאינטגרציה הרציפה של החברה (שאפשר להשיג גם באמצעות Angular CLI).