نقوم بتحسين ضغط الحزم بنسبة 40٪ من حجم الملف ، عن طريق استبدال التجزئة القياسية ببادئة من حرف واحد + التجزئة لمسار الملف.تسمح لك Css-modules بكتابة مكونات Bird و Cat ، مع وجود أنماط في الملفات التي تحمل نفس الاسم styles.css وفئات .block في كل منها ، وستختلف هذه الفئات لكل من هذه المكونات.
.block { }
.name { }
.block { }
.name { }
لا يوجد شيء صعب هنا: تقوم حزمة الويب بتجزئة كل فئة من جميع الملفات باستخدام الإعداد "[التجزئة: base64: 8]". سيتم إعادة تسمية جميع الفصول ، والروابط الملصقة لفهم أي فئة جاءت. في الإصدار الأساسي من التجميع ، سيكون لدينا ملف styles.css للأنماط و styles.js للروابط عند العمل مع js.استمرارًا لحالة الاختبار ، نحصل على 4 فئات مستقلة بأسماء غريبة مثل k3bvEft8:
.k3bvEft8 { }
.f2tp3lA9 { }
.epIUQ_6W { }
.oRzvA1Gb { }
قم بتشغيل تجميع الإنتاج وضغط الملفات. في الحامل ، تم حزم ملف CSS 300 كيلوبايت في 70 كيلوبايت باستخدام gzip [أو 50 كيلوبايت باستخدام brotli]. الضغط صغير لأن التجزئات عبارة عن سلاسل يتم إنشاؤها بشكل عشوائي وتضغط بشكل سيء للغاية. لا ترى خوارزميات الضغط تسلسلات وتضطر إلى تذكر مواقع كل رمز ، أي نقل محتويات هذه الأقسام كما هي دون ضغط.شيء ما يجب القيام به مع هذا. ولكن ماذا؟ أثناء التشغيل ، تقوم حزمة الويب بقراءة شجرة الملفات بشكل غير متزامن ، كما أنها تمر بأسماء الفئات. في كل مرة بطريقة مختلفة. الشيء الوحيد الذي يمكنك التمسك به هو ترتيب الأسماء داخل css - إنه ثابت (وإلا فإن كل شيء سينكسر ، في css المهم هو الأمر). يتم ترميز رقم موضع الفصل في الملف في بادئة من حرف واحد. يمكنك أخذ الترميز بـ 52 حرفًا ([a-zA-Z] +) أو 64 حرفًا ([a-zA-Z0-9 _-] +). الشيء الرئيسي هنا هو عدم نسيان وضع بادئة واقية في الحالات التي تحتوي على رقم أو واصلة.
.a { }
.b { }
.c { }
.d { }
يبدو أنها تبدو جيدة - يتم ضغط الأسماء قدر الإمكان. لكن المشكلة هي أن حزمة الويب غير متزامنة ، وكل عملية إطلاق ، وخاصة عندما يتم تشغيل التجميعات المتزامنة للخادم والعميل بالتوازي ، تتلقى الملفات بطريقة فوضوية ، كما تفعل أسماء الفئات. شكرا على السرعة ، لكنها تتدخل هنا.
.c { }
.d { }
.a { }
.b { }
كما ترى ، تم اكتشاف عدم تطابق في ترتيب الملفات.نقوم بإصلاح هذا السلوك عن طريق تذكر الملف ، ومن أين جاءت الفئات ، ورقم موضعها.
.a { }
.b { }
.a { }
.b { }
حفظ الترتيب داخل الملفات. ولكن عليك أن تميز الملفات بطريقة أو بأخرى. يساعد التجزئة من مسار الملف على تجنب الالتباس.
.a_k3bvEft8 { }
.b_k3bvEft8 { }
.a_oRzvA1Gb { }
.b_oRzvA1Gb { }
("_" ليس مطلوبًا هنا ، إنه لأغراض توضيحية فقط. ولها طول ثابت ، بخلاف البادئة ، ولا يمكن أن تكون هناك تصادمات)لقد حصلنا على أسماء فئات فريدة تمامًا للمشروع ، ولكنها تحتوي على تسلسلات متكررة.في مشروعنا ، من ملفات css 50 Kb و js 47 Kb حصلنا على css 30 Kb و js 28 Kb [58 Kb في المجموع ، brotli].توفير 40 كيلوبايت تقريبًا. سيقل حجم Css الحرج وحجم html قليلاً.يبقى كتابة فئة لمعالجة البيانات من حزمة الويب وإجراء مكالمة في تكوين css-loader (getLocalIdent)ملاحظة: يمكنك المضي قدمًا وحفظ مسارات الملفات وفرز المسارات واستبدالها أيضًا باستراتيجية من حرف واحد ، ولكن هذا أسوأ من حيث التخزين المؤقت على المدى الطويل ، بالإضافة إلى أنك تحتاج إلى إجراء عدة تمريرات في التجميع وتجميع العميل / الخادم بشكل تسلسلي.PS2 يمكنك تجربة مشروعك الآن ، إذا أخذت الكود هناPS3. أثناء الإنتاج ، نقوم بضغط ملفات * .css و * style.js بنسبة 93٪. نقوم بتحويل 71،6 كيلوبايت من 1،1 ميجابايت للملف غير المعبأ (بروتلي)