اكتب في المقدمة
في الآونة الأخيرة ، صادفت بعض تحميل المحتوى في العبوة المعيارية الزاوية في العمل. شعرت أن لدي بعض المزالق في الوسط ، لذلك قمت بتمييزها هنا.
خلفية المشروع:
يستخدم المشروع بشكل أساسي AngularJS كإطار أمامي. عندما تم إصدار المشروع من قبل ، سيتم تعبئة جميع البرامج النصية الأمامية وضغطها في ملف. سيتم تحميله عند الوصول إلى الصفحة أولاً ، مما يؤدي إلى التحميل الأولي البطيء للصفحة. على هذا الأساس ، يُقترح التحميل عند الطلب ، أي أن البرامج النصية للوحدة لن يتم تحميلها إلا عندما يصل المستخدم إلى وحدة معينة.
أدوات:
يستخدم المشروع التغليف الشديد وفقًا لمواصفات AMD ، ويستخدم Grunt-Contrib-requirejs لضغط وحدات ودمجها ، ويستخدم Oclazyload لإكمال التحميل الكسول للوحدة الزاوية.
عملية المشروع:
تعبئة الوحدة النمطية
تتم كتابة الرمز في المشروع بشكل أساسي وفقًا لمواصفات AMD ، ويتم استخدام Grunt-Contrib-requirejs لضغط كل وحدة في ملف JS.
السؤال 1: في رمز المشروع ، ستعتمد كل وحدة على مكتبات الطرف الثالث/الخدمات العامة في المشروع/التعليمات العامة في المشروع. إذا لم تتم معالجة هذا الجزء من المحتوى ، فسيقوم Grunt-contrib-requirejs بتحميل جميع الوحدات النمطية التي يعتمد عليها عند ضغط كل وحدة ، ثم ضغطها في نفس ملف JS.
الإجابة: اضغط على مكتبة الطرف الثالث/الخدمات العامة والتعليمات في ثلاث وحدات ، ثم قم بإزالتها باستخدام "استبعاد" من البرنامج النصي للتغليف لكل وحدة. كما هو مبين في الشكل أدناه:
تجدر الإشارة إلى أن اسم الوحدة النمطية للوحدة العامة يحتاج إلى الحصول على ملف JS مع نفس الاسم تحت المسار المقابل.
تحميل عند الطلب
بعد تغليف البرنامج النصي في ملفات JS حسب الوحدة النمطية ، فإن الخطوة التالية هي تحميل وحدات مختلفة وفقًا لطلبات المستخدم. يستخدم المشروع مستخدم واجهة المستخدم للتعامل مع قفزات التوجيه. يمكنك البدء من الطريق لإكمال التحميل البطيء للوحدات النمطية.
الطريقة المحددة هي: عندما يقوم المستخدم بتشغيل قفزة الطريق ، يتم تحميل الوحدة النمطية التي ينتمي إليها المستخدم وفقًا للحالة التي يريد المستخدم القفز إليها. بناءً على ذلك ، يجب إضافة رسم الخرائط بين الحالة والوحدة. في البداية ، من الضروري تحميله باستخدام requirejs. لقد وجد أنه يمكن تحميل البرنامج النصي ، لكن وحدات التحكم/الخدمات/المرشحات المسجلة في Angular لا تعمل. وجد التحقيق أن الخدمات مثل وحدات التحكم المسجلة بواسطة Angular بعد استدعاء طريقة bootstrap لن يتم استدعاؤها مرة أخرى. بناءً على ذلك ، يتم تقديم Oclazyload للتحميل (يحتوي Oclazyload على بعض الحقن والتعديلات على رمز المصدر الزاوي).
حتى الآن ، تم تنفيذ التحميل عند الطلب بشكل أساسي ، ولكن لا يزال هناك العديد من المشكلات:
تبعيات المشروع بين الوحدات النمطية
نظرًا لوجود تبعيات قوية بين المشاريع بين بعض الوحدات ، فإن المعالجة هي إضافة تبعيات بين الوحدات النمطية في ملف التكوين. قبل تحميل الوحدة النمطية ، تحقق مما إذا كان لديه وحدة تابعة. إذا كان الأمر كذلك ، فسيتم تحميل الوحدة التابعة أولاً. بعد تحميل الوحدة التابعة ، سيتم تحميل الوحدة الحالية.
تحميل كسول للتعليمات ؛
في الزاوي ، يمكن استخدام ترجمة $ لتنفيذ الترابط بين التعليمات. معالجة هذا هو تكوين اسم التعليمات واعتماد وحدة التعليمات. عند استخدام تعليمات معينة ، يتم تحميل الوحدة أولاً ثم يتم تنفيذ طريقة التجميع. هذا الحل يمكن أن يحل معظم تبعيات التعليمات.
موقع التعليمات. تستخدم معظم المشاريع الصفحات الطويلة ، ويتم تقسيم كل صفحة طويلة إلى عدة مناطق ، وكل منطقة أمر. ستكون هناك مشكلة عند استخدام الاعتراض ، أي وقت التحميل لكل تعليمات يختلف. سيتم إلحاق الأوامر التي تعود أولاً إلى DOM أولاً ، مما يؤدي إلى عدم اليقين في تخطيط الصفحة. يتمثل الحل في استخدام آلية deffer وبعد تحميل جميع التعليمات/تجميعها ، إضافة التنفيذ إلى شجرة DOM.
التبعيات بين التوجيهات: هناك أيضًا تبعيات للمشروع بين التوجيهات. الحل لهذا هو دمج التعليمات المترابطة في وحدة نمطية وحزمها في نفس ملف البرنامج النصي. يمكن لهذا الحل حل معظم تبعيات التعليمات ، ولكن لا يمكن حل التبعيات أثناء عملية التهيئة. قد يكون هناك تعليمات معينة تم تجميعها ، ولم يتم تجميع التبعيات في التعليمات بعد. لمثل هذا مثال خاص فائق ، يتم تحميل البرنامج النصي والقالب فقط عند تهيئة الصفحة.
ما سبق هي المشكلات التي واجهتها خلال عملية المشروع. في الأساس ، في كل مرة تتقدم فيها ، فأنت تكافح مع الحفرة. العديد من الأشياء هي المرة الأولى التي تتواصل فيها معهم ، وأشعر أنني تعلمت شيئًا ما. قد لا تكون حلول العديد من المشكلات واضحة للغاية. واجه آخرون جميع المشاكل المذكورة أعلاه. طالما أنك تستخدم محرك البحث جيدًا وقراءة/فهم رمز الآخرين بنفسك ، يمكن حل جميع المشكلات بنجاح.
بعض المزالق حول التحميل الكسول الزاوي هي كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.