يقدم لك محررو Downcodes دليلاً عمليًا حول تحسين ملفات JavaScript التي يزيد حجمها عن 1 ميجابايت. ستؤثر ملفات JS الكبيرة بشكل خطير على سرعة تحميل صفحات الويب وتقلل من تجربة المستخدم. ستقدم هذه المقالة بالتفصيل مجموعة متنوعة من أساليب التحسين، بما في ذلك ضغط التعليمات البرمجية، وتقسيم التعليمات البرمجية، واهتزاز الأشجار، وتحميل CDN، والتحميل البطيء، والتحميل غير المتزامن، وما إلى ذلك، لمساعدتك على تحسين أداء صفحة الويب.
يمكن تحسين ملفات JS التي يتجاوز حجمها 1 ميجابايت وضغطها من خلال طرق مختلفة مثل ضغط التعليمات البرمجية أو تقسيم التعليمات البرمجية أو هز الشجرة أو استخدام CDN لتحميل مكتبات الطرف الثالث أو التحميل البطيء أو التحميل غير المتزامن. يمكن لهذه التقنيات تقليل حجم ملف JavaScript بشكل كبير، وتسريع تحميل صفحات الويب، وتحسين تجربة المستخدم، وتحسين تصنيفات تحسين محركات البحث (SEO).
ومن بين هذه الأساليب، يعد تقسيم التعليمات البرمجية استراتيجية ذات أهمية خاصة. يتيح لك تقسيم التعليمات البرمجية تقسيم ملف JS كبير إلى عدة ملفات أصغر وتحميل هذه الملفات عند الحاجة فقط. وتتمثل ميزة ذلك في أنه يقلل من كمية البيانات عند تحميل الصفحة الأولى، وبالتالي تسريع تحميل الصفحة. توفر أدوات إنشاء الواجهة الأمامية الحديثة، مثل Webpack وRollup، دعمًا لتقسيم التعليمات البرمجية قابلاً للتكوين بسهولة.
يعد ضغط التعليمات البرمجية الطريقة الأكثر مباشرة وشائعة لتقليل حجم ملف JS. تعمل عملية الضغط عن طريق إزالة كافة الأحرف غير الضرورية في التعليمات البرمجية المصدر (مثل المسافات والأسطر الجديدة والتعليقات) وإعادة تسمية المتغيرات لتقليل عدد الأحرف. هذه العملية لا تغير نتائج الكود.
الضغط باستخدام الأدوات والمكونات الإضافية: UglifyJS وTerser وGoogle Closure Compiler هي العديد من أدوات ضغط JavaScript الشائعة. توفر معظم أدوات إنشاء الواجهة الأمامية الحديثة (مثل Webpack وGulp) مكونات إضافية أو طرقًا لدمج أدوات الضغط هذه. الضغط التلقائي أثناء عملية الإنشاء: قم بدمج خطوات الضغط في عملية الإنشاء التلقائية لضمان ضغط كود الإنتاج دائمًا. يؤدي هذا إلى تجنب الضغط مباشرة في الكود المصدري ويبقي الكود المصدري قابلاً للقراءة والصيانة.يسمح لك تقسيم التعليمات البرمجية بفصل قاعدة التعليمات البرمجية الخاصة بك إلى أجزاء وتحميل الأجزاء المقابلة فقط عند الحاجة إليها بالفعل. وهذا مهم بشكل خاص للتطبيقات الكبيرة، لأنه يمكن أن يقلل الوقت الذي يستغرقه تحميل الشاشة الأولى.
استخدم أدوات تعبئة الوحدات مثل Webpack: توفر هذه الأدوات خيارات تكوين بسيطة لتحقيق تقسيم التعليمات البرمجية. على سبيل المثال، يقوم Webpack بتنفيذ الاستيراد الديناميكي من خلال بناء جملة import()، مما يجعل من الممكن تحميل التعليمات البرمجية عند الطلب. التقسيم القائم على جهاز التوجيه: بالنسبة لتطبيقات الصفحة الواحدة (SPA)، يعد تقسيم التعليمات البرمجية على أساس المسار أمرًا شائعًا جدًا. قم بتحميل البرنامج النصي للصفحة المقابلة ديناميكيًا وفقًا للمسار الذي زاره المستخدم، مما يقلل التحميل الأولي لكمية كبيرة من التعليمات البرمجية عديمة الفائدة.إن اهتزاز الشجرة هو أسلوب يعمل على تقليل حجم الملف النهائي عن طريق إزالة الأجزاء غير المستخدمة من التعليمات البرمجية. يتطلب هذا أن تكون التعليمات البرمجية معيارية وأن تستخدم بناء جملة وحدات ES، لأنه يمكن تحليل ذلك بشكل ثابت أثناء عملية الإنشاء وتحديد عمليات التصدير والاستيراد المستخدمة فعليًا.
تكوين Webpack أو Rollup لهز الشجرة: تعمل هذه الأدوات غالبًا على تمكين هز الشجرة تلقائيًا في وضع الإنتاج للمساعدة في إزالة التعليمات البرمجية غير المستخدمة. انتبه إلى الآثار الجانبية للتعليمات البرمجية: تجنب الآثار الجانبية عند كتابة تعليمات برمجية للوحدة النمطية، لأنها قد تمنع الأدوات من إزالة التعليمات البرمجية غير المستخدمة بشكل صحيح.يمكن أن يؤدي استخدام CDN (شبكة توصيل المحتوى) لتحميل مكتبات الجهات الخارجية (مثل jQuery وReact وما إلى ذلك) إلى تقليل التحميل على الخادم وتقليل وقت التحميل الأولي للتطبيق. وهذا يعني أيضًا أنه يمكن للمستخدمين تحميل هذه المكتبات من ذاكرة التخزين المؤقت، مما يقلل بشكل أكبر من أوقات التحميل.
اختر CDN مع تخزين مؤقت جيد: يقدم البعض مثل Google CDN أو Cloudflare خدمات CDN للعديد من المكتبات الشائعة. مقارنة الاستضافة الذاتية مقابل استضافة CDN: في بعض الأحيان اعتمادًا على الموقع الجغرافي لقاعدة المستخدمين الخاصة بك، قد تكون الاستضافة الذاتية أكثر ملاءمة للتحكم وتحسين الأداء. حدد اختيارك بعد الموازنة بين الإيجابيات والسلبيات.يضمن التأخير أو التحميل غير المتزامن لتعليمات JavaScript البرمجية غير المهمة أن هذه الرموز لا تمنع عرض الصفحة. يعد هذا الأسلوب فعالاً بشكل خاص بالنسبة للميزات المطلوبة فقط عندما يتفاعل المستخدم معها.
استخدام سمات المزامنة والتأجيل: HTML