רוצה שהאתר שלך ב-Angular יהיה מהיר ונגיש ככל האפשר? הגעת למקום הנכון.
מה זה זוויתי?
Angular היא מסגרת לבניית ממשקי משתמש. היא מספקת אבני בניין שיעזרו לכם להגדיר במהירות אפליקציה ניתנת לתחזוקה שניתנת להתאמה. Angular מעודד מפתחים ליצור אפליקציות שפועלות באינטרנט, בניידים או במחשבים.
מה כלול באוסף הזה?
האוסף הזה מתמקד בחמישה תחומים עיקריים לביצוע אופטימיזציה של אפליקציה ב-Angular:
- שיפור הביצועים של האפליקציה כדי להגדיל את מספר ההמרות והמעורבות בקרב המשתמשים
- שיפור האמינות של האפליקציה ברשתות לא טובות על ידי הקדמה של נכסים עם קובץ השירות (service worker) של Angular
- להפוך את האפליקציה לגלויה למנועי חיפוש ולבוטים של מדיה חברתית באמצעות עיבוד מראש ורינדור בצד השרת
- להפוך את האפליקציה לניתנת להתקנה כדי לספק חוויית משתמש שדומה לזו של אפליקציה ל-iOS או ל-Android
- לשפר את הנגישות של האפליקציה כדי שכל המשתמשים יוכלו להשתמש בה ולהבין אותה
כל פוסט באוסף יתאר טכניקות שתוכלו ליישם ישירות באפליקציות שלכם.
מה לא באוסף הזה?
האוסף הזה מבוסס על ההנחה שאתם כבר מכירים את Angular ואת TypeScript. אם אתה עדיין לא מרוצה מההורים, עיין במסמכי התיעוד של TypeScript ובמדריך תחילת העבודה עם Angular ב-angular.io.
יצירת פרויקט
ממשק שורת הפקודה Angular (CLI) מאפשר להגדיר במהירות אפליקציה פשוטה ב-Angular בצד הלקוח. בפוסט הזה יש מבוא קצר על ה-CLI ופוסטים אחרים באוסף מראים איך להוסיף תכונות מתקדמות יותר, כמו רינדור בצד השרת ותמיכה בפריסה.
הגדרת ה-CLI
כדי להתחיל, מתקינים את ה-CLI באופן גלובלי ומריצים את הפקודות הבאות כדי לוודא שהגרסה העדכנית מותקנת:
npm i -g @angular/cli
ng --version
צריך לוודא שפקודת הפלט האחרונה היא גרסה 8.0.3 ואילך.
לחלופין, אם לא רוצים להתקין את ה-CLI באופן גלובלי, אפשר להתקין אותו באופן מקומי ולהריץ אותו באמצעות הפקודה npx:
npm i @angular/cli
npx ng --version
יוצרים את הפרויקט
כדי ליצור הרצה של פרויקט חדש:
ng new my-app
פקודה זו תיצור את מבנה התיקיות והקבצים הראשוניים לאפליקציה שלך ותתקין את המודולים של הצמתים שדרושים לה.
אחרי שתהליך ההגדרה יושלם בהצלחה, הפעילו את האפליקציה:
cd my-app
ng serve
עכשיו אמורה להיות לך גישה לאפליקציה בכתובת http://localhost:4200.
מה השלב הבא?
בהמשך המאמר נסביר איך לשפר את הביצועים, הנגישות והאופטימיזציה למנועי חיפוש של האפליקציה Angular. הנה מה נכלל:
- פיצול קוד ברמת הנתיב ב-Agular
- תקציבי ביצועים עם Angular CLI
- אסטרטגיות של שליפה מראש (prefetch) של מסלול ב-Angular
- שינוי האופטימיזציה של הזיהוי ב-Angular
- הפיכת רשימות גדולות לווירטואליות באמצעות ה-CDK הזוויתי
- טעינה מראש במטמון עם Angular Service Worker
- עיבוד מראש של מסלולים באמצעות Angular CLI
- רינדור בצד השרת באמצעות Angular Universal
- הוספת מניפסט של אפליקציית אינטרנט באמצעות Angular CLI
- בדיקת נגישות באמצעות codelyzer