it-swarm.asia

هل يجب دمج ملفات js / css في ملف واحد؟

يوصي كل من YSlow و Google إضافات سرعة الصفحة بدمج البرنامج النصي (و ملفات النمط) في ملف واحد لكل منها لتقليل عدد طلبات HTTP ، ويمكنني بالتأكيد أن أرى النقطة في هذا الأمر عندما تكون ملفات البرامج النصية متسقة عبر الموقع بأكمله ، ولكن لتطبيق ويب يحتوي على متطلبات مختلفة عبر الموقع.

الطريقة التي أراها هناك بعض الخيارات:

  1. ادمج كل الملفات المستخدمة عبر الموقع ، وكل صفحة تحصل على نفس الملف المدمج - الجانب السلبي عبارة عن محتوى غير مستخدم يعمل على تجميع البرنامج النصي (وتحميل أول أثقل (إعادة التحميل أيضًا عند تغيير أي برنامج نصي مكون))

  2. الجمع بين الملفات على أساس كل صفحة - الجانب السلبي هو كل صفحة مع متطلبات مختلفة يحصل على ملف مدمج مختلف (تحميل أول أثقل لكل نوع صفحة)

  3. تجاهل التفسير الصارم "لملف واحد فقط" للتوصيات وقم بتحميل الصفحة في ملفات متعددة حسب الاقتضاء ، ونأمل أن يؤدي التخزين المؤقت إلى إلغاء عدد طلبات HTTP في الحالة العامة - الجانب السلبي هو عدد طلبات HTTP في كل صفحة

أفكار؟

11
Cebjyre

الخيار 2 هو الأسوأ ؛ هذا يعني أن كل صفحة بها مجموعة مختلفة من البرامج النصية JS المطلوبة ستؤدي إلى طلب HTTP. وستجعل الأداء الكثير أسوأ.

الخيار 1 هو الأفضل. في النهاية ، سيقوم معظم المستخدمين بزيارة معظم "أنواع" صفحات موقع الويب الخاص بك ، لذلك لا يزال من المفيد دمج كل شيء في ملف واحد ، باستثناء ربما ملفات JS الكبيرة المطلوبة في عدد قليل من الصفحات التي تمت زيارتها نادرًا.

قد تكون عملية النقر على الصفحة الأولى أبطأ من ملفات مختلفة ، ولكن لا يزال الأمر يستحق ذلك لأن كل صفحة أخرى ستستخدم ملف JS المخبأ العالمي.

نصيحة واحدة على الرغم من ؛ دمجها تلقائيًا إذا لم تكن بالفعل!

11
Thomas Bonini

أقوم عمومًا بدمج "جافا سكريبت العمومي" - jQuery والإضافات الشائعة - في ملف واحد ، ثم تقديم مكونات إضافية إضافية كملفات منفصلة عند الحاجة.

على سبيل المثال ، هناك موقع واحد أقوم بتشغيله يحتوي العديد من الصفحات على جداول بيانات عليها ، لذا لدي global.js مع jQuery و DataTables و SuperFish (لقائمي). هناك صفحتان على الموقع يستخدمان "lightbox" ، لذلك لدي نص برمجي منفصل لهاتين الصفحتين.

بالنسبة إلى CSS ، أنا أخدم ملفًا واحدًا للموقع بأكمله وأحاول جعل CSS عامًا بقدر الإمكان - معظم الصفحات تحتوي فقط على عدد قليل من عناصر CSS الفريدة.

4
DisgruntledGoat

لن أقترح الجمع بين كل منهم. إذا كنت تستخدم مكتبة مشتركة ، فيمكنك الاستفادة من شبكة CDN لتسليم javascripts الخاصة بك. يمكنك بعد ذلك الاستفادة من التخزين المؤقت للمستعرض (على افتراض أن المواقع الأخرى تستخدم نفس CDN) والتسليم الموزع. Microsoft و Google لكل منهما حلول (لم أستخدمها بصراحة أيضًا ، لكنني سأبدأ بالتأكيد) وقد يكون هناك آخرون. في ملاحظة ذات صلة ، SO لديه هذا السؤال:

متى يقوم المتصفح بمسح JavaScript مؤقتًا تلقائيًا؟

والإجابة الأولى هي الذهب الخالص.

1
Larry Smithmier

على الرغم من أنه يوصى بالتأكيد باستخدام أقل عدد ممكن من الملفات ، فقد تجد أن لديك فاصل بين الوظيفة المطلوبة عند تحميل الصفحة ، والوظائف التي يمكن تأجيلها من خلال التحميل غير المتزامن.

إذا كان من الممكن دفع عدد كافٍ من JS إلى الفئة الثانية ، فيمكنك تحسين سرعة التحميل الأولية المتصورة للصفحة ، مما يوفر تجربة أفضل للمستخدمين.

1
JasonBirch