عادةً ما تأتي مكونات JS مع صورة css، ولكن قد يكون استخدامها بهذه الطريقة أمرًا مزعجًا بعض الشيء، ولجعل المكون منفردًا بدرجة كافية، خطرت ببالي فكرة تعبئة صورة CSS في JS، ثم. بالمناسبة، يبدو أن تقليل عدد الطلبات أكثر أهمية.
إذن، كيف يتم الحزم؟ على الرغم من وجود حلول مثل حزم الموارد ، إلا أن مستخدمينا الأساسيين ما زالوا يستخدمون المتصفحات العصرية مثل ie6!
الحل الخاص بي:
- CSS : يمكن تخزين CSS في js كسلسلة وإضافته ديناميكيًا إلى الصفحة بواسطة js. قد لا تكون الصفحة مناسبة للاستخدام، لكن المكون عادةً لن يتأثر.
- الصورة : يتم تجميع الصور المستخدمة في CSS في js باستخدام dataURI ( RFC 2397 ) وMHTML ( RFC 2557 ). (لا يزال يُنصح باستخدام dataURI وMHTML اللذين كتبهما Qin Ge للطلاب الذين لا يعرفون ما هما). إذا كنت تريد مسارًا مطلقًا في CSS، فيمكنك أيضًا حفظ js. إذا تم استخدام js مباشرةً، فهذا ممكن من الناحية النظرية، ولكن من الأفضل عادةً تغيير اسم فئة js.
- الفلاش : يمكن أيضًا تعبئة بعض الفلاشات الصغيرة نسبيًا، مثل التخزين والنسخ وما إلى ذلك، ومع ذلك، يمكننا الآن حل مشكلة غير IE، استخدم الروابط الخارجية.
فيما يلي مثال على اختبار التغليف .
بعض التفاصيل والتشابك
- ليس من المعقول بالضرورة تجميع جميع الصور في js. ما يجب أن يتم تعبئته هو الصور التي يجب استخدامها.
فهل من الأفضل تجميع الصور المستبعدة في حزمة أخرى أم استخدام الصور مباشرة؟ - يمكن ضغط الصور أولاً ثم تحريرها. أداة ضغط الصور التي اخترتها هي pngout ، وعادةً ما أستخدم
-s5 .
هل أجرى شخص ما بعض الاختبارات على البيانات غير المضغوطة في base64؟ ربما لا ، يمكن للجميع إصدار حكمهم الخاص. - ستكون مراجع الصور المتكررة كبيرة جدًا إذا كنت تستخدم dataURI مباشرة، وgzip غبي مثل الخنزير ولن يضغطه.
اخترت حفظه كمتغير js، بينما يستخدم زملائي في تاوباو طريقة الفصل. - لا يمكن عرض MHTML في ie7+/vista بسبب عدم وجود محدد النهاية. يفتقر Win03sp2 إلى
Content-Type وسيؤدي إلى مطالبات أمنية والسبب هو أن MIME ليس قياسيًا ولا يمكن حذف كل شيء. - هل يجب أن أختار تجميع كل شيء في ملف واحد أم تجميعه في ملفين وفقًا لأنواع MHTML وdataURI وإرسال الملف وفقًا لـ ua على الخادم أو قراءته بذكاء بواسطة مكتبة الفصل؟
- هناك مشكلة في استخدام dataURI لتجميع swf. يُقال أنه لا توجد مشكلة في fp8، ولكنه الآن fp10.
الحل الفردي الآخر هو حزم js في swf، لكنه يبدو غير متناغم.
مثال متعدد الأجزاء/متعلق
إنه ليس قياسيًا ولكن يمكن تشغيله، كما أن فواصل الأسطر مهمة جدًا.
نوع المحتوى: متعدد الأجزاء/متعلق؛ الحدود = "_BAIDU_YOUA_BB_YEP"
--_BAIDU_YOUA_BB_YEP
نوع المحتوى: صورة/png
موقع المحتوى: logo.png
ترميز نقل المحتوى: base64
...base64...
--_BAIDU_YOUA_BB_YEP
نوع المحتوى: صورة/png
موقع المحتوى:nono.png
ترميز نقل المحتوى: base64
...base64...
--_BAIDU_YOUA_BB_YEP--
