التصغير والتجميع في SharePoint Online‏

توضح هذه المقالة كيفية استخدام أساليب التصغير والتجميع مع Web Essentials لتقليل عدد طلبات HTTP ولتقليص المدة الزمنية التي تستغرقها تحميل الصفحات في SharePoint Online.

عند القيام بتخصيص موقع ويب يمكنك إضافة عدد كبير من الملفات الإضافية إلى الخادم لدعم التخصيص في النهاية. إضافة JavaScript وCSS وصور إضافية يزيد من عدد طلبات HTTP إلى الخادم الذي يزيد بدوره من الوقت المستغرق لعرض أي صفحة ويب. إذا كانت لديك ملفات متعددة من نفس النوع، يمكنك تجميع هذه الملفات لجعل تنزيلها بشكلٍ أسرع.

بالنسبة لملفات JavaScript وCSS، يمكنك أيضاً استخدام طريقة تُسمى التصغير، يمكنك من خلالها تقليل الحجم الكلي للملفات من خلال إزالة المسافات والأحرف الأخرى غير الضرورية.

تصغير وتجميع ملفات 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، في "مستكشف الحلول"، حدّد الملفات التي تريد تضمينها في المجموعة.

  2. انقر بزر الماوس الأيمن على الملفات المحددة واختر ‏Web Essentials‏ > إنشاء ملف مجموعة JavaScript‏ من قائمة السياق. على سبيل المثال:

    لقطة شاشة تعرض خيارات القائمة Web Essentials

عرض نتائج تجميع ملفات JavaScript وCSS

عند إنشاء مجموعة JavaScript وCSS، سيقوم Web Essentials بإنشاء ملف XML يُسمى ملف وصفة يحدد ملفات JavaScript وCSS وبعض معلومات التكوين:

لقطة شاشة لملف وصفة JavaScript وCSS

بالإضافة إلى ذلك، إذا تم تعيين علامة التصغير على "صواب" في وصفة التجميع، فسيتم تقليل حجم الملفات والمجموعة معاً. هذا يعني أن الإصدارات الجديدة والمصغرة في ملفات JavaScript قد تم إنشاؤها لتتمكن من الرجوع إليها في الصفحة الرئيسية الخاصة بك.

لقطة شاشة للعلامة "minify" معينة إلى صواب

عند تحميل صفحة من موقع ويب خاص بك، يمكنك استخدام أدوات المطور من مستعرض الويب، مثل Internet Explorer 11، لرؤية عدد الطلبات المرسلة إلى الخادم والمدة التي يستغرقها كل ملف لتحميله.

يعرض الرسم التوضيحي التالي نتائج تحميل ملفات JavaScript وCSS قبل التصغير.

لقطة شاشة تعرض 80 عنصراً قيد التنزيل

بعد تجميع ملفات CSS وJavaScript معاً، ينخفض عدد الطلبات إلى 74 وعند تنزيل كل ملف بشكل فردي فإنه يستغرق وقتاً أطول قليلاً من الملفات الأصلية:

لقطة شاشة تعرض 74 عنصراً يتم تنزيلها

بعد التجميع، ينخفض حجم ملف المجموعة JavaScript انخفاضاً كبيراً من 815 كيلوبايت إلى 365 كيلوبايت:

لقطة شاشة تعرض حجم التنزيل المخفّض

تجميع الصور بإنشاء "مجموعة صور"

على نحو شبيه بطريقة تجميع ملفات JavaScript وCSS، يمكنك دمج عدة رموز صغيرة وغيرها من الصور الشائعة في ورقة "مجموعة صور" أكبر ثم استخدام CSS لإظهار الصور الفردية. بدلاً من تنزيل كل صورة بشكل فردي، فإن مستعرض الويب الخاص بالمستخدم يقوم بتنزيل ورقة "مجموعة صور" مرة واحدة ثم تخزينها على الكمبيوتر المحلي. يؤدي ذلك إلى تحسين أداء تحميل الصفحات بتقليل عدد التنزيلات والانتقالات إلى خادم الويب.

لإنشاء "مجموعة صور" في Web Essentials‏

  1. في Visual Studio، في "مستكشف الحلول"، حدد الملفات التي تريد تضمينها في المجموعة.

  2. انقر بزر الماوس الأيمن على الملفات المحددة ثم اختر ‏Web Essentials‏ > إنشاء "مجموعة صور" من قائمة السياق. على سبيل المثال:

    لقطة شاشة تعرض كيفية إنشاء صورة متحركة
  3. اختر موقعاً لحفظ ملف "مجموعة صور". إن ملف .sprite هو ملف XML يصف الإعدادات والملفات في "مجموعة صور". تظهر الأرقام التالية مثالاً لملف "مجموعة صور" PNG وملف .sprite XML المناظر.

    لقطة شاشة لملف رسومات

    لقطة شاشة لملف XML متحرك

تعزيز مهارات Office
استكشاف التدريب
الحصول على الميزات الجديدة أولاً
الانضمام إلى Office Insider

هل كانت المعلومات مفيدة؟

نشكرك على ملاحظاتك!

شكراً لك على الملاحظات! يبدو أنه من المفيد إيصالك بأحد وكلاء دعم Office لدينا.

×