كيف يمكنني تقليل حجم حزمة تطبيق Vue.js الخاص بي

استخدم خطوة بناء مع هز الأشجار

واحدة من أكثر الطرق فعالية لتقليل حجم الحزمة هي استخدام أدوات البناء الحديثة التي تدعم تجنب الأشجار. تهتز الأشجار هو عملية تلغي الكود غير المستخدم من الحزمة النهائية. تم تصميم واجهات برمجة تطبيقات Vue والعديد من مكتبات JavaScript الحديثة لتكون قابلة للارتقاء عندما يتم تجميعها بشكل صحيح. على سبيل المثال ، لن يتم تضمين مكونات VUE غير المستخدمة مثل "المدمج" في بنيات الإنتاج إذا لم يتم استخدامها. تتجنب القوالب المسبقة أثناء البناء أيضًا شحن برنامج التحويل البرمجي VUE إلى المتصفح ، والذي يمكن أن يوفر ما يقرب من 14 كيلو بايت من JavaScript المصغرة والمجهزة ، مما يقلل من تكاليف وقت التشغيل.

إدارة وتحليل التبعيات

تبعيات في كثير من الأحيان تساهم بشكل كبير في حجم الحزمة. من المهم:

-اختر التبعيات التي تقدم تنسيقات وحدة ES وهي صديقة لتهوية الأشجار (على سبيل المثال ، "Lodash-Es` بدلاً من" Lodash ").
-قم بتدقيق تبعياتك بانتظام باستخدام أدوات مثل "WebPack-Bundle-Analyzer" لتحديد الحزم الكبيرة أو غير الضرورية.
- قم بإزالة التبعيات غير المستخدمة باستخدام أدوات مثل "DepCheck" أو "NPM Brune".
- استبدل تبعيات كبيرة ببدائل أصغر وأكثر تركيزًا. على سبيل المثال ، يمكن استبدال مكتبة مخططات ثقيلة مثل `echarts" بأصغر مثل chartist.js أن يقلل بشكل كبير من حجم الحزمة.

المسارات والمكونات الكسولة

التحميل البطيء هو استراتيجية حيث يتم تحميل رمز للطرق أو المكونات فقط عند الحاجة ، بدلاً من تجميع كل شيء مقدمًا. يدعم Vue Router طرق التحميل البطيئة عن طريق استيراد المكونات ديناميكيًا ، وتقسيم الحزمة إلى قطع أصغر تعمل على تحسين أداء الحمل الأولي. تقلل هذه الطريقة بشكل كبير من حجم الحزمة الرئيسية وتنشر تحميل الكود مع مرور الوقت مع انتقال المستخدمين عبر التطبيق.

استخدم تقسيم التعليمات البرمجية والواردات الديناميكية

يدعم WebPack ، التي تُستخدم عادة في مشاريع VUE ، تقسيم الكود من خلال عبارات الاستيراد الديناميكية (). هذا يعني أنه يمكن تقسيم أجزاء من التطبيق إلى حزم منفصلة يتم تحميلها بشكل غير متزامن. يساعد استخدام تقسيم الكود بشكل صحيح في إدارة حجم الحزمة عن طريق تحميل الكود المطلوب فقط عند الطلب.

الإرشاد والضغط

يقلل الإعدام من حجم ملفات JavaScript عن طريق إزالة المسافة البيضاء والتعليقات وتقصير الأسماء المتغيرة. أدوات مثل UglifyJS أو terser (غالبًا ما يتم دمجها في عمليات الإنشاء الحديثة) تلقائيًا minify الكود أثناء خطوة بناء الإنتاج. بالإضافة إلى ذلك ، يقلل ضغط Gzipping أو Brotli من حجم الأصول التي يتم تقديمها للمستخدمين.

استخدام بدائل VUE أصغر لحالات الاستخدام المحددة

بالنسبة للمشاريع التي قد يكون فيها إطار Vue.js الكامل ثقيلًا للغاية ، خاصة بالنسبة لحالات التحسين التدريجي ، فكر في استخدام بدائل أخف مثل Petite Vue ، والتي يبلغ حجمها حوالي 6 كيلو بايت فقط. هذا مفيد إذا لم يتطلب المشروع النظام الإيكولوجي الكامل VUE.

النطاق واستيراد أجزاء فقط من المكتبات

تتيح العديد من المكتبات الكبيرة مثل Bootstrap Vue أو Lodash استيراد مكونات أو وظائف محددة فقط بدلاً من المكتبة بأكملها. على سبيل المثال ، بدلاً من استيراد مكتبة Bootstrap Vue بأكملها ، استيراد المكونات التي تحتاجها فقط ، مما يقلل من حجم الحزمة عن طريق استبعاد الأجزاء غير المستخدمة. وبالمثل ، فإن استيراد وظائف Lodash بشكل معياري ("خريطة الاستيراد من" Lodash/Map "بدلاً من Lodash بأكمله).

تجنب الأنماط المضمنة وأطر CSS الكبيرة إذا لم تكن هناك حاجة

أطر عمل CSS مثل Bootstrap إضافة إلى حجم الحزمة. قم بتقييم ما إذا كنت بحاجة حقًا إلى الإطار بالكامل والنظر في بدائل مثل CSS Tailwind للحصول على حزم CSS أكثر مرونة وأصغر. أيضًا ، فكر في إزالة واردات الأسلوب غير المستخدمة أو استضافة CSS خارجيًا إن أمكن.

عرض جانب الخادم وتوليد المواقع الثابتة

إن نقل بعض التقديم إلى الخادم عبر SSR (عرض من جانب الخادم) أو SSG (توليد الموقع الثابت) يقلل من كمية JavaScript اللازمة على جانب العميل ، مما يقلل من حجم الحزمة بشكل فعال. هذا يحول مسؤوليات إلى الخادم ، وإرسال HTML مسبقًا إلى العميل مع الحد الأدنى من JS للتفاعل.

تحسين الصور والأصول الأخرى

على الرغم من أن هذا لا يؤثر بشكل مباشر على حجم حزمة JavaScript ، فإن تحسين الصور والخطوط والأصول يساهم في أداء تحميل الصفحة العام ، والذي يكمل تحسينات JavaScript.

استخدم ميزات JavaScript الحديثة وملفيات الحكمة

يمكن أن يؤدي استخدام بناء جملة JavaScript الحديثة إلى حزم أصغر عند دمجها مع أدوات البناء الحديثة. تجنب polyfills غير الضرورية ما لم تستهدف المستعرضات القديمة ، والنظر في ملفيات الشرطية بناءً على قدرات متصفح المستخدم.

ملخص الممارسات لتقليل حجم حزمة Vue.js

- استخدم أدوات الإنشاء مع تهزك الأشجار (على سبيل المثال ، WebPack ، Vite).
- قوالب VUE قبل المجمع.
-تحليل محتويات الحزمة مع أدوات مثل "webpack-bundle-analyzer".
- إزالة أو استبدال التبعيات الثقيلة.
- استيراد المكونات أو الوظائف المطلوبة فقط من المكتبات.
- تنفيذ تحميل كسول للطرق والمكونات.
- استخدم تقسيم التعليمات البرمجية والواردات الديناميكية.
- تطبيق الإعدام والضغط.
- النظر في بدائل أصغر مثل Petite Vue لتطبيقات محددة.
- تحسين استخدام CSS وتجنب استيراد الأطر بأكملها دون داع.
- استخدم SSR أو SSG لتقليل حجم حزمة من جانب العميل.
- تحسين الأصول واستخدام ميزات JavaScript الحديثة بعناية.