תחילת העבודה: אופטימיזציה של אפליקציה ב-Angular

רוצים להפוך את האתר שלכם ב-Angular למהיר ונגיש ככל האפשר? הגעת למקום הנכון.

Angular הוא מסגרת ליצירת ממשקי משתמש. הוא מספק אבני בניין שיעזרו לכם להגדיר במהירות אפליקציה שניתן לתחזק ולשנות את ההיקף שלה. Angular מאפשר למפתחים ליצור אפליקציות לשימוש באינטרנט, בנייד או במחשב.

האוסף הזה מתמקד בחמישה תחומים עיקריים לאופטימיזציה של אפליקציות Angular:

  • שיפור הביצועים של האפליקציה כדי להגדיל את מספר ההמרות והמעורבות של המשתמשים
  • שיפור האמינות של האפליקציה ברשתות חלשות באמצעות העברה מראש של נכסים למטמון באמצעות קובץ השירות (service worker) של Angular
  • איך הופכים את האפליקציה גלויה למנועי חיפוש ולבוטים של רשתות חברתיות באמצעות עיבוד מראש ועיצוב בצד השרת
  • איך הופכים את האפליקציה למתקין כדי לספק חוויית משתמש דומה לאפליקציה ל-iOS או ל-Android

בכל פוסט באוסף יתוארו שיטות שתוכלו ליישם ישירות באפליקציות שלכם.

מה לא נכלל באוסף הזה?

האוסף הזה מתבסס על ההנחה שאתם כבר מכירים את Angular ו-TypeScript. אם אתם עדיין לא בטוחים בעצמכם, כדאי לעיין במסמכי העזרה של TypeScript ובמדריך תחילת העבודה עם Angular באתר angular.io.

התחלת פרויקט

ממשק שורת הפקודה (CLI) של Angular מאפשר להגדיר במהירות אפליקציית 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. מה נכלל:

  • פיצול קוד ברמת המסלול ב-Angular
  • תקציבי ביצועים באמצעות CLI של Angular
  • אסטרטגיות של אחזור מראש של מסלולים ב-Angular
  • אופטימיזציה של זיהוי שינויים ב-Angular
  • וירטואליזציה של רשימות גדולות באמצעות Angular CDK
  • העברה מראש למטמון באמצעות Angular Service Worker
  • עיבוד מראש של מסלולים באמצעות Angular CLI
  • רינדור בצד השרת באמצעות Angular Universal
  • הוספת מניפסט של אפליקציית אינטרנט באמצעות Angular CLI