צמצום ואיגוד ב- SharePoint Online

מאמר זה מתאר כיצד להשתמש בשיטות מזעור ואיגוד עם Web Essentials כדי להפחית את מספר בקשות ה- HTTP ואת זמן הטעינה של דפים ב- SharePoint Online.

בעת ביצוע התאמה אישית של אתר האינטרנט שלך, אתה עלול למצוא את עצמך מוסיף לשרת מספר רב של קבצים נוספים הנחוצים כדי לתמוך בהתאמה האישית שביצעת. הוספת קבצים נוספים מסוג JavaScript‏, CSS וקבצי תמונה מגדילה את מספר בקשות ה- HTTP לשרת, דבר שמאריך את הזמן שנדרש להצגת דף אינטרנט. אם יש לך קבצים מרובים מאותו סוג, תוכל לאגד אותם כדי לזרז את ההורדה שלהם.

עבור קבצי JavaScript ו- CSS, ניתן גם להשתמש בגישה הנקראת minification (מזעור), שבה אתה מקטין את גודל הקבצים הכולל על-ידי הסרת רווחים לבנים ותווים אחרים שאינם דרושים.

מזעור ואיגוד של קבצי JavaScript ו- CSS עם Web Essentials

ניתן להשתמש בתוכנה של ספק חיצוני, כגון Web Essentials, כדי לאגד קבצי CSS ו- JavaScript.

חשוב: Web Essentials הוא פרוייקט קוד פתוח של ספק חיצוני, המבוסס על הקהילה. התוכנה היא הרחבה ל- Visual Studio 2012 ול- Visual Studio 2013 ואינה נתמכת על-ידי Microsoft. כדי להוריד את Web Essentials, בקר באתר האינטרנט בכתובת http://vswebessentials.com/download.

Web Essentials מציע שתי צורות איגוד:

  • ‎.bundle: עבור קבצי CSS ו- JavaScript

  • ‎.sprite: עבור תמונות (זמין ב- Visual Studio 2013 בלבד)

תוכל להשתמש ב- Web Essentials אם יש לך תכונה קיימת עם רכיבי מיתוג מסוימים שישנה הפניה אליהם בתוך דף בסיס מותאם אישית, כגון:

צילום מסך של רכיב מותג בדף ראשי מותאם אישית

כדי ליצור חבילת TE000127218 ו- CSS ב- Web Essentials

  1. ב- Visual Studio, ב- Solution Explorer, בחר את הקבצים שברצונך לכלול בחבילה.

  2. לחץ באמצעות לחצן העכבר הימני על הקבצים שנבחרו ובחר Web Essentials > Create JavaScript bundle file בתפריט תלוי ההקשר. לדוגמה:

    צילום מסך המציג אפשרויות תפריט Web Essentials

הצגת התוצאות של איגוד קבצי JavaScript ו- CSS

בעת יצירת חבילה של JavaScript ו- CSS‏, Web Essentials יוצר קובץ XML בשם קובץ מרשם המזהה את קבצי ה- JavaScript וה- CSS וכן פרטי תצורה נוספים מסוימים:

צילום מסך של JavaScript וקובץ מתכון CSS

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

צילום מסך של הדגל המצומצם מוגדר כ- True

בעת טעינת דף מאתר האינטרנט שלך, באפשרותך להשתמש בכלי המפתחים של דפדפן האינטרנט, כגון Internet Explorer 11, כדי לראות את מספר הבקשות שנשלחו לשרת וכמה זמן לקח לכל קובץ להיטען.

האיור הבא הוא התוצאה של טעינת קבצי JavaScript ו- CSS לפני המזעור.

צילום מסך המציג הורדה של 80 פריטים

לאחר איגוד קבצי ה- CSS וה- JavaScript יחד, מספר הבקשות צנח ל- 74 וההורדה של כל קובץ בנפרד ארכה רק מעט יותר מזו של קבצי המקור:

צילום מסך המציג הורדה של 74 פריטים

לאחר האיגוד, קובץ החבילה של JavaScript קטן משמעותית מ- 815KB ל- 365KB:

צילום מסך המציג גודל הורדה מצומצם

איגוד תמונות על-ידי יצירת אוסף תמונות

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

כדי ליצור אוסף תמונות ב- Web Essentials

  1. ב- Visual Studio, ב- Solution Explorer, בחר את הקבצים שברצונך לכלול בחבילה.

  2. לחץ באמצעות לחצן העכבר הימני על הקבצים שנבחרו ובחר Web Essentials > Create image sprite בתפריט תלוי ההקשר. לדוגמה:

    צילום מסך המציג כיצד ליצור Sprite בתמונה
  3. בחר מיקום לשמירת קובץ האוסף. קובץ ה- ‎.sprite הוא קובץ XML המתאר את ההגדרות והקבצים באוסף. האיורים הבאים מציגים דוגמה של אוסף קבצי PNG וקובץ ה- XML התואם שלו מסוג sprite.

    צילום מסך של קובץ Sprite

    צילום מסך של קובץ XML מסוג Sprite

הרחב את הכישורים שלך
סייר בהדרכה
קבל תכונות חדשות לפני כולם
הצטרף למשתתפי Office Insider

האם מידע זה היה שימושי?

תודה על המשוב!

תודה על המשוב! נראה שכדאי לקשר אותך לאחד מנציגי התמיכה של Office.

×