מילון מושגים:
MVC - דפוס ארכיטקטורה שמפריד יישום לשלושה חלקים: מודל (נתונים), תצוגה (View) ובקר (Controller).
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
הערה - טקסט בקוד שמסביר אותו לבני אדם ואינו מבוצע על ידי המחשב.
jQuery - ספריית JavaScript ותיקה שמפשטת את הגישה לרכיבי הדף, אירועים ואנימציות בדפדפן.
ספרייה - אוסף קוד מוכן, כמו פונקציות ומחלקות, שמפתחים משתמשים בו בתוכניותיהם במקום לכתוב הכול מחדש.
דיבאג - תהליך של איתור, הבנה ותיקון תקלות בקוד, לעיתים בעזרת כלי שמאפשר לעצור ולעקוב אחר ריצת התוכנית.
פריימוורק - מסגרת תוכנה שמספקת מבנה וכלים מוכנים לפיתוח יישומים, כדי לחסוך כתיבת קוד חוזר.
AJAX - טכניקה שמאפשרת לדף אינטרנט לשלוח ולקבל נתונים מהשרת ברקע ולעדכן את התצוגה בלי לטעון מחדש.
ייעול עם Bundling and Minification
בשיעור זה לומדים לייעל את טעינת האתר בשתי טכניקות שהוכרו ב-MVC 4, איחוד קבצי קוד לחבילות וצמצום הקובץ למינימום, בונים חבילות בקוד ומשלבים אותן בלייאוט, ומודדים את שיפור הביצועים.
נושאי הסיכום המוצגים בשיעור:
1. הבעיה של הבקשות הרבות: כשלקוח גולש לפעולה ומקבל דף, ייתכן שהדף מכיל הפניות לקבצי JavaScript וקבצי CSS, וכשהדפדפן רואה הפניה כזאת הוא יודע שהדף צריך את הקובץ ולכן ניגש שוב לשרת ומוריד אותו, אבל דפדפנים אינם הולכים ומורידים את כל הקבצים שהם רואים מיד, יש להם מספר מסוים של בקשות בו זמנית שהם ניגשים לשרת, בדרך כלל כשש עד שבע בקשות בו זמנית.
2. המשמעות של ההגבלה: אם דף צריך מספר רב יחסית של קבצי JavaScript ו-CSS, ויש לו הפניות אליהם, ואף ייתכן שקבצי ה-JavaScript מבצעים בעצמם הפניות לקבצים אחרים, אז ברגע שהדפדפן רואה זאת הוא מתחיל להוריד כשש עד שבע בקשות בו זמנית, אבל כל יתר הדברים נמצאים בהשהיה, וגם שאר טעינת הדף תהיה בהשהיה, ולכן קורה מצב שהלקוח ממתין עד שהדפדפן יסיים להוריד את כל קבצי ה-JavaScript וה-CSS שהדף צריך.
3. מהו bundling: bundling אומר כדבר הבא, נניח שיש לנו עשרה קבצי JavaScript שאנחנו צריכים בדף שלנו, למה שלא יהיה פשוט הפניה לקובץ אחד שיכיל את כל קבצי ה-JavaScript האלה, במקום עשר הפניות תהיה הפניה אחת לקובץ אחד שיכיל הכל, וזה נקרא bundle, bundle זה בעצם חבילה.
4. חבילות לשני סוגי הקבצים: אפשר לעשות bundling על קבצי JavaScript ולקחת מספר קבצים ולהפוך אותם לחבילה אחת, ואז השרת יכיל כביכול קובץ אחד ויחיד שבו יש את כל קוד ה-JavaScript של עשרת הקבצים, ואפשר לעשות bundling גם על קבצי CSS, מפני שגם כאן יכול להיות שיש לנו המון קבצי CSS בשרת, ובמקום שהדפדפן ייגש ויוריד אותם אחד אחד אנחנו יכולים להפוך את כל קבצי ה-CSS לקובץ CSS אחד ויחיד, וכך הדפדפן מוריד רק קובץ אחד במקום מספר רב של קבצים.
5. מהו minification: כאשר בונים קובץ JavaScript אפשר להכניס בקובץ תיעוד, הערות, רווחים, אנטרים, להגדיר משתנים וכולי, וכל הדברים האלה מנפחים לנו את הקובץ, וגם בקובץ CSS יכול להיות תיעוד ורווחים, אבל לדפדפן לא מעניין תיעוד ולא רווחים ולא מעניין אותו אם יש בפונקציה שם של משתנה ארוך או קצר, ו-minification היא הפעולה שבה המערכת לוקחת את קובץ ה-JavaScript או ה-CSS ומוציאה ממנו את כל מה שלא צריך מבחינת הדפדפן, היא מנקה תיעוד, רווחים ואנטרים, והופכת משתנים ארוכים למשתנים בעלי תו אחד ויחיד, וכך הקובץ הופך להיות הרבה יותר מצומצם ומהירות הגלישה לשרת הרבה יותר גבוהה, ושתי הטכניקות הולכות יחד.
6. הקמת סביבת ההדגמה: מתחילים מפרויקט ריק לגמרי ורוצים להשתמש בו במספר קבצי JavaScript וקבצי CSS, ולשם כך פשוט פונים למאגר החבילות ומגדירים שרוצים להשתמש בכל מיני ספריות JavaScript ו-CSS, ומתחילים להוריד אותן.
7. הורדת הספריות: מורידים מהמאגר סדרת ספריות נפוצות שכולן שנרצה להשתמש איתן באתר שלנו, ספריית ה-JQuery הבסיסית, ספריית האימות שלה, ספריית JQuery UI שמכילה גם JavaScript וגם CSS, ספריית JQuery של ממשקים מעוצבים, ספריות אימות לא פולשניות של מיקרוסופט וספריית התקשורת הלא פולשנית שלה.
8. הבחנה במספר הקבצים שנוצרו: אחרי ההורדות רואים שנוצרה תיקיית סקריפטס ובה מספר רב של קבצי JavaScript, ותיקיית תוכן ובה נוסיף גיליון סגנון משלנו עבור האתר, ויש גם תיקיית ערכות עיצוב ששייכת ל-JQuery UI ובה המון קבצי CSS שהספרייה משתמשת בהם, ואם היינו מבצעים הפניה מהאתר לכל קובץ כזה, כל דף שהלקוח גולש אליו ומכיל את כל ההפניות היה לוקח לו המון זמן, גם הקבצים האלה יחסית גדולים, מסתכלים עליהם ורואים תיעוד ורווחים, והם מכילים מספר רב מהם, והדפדפן היה מתחיל לבצע בקשות, אפילו שהוא מוריד שש עד שבע בקשות בו זמנית הן היו תוקעות את שאר הורדת הדף עד שהיינו מקבלים אותן בחזרה ואז הוא היה מתחיל להוריד עוד ועוד.
9. הכרת שני הגרסאות של כל קובץ: בכל פעם שמורידים קובץ מספרייה רואים שני סוגים של אותו קובץ, את הקובץ הרגיל שבו יש תיעוד, שמות משתנים אמיתיים ורווחים, קובץ אסתטי שנועד לביצוע ניפוי שגיאות, ואת אותו קובץ עם הסיומת שמציינת שהוא מצומצם, שהוא ממש אותו קובץ אבל מה שעשו בו הוא הורידו תיעוד, הורידו רווחים וקיצרו שמות של משתנים בתוך הפונקציות, למשל משתנה עם שם אמיתי הפך לתו אחד, כדי שיהיה כמה שפחות קוד בתוך קבצי ה-JavaScript והגלישה לשרת תהיה כמה שיותר מהירה.
10. מה נשאיר באתר: אנחנו צריכים להגדיר את הבנדלינג ולבצע חבילות של הקבצים עבור האתר שלנו כך שלא נצטרך לשים באתר הפניות לכל הקבצים, ואם מבצעים את ה-minification בעצמנו אז לא צריכים את קבצי הגרסה המצומצמת המוכנות, ואפשר להיפטר מהם, מה שקורה הוא שאפשר להשאיר באתר רק את הקבצים המקוריים בלי קבצי הגרסה המצומצמת, ואז פעולת ה-minification תתבצע אוטומטית.
11. למה מוחקים את הגרסאות המצומצמות: הקבצים האלה היו מוכנים מראש בספרייה ומישהו כבר עשה עליהם צמצום, אנחנו לא צריכים אותם, וכדי לא לערבב אותם עם הבנדלינג שלנו משאירים רק את הקבצים המקוריים שנראים טוב, כדי שאם נצטרך לנפות שגיאות בקוד שלנו ונקפוץ לתוך פונקציית JavaScript כלשהי נוכל לראות בדיוק מה כתוב בה ואת התיעוד, וזה יעזור לנו הרבה יותר לנפות שגיאות, ואת כל קבצי הגרסה המצומצמת פשוט מוחקים, גם ב-JavaScript וגם ב-CSS, שם רואים שהעתק שמכיל את הגרסאות המצומצמות כולה נמחקת, כך יש לנו באתר כמה שפחות קבצים, אנחנו משתמשים באתר שלנו רק בקבצים המלאים ולא המצומצמים אבל פעולת ה-minification תבוצע עבורנו.
12. התקנת חבילת ה-bundling: נכנסים לאפ סטארט, ובאפ סטארט צריך להגדיר קובץ שמאפשר לנו לבצע את ה-minification ואת פעולת ה-bundling, וראשית החבילה הזאת אינה מותקנת כברירת מחדל בתוך הפריימוורק, וצריך להתקין אותה דרך מאגר החבילות, ובניהול החבילות של הפתרון בחיפוש מקוון מחפשים את החבילה של מיקרוסופט לביצועים באתרים, ורואים שהיא כותבת שהיא מציגה דרך לאגד ולייעל קבצי CSS ו-JavaScript, מתקינים אותה ומקבלים את ההסכמה.
13. מחלקת הגדרת החבילות: הדבר הבא שצריך לעשות הוא ללכת לאפ סטארט ולצרף בו מחלקה חדשה, קוראים לה קובץ הגדרות החבילות, ובתוך המחלקה בונים פונקציה ציבורית סטטית שנקראת רישום חבילות, והפונקציה הזאת צריכה לקבל מעין אוסף שנקרא אוסף חבילות, ובתוך הפונקציה הזאת הולכים ליצור לעצמנו את כל ה-bundling, וה-minification יתבצע אוטומטית עבור כל bundle שניצור, ולהזכירכם, bundle זה חבילה של מספר קבצי JavaScript או קבצי CSS שרוצים לאגד לקובץ אחד, וה-minification יתבצע אוטומטית על כל חבילה כזאת.
14. רישום בגלובל: לפני שכותבים את תוכן הפונקציה צריך לגשת לקובץ הגלובל של האתר, ורואים שיש בו רישומים של כל מיני מחלקות שקיימות בתוך אפ סטארט, לדוגמה יש את מחלקת הניתוב שהיא מחלקה שקיימת בתוך אפ סטארט ובקובץ הגלובל בהתחלת האפליקציה, איך שהאתר עולה לאוויר, יש רישום נתיבים, ולכן גם למחלקה שלנו רושמים בגלובל את הקריאה לפונקציה שמייצרת את החבילות, ושולחים לה את אוסף החבילות, וזה בעצם רשימת החבילות שעכשיו נתחיל לרשום.
15. איך לחלק את החבילות: אחרי זה כל מה שצריך לעשות הוא להתחיל לבנות את החבילות, ומה הרעיון שעומד מאחורי בניית חבילה, האם נכון לבנות חבילה אחת עבור כל הקבצים, יכול להיות, אבל צריך להבין שלא בכל דף צריך את כל הקבצים, ולכן צריך לחשוב לפי אילו מקומות נצטרך פחות או יותר אילו קבצים, לדוגמה יודעים ש-jquery זה משהו שהוא מאוד מאוד נדרש עבור כל האתר, וניצור חבילה אחת עבור jquery, ייתכן ש-JQuery UI הוא משהו שרוצים רק בחלק מהאתר ולכן יוצרים חבילה נוספת עבורו, ועבור כל האימות אולי ניצור חבילה אחת, מפני שאם רוצים להשתמש באימות אז רוצים להשתמש גם בספריית האימות וגם בספריית האימות הלא פולשנית בצורה הזאת או הזאת, ולכן יש לנו פה מספר חבילות שאפשר ליצור, וכנ"ל לגבי CSS.
16. יצירת חבילת סקריפטים: איך יוצרים חבילה, בפונקציית רישום החבילות צריכים לגשת לאוסף החבילות ולהוסיף חבילת סקריפטים חדשה עבור חבילה של JavaScript, או חבילת סגנונות עבור חבילה של CSS, מתחילים עם חבילת סקריפטים, מוסיפים חבילת סקריפטים ונותנים נתיב וירטואלי, שהוא לא באמת אמור להיות קיים, עבור המקום שבו רוצים שהמערכת תייצר לנו את הקובץ עבור החבילה הזאת, ופשוט ממציאים נתיב בתיקייה של האתר, נניח שקיימת תיקיית חבילות, ויוצרים חבילה עבור jquery ורושמים את שמה בצורה מתאימה.
17. צירוף קבצים לחבילה והפתרון של הגרסאות: לאחר שהגדרנו נתיב וירטואלי עבור החבילה לוחצים על פעולת הצירוף ומגדירים אילו קבצים רוצים שיהיו בחבילה הזאת, ומסתכלים על jquery ורואים שיש לנו רק קובץ אחד ויחיד, ואפשר לקחת את הקובץ הזה ולהדביק אותו פה, אבל לא ממש עשינו חבילה במקרה הזה של כמה קבצים כי רוצים לקחת רק את jquery בתור קובץ אחד ויחיד, ו-IntelliSense זה רק משהו של סביבת הפיתוח ולא צריך להכניסו בחבילה כי הדבר הזה גם כך לא הולך לעלות לאוויר, ומה אם בעתיד נחליף את הגרסה של jquery, נזרוק את הקובץ הזה ונעדכן גרסה חדשה יותר, במקרה כזה נאלץ ללכת ולעדכן את מספר הגרסה, ולכן בפריימוורק של הבנדלינג אמרו דבר כזה, מגדירים תו wildcard, תו שהוא כמו ג'וקר, שברגע שמים אותו המערכת יודעת להחליף אותו במשהו אחר, ועבור מספר הגרסה פותחים wildcard שמציין גרסה, וזה אומר שכל קובץ של jquery עם גרסה כזאת שנמצאת בדיוק פה תשולב בחבילה, כרגע יש רק אחד כזה, וכך החבילה מורכבת מקובץ שנקרא jquery מינוס איזושהי מספר גרסה ואז נקודת js, ורק הקובץ הזה מתאים להגדרה הזאת.
18. עוד שתי חבילות JavaScript: יצרנו פה חבילה אחת, בואו ניצור עוד אחת, בחבילה הבאה ניצור אותה עבור JQuery UI, מגדירים ששומרים אותה בנתיב הווירטואלי של JQuery UI, ורוצים לצרף את הקובץ של JQuery UI עם גרסה, ורואים אותו פה, ובואו ניצור חבילה עבור ספריית האימות של jquery, קוראים לה בשם מתאים, ועושים include של שני קבצים, יש לנו גם את הקובץ של האימות הלא פולשני שרואים אותו פה ויש גם את כל הקבצים שמתחילים בשם של האימות, כלומר את ארבעת הקבצים האלה הולכים להוסיף לחבילה אחת.
19. wildcard לסדרות קבצים: כאן נמצא לנו עוד wildcard שאומר שים כוכבית ואז הוא ישלים את כל יתר התווים, וכך יש לנו פה את הקובץ של האימות הלא פולשני עם כוכבית ויש לנו את קובץ האימות עם כוכבית, וזאת אומרת שכל הקבצים שמתחילים בתחילות האלה ישולבו יחד בחבילה הזאת, ודבר נוסף ששכחנו להגדיר פה הוא שגם הקבצים האלה צריכים להיות עם נתיב מלא, ומוסיפים לפניהם את התיקייה של הסקריפטס לפני כל הקבצים האלה כי הם חייבים נתיב מלא.
20. שלוש חבילות JavaScript מוכנות: יש לנו כרגע את שלוש החבילות שיצרנו עבור כל קבצי ה-JQuery שיש לנו, את תוספת ההשלמה האוטומטית של סביבת הפיתוח אנחנו לא צריכים בשרת, את ה-JQuery בנינו, את ה-JQuery UI בנינו, שתי אלה חבילה, זו חבילה אחת וזו חבילה אחת, וארבעת הקבצים של האימות בחבילה נפרדת.
21. חבילות ה-CSS: עוברים ובונים את קבצי ה-CSS, ואם מסתכלים על תיקיית התוכן יש לנו את קובץ ה-CSS שלנו, ועבורו נבנה חבילה אחת, וגם אם זה קובץ אחד עדיף לבנות חבילה כי אז הוא יכול להיות, כמובן, מצומצם על הקובץ הזה, וכאן יש את הוספה לאוסף החבילות אבל הפעם הולכים להוסיף חבילת סגנונות חדשה, שוב פעם ממציאים נתיב וירטואלי שהקובץ הזה נמצא בתוכו, קוראים לזה תוכן סגנונות, ומצרפים את הקובץ האחד והיחיד הזה, שהוא נמצא בתוך התוכן ונקרא קובץ האתר.
22. חבילת ערכות העיצוב: החבילה האחרונה שעושים היא עבור כל קבצי ה-CSS של JQuery UI, ובודקים היכן הם, רואים שהם נמצאים בתיקיית התוכן, בתוכה תיקיית הערכות, בתוכה תיקיית הבסיס, ובתוכה כל הקבצים מתחילים בשם של הספרייה, ואז מצרפים את כל קבצי ה-CSS האלה, ואיך עושים את זה, במקום הקובץ המסוים מגדירים קונטנט, בתוך הקונטנט יש את הערכות, בייס, ואת הסימון עם כוכבית, ופשוט עושים את שם הספרייה עם כוכבית, וכך יצרנו כאן חמש חבילות, שלוש חבילות מהן עבור JavaScript ושתי חבילות עבור CSS.
23. שילוב החבילות בלייאוט: הדבר הבא שצריך להגדיר הוא איך לשלב את החבילות האלה בקוד שלנו, ולצורך כך חוזרים ומגיעים ללייאוט של האתר, מוסיפים לתיקיית התצוגות המשותפות תצוגה חלקית בשם לייאוט, וכאן יש לנו את קובץ ה-HTML, את ה-head, את ה-body ובתוכו יש לנו את הצגת גוף העמוד, ובנוסף בתיקיית התצוגות יש את מסטארט שבו מגדירים את קובץ הלייאוט, ומאתרים בתיקיית התצוגות המשותפות את קובץ הלייאוט עם הסיומת המתאימה, וסידרנו את הלייאוט ועכשיו בתוכו צריך לחשוב איפה רוצים לזרוק את הקבצים שרוצים שיהיו עבור כל האתר.
24. ה-helper של הסגנונות והשימוש בו: נניח שאת קובץ ה-CSS של האתר רוצים לזרוק ממש פה, ואיך עושים את זה, משתמשים ב-helper שנקרא סגנונות, או helper שנקרא סקריפטים, אבל כמו שאפשר לראות לא מצליחים למצוא באינטליסנס את הפקודה סקריפטים או סגנונות, ואז מה שצריך לעשות הוא פשוט להגדיר שמרחב השמות שהפקודה הזאת נמצאת בו יוכר על ידי קבצי ה-CSHTML של התצוגות.
25. רישום מרחב השמות בהגדרות התצוגות: איך עושים את זה, סוגרים את הלייאוט, הולכים לקובץ הגדרות החבילות ומעתיקים את מרחב השמות של האופטימיזציה של האתרים של מיקרוסופט, זה המרחב שמות שהחבילה המותקנת הביאה לנו, והולכים לקובץ ההגדרות ששייך לקבצי התצוגות, לא לקובץ ההגדרות של האתר אלא לקובץ שבתוך תיקיית התצוגות, ובקובץ הזה מאתרים את תגית העמודים, ובתוכה יש לנו מרחבי שמות ומוסיפים מרחב שמות, והמרחבים האלה הם עבור קבצי ה-CSHTML כך שאם מגדירים פקודה משלנו ורוצים שהיא תוכר בקבצי ה-CSHTML, כלומר בקבצי התצוגות, מגדירים את המרחבים הספציפיים, סוגרים, עושים ניקוי ובנייה מחדש על כל האפליקציה, ולאחר מכן חוזרים ובודקים האם הוא מצליח לגלות לנו את הסקריפטים, ואכן הוא מצא לנו כרגע את הסקריפטים.
26. קריאה להצגת חבילה: אז צריכים לבנות קריאה לפונקציית ההצגה, וכאן נותנים לה בדיוק את השם של החבילה שרוצים, וכדי לראות איפה בנינו את החבילה עצמה, יש לנו פה את ההגדרה וזו החבילה, וזאת אומרת שזה השם שצריך לתת, ונניח שרוצים את jquery בכל האתר, נניח שרוצים את JQuery UI בכל האתר, משכפלים את זה, והאמת שכדאי להגדיר את הסקריפטס פה למטה, זה משהו שהוא יותר מקובל, ויש לנו פה את JQuery UI הלאה, שתי החבילות האלה הושלמו.
27. חבילות לדף מסוים בלבד: נניח שרוצים את חבילת האימות רק בדף שלנו, כי בכל האתר אין צורך לבצע אימות, ולכן מה שעושים הוא מגדירים בלייאוט קטע תצוגה אופציונלי עבור סקריפטס לא חובה בכל מקום, והולכים ויוצרים לנו דף חדש, יוצרים קונטרולר שקוראים לו פסטר ופונקציית אינדקס, ומייצרים עבורו תצוגה ומגדירים בה את הקטע, וכאן עושים שוב פעם את ההצגה של הסקריפטס ונותנים פה את החבילה שרוצים שתהיה תקפה רק לדף הזה, ועוד פעם ניגשים לשם ומעתיקים את החבילה עם מירכאות, וכך החבילה הזאת תקפה רק לדף הנוכחי, וזאת אומרת שאפשר לחלק את החבילות לחלקים רק איפה שרוצים להשתמש בהן, כאן שמים אותן.
28. חבילות הסגנונות ב-head: חוזרים ובונים את כל הנושא של החבילות של הסטיילינג, ומה צריכים להגדיר, בתוך ה-head צריכים להגדיר את קריאת ההצגה של הסגנונות ולתת פה את השם של חבילת הסטייל, וזה הלאה החבילה שבנינו עבור ה-CSS שלנו, ונניח שבאותו הדף גם יש חבילה עבור JQuery UI כי גם כך הוא נמצא בתוך הדף, ואת הסטיילינג נהוג לשים ב-head, ואת הסקריפטים נהוג לשים מתחת להצגת גוף העמוד, ופה סיימנו להגדיר את כל החבילות שלנו, עושים ניקוי, עושים בנייה מחדש והולכים כרגע לבדוק את זה.
29. הרצה ראשונה וגילוי שזה לא עובד: מריצים את האתר, עושים רענון של התצוגה, גולשים לדף שלנו ומסתכלים על קוד המקור, ומה שרואים זה משהו די מוזר, הרי הגדרנו כל מיני חבילות ולפי הקונספט של הבנדלינג המערכת הייתה אמורה ליצור לנו קובץ אחד עבור כל חבילה, ואנחנו לא רואים שהיא עשתה את זה, רואים פשוט זרוקים פה המון המון קבצים, וכל הקבצים האלה בכלל לא קשורים לחבילה, אולי יש להם צמצום אולי לא, לא יודעים, אבל לא רואים שזה עובד בכלל.
30. הסיבה, מצב ניפוי שגיאות: הסיבה שזה לא עובד היא בגלל שאנחנו נמצאים במצב של ניפוי שגיאות, ובשביל שזה יעבוד צריך להעביר למצב של גרסת שחרור, וכאן רואים בקובץ ההגדרות הראשי של האתר שיש לנו סימון ניפוי שגיאות שווה אמת, ובניפוי שגיאות שווה אמת אנחנו במצב של ניפוי שגיאות, והקונספט של הבנדלינג והמיניפיקיישן לא עובד, בשביל שהמתכנתים יוכלו לנפות שגיאות באתר שלהם, וכשמעלים אתר לאוויר צריך להעביר את הסימון של ניפוי השגיאות לשקר ואז כמובן הבנדלינג והמיניפיקיישן יעבדו.
31. מדידה לפני השינוי: לפני שמעבירים את זה לשקר רצים את האתר עוד פעם, עושים פתיחת כלי הפיתוח בדפדפן ומסתכלים על האתר שלנו ורואים את כל הגלישות, ומה שרואים פה בעצם הוא שירוק זה CSS, כתום זה JavaScript, ורואים ממש בכרטיסיית הרשת, תפסנו פה את הרשת, את כל הגלישות והורדות של הקבצים, ומה שרואים פה הוא שעשרים ושלוש בקשות היו עבור האתר שלנו, כלומר עשרים ושלושה קבצים התבקשו עבור האתר, עושים עוד פעם רענון ורואים שכל פעם יש פה עשרים ושלושה קבצים שמבקשים אותם מהאתר.
32. המדידה אחרי השינוי: עושים פה שקר, לא במצב ניפוי שגיאות, מריצים שוב את האתר, נכנסים לכלי הפיתוח ומרעננים, ורואים שהפעם רק חמש בקשות התבצעו, הרבה פחות, וגם מקודם היה הרבה יותר מילי שניות שהאתר התבצע וכרגע זה רק חמש עשרה מילי שניות, ומסתכלים רגע כמה פחות בקשות קיימות, יש פה קובץ CSS אחד או חבילה אחת, יש כאן שלוש חבילות של JavaScript, וזאת אומרת שהרבה פחות קבצים התבקשו וגם הרבה פחות זמן זה לקח לו.
33. השוואת הביצועים: מעבירים את זה עוד פעם לאמת, מריצים, פותחים את כלי הפיתוח ומרעננים, ורואים ששתי שניות ושתים עשרה מיליות שנייה זה לקח, כאשר מקודם זה לקח חמש עשרה מילי שניות עם עשרים ושלושה קבצים, וזאת אומרת שהאתר שלנו בנוי כרגע הרבה יותר מהיר, והקבצים שהדפדפן דורש הם הרבה הרבה פחות בגודל שלהם והרבה פחות במספר שלהם, בגלל התהליך של הבנדלינג והמיניפיקיישן, כאשר הבנדלינג מתבצע על ידי חבילות שאנחנו יוצרים והמיניפיקיישן מתבצע אוטומטית על ידי המערכת לכל קובץ של bundle שיצרנו.
סיכום:
בשיעור זה הבנו למה דף עם הרבה הפניות לקבצי סקריפט וסגנון מאט את טעינת האתר בגלל המספר המוגבל של בקשות מקבילות, למדנו לאגד קבצים לחבילות עם נתיבים וירטואליים ותווי כללי שמטפלים בגרסאות באופן אוטומטי, להשאיר באתר רק קבצים אסתטיים לניפוי שגיאות ולתת למערכת לצמצם אותם אוטומטית, להתקין את חבילת האופטימיזציה, לרשום את מחלקת ההגדרות בהתחלת האפליקציה, לשלב חבילות בלייאוט ובדפים ספציפיים ולתקן את מרחבי השמות בהגדרות התצוגות, ובמדידה ראינו ירידה מעשרים ושלוש בקשות לחמש ומשיפור משמעותי בזמני הטעינה, ובשיעור הבא נעסוק בשימוש ב-AJAX ב-MVC.
בשיעור הבא נעסוק בנושא שימוש ב-AJAX MVC - חלק 1.
SR1117HE
