كيف تقلل من حجم حزمة Vue.JS مع Webpack

الصورة من قبل SwapnIl Dwivedi على Unsplash

أنا أعمل في فريق Industry 4.0 في Stanley Black & Decker. أنشأ فريقنا مؤخرًا ما يعادل متجر التطبيقات لمصانع ستانلي في جميع أنحاء العالم. يمكن للمصانع زيارة السوق وتحديد التطبيقات التي يحتاجون إليها بناءً على المنتجات التي ينتجونها في هذا الموقع. سيؤدي ذلك إلى إنشاء بنية مخصصة تجمع كل هذه التطبيقات معًا لتشغيل المصنع. نظرًا لتجميع عدد كبير من التطبيقات ، نتج عن إنشاء Vue للإنتاج تحذيرات متعددة حول الحجم الزائد.

حجم بناء لدينا في البداية

عندما نقوم ببناء ، نحصل على رسالتين الخطأ التاليتين:

يوصي Vue ألا يتجاوز حجم الحزم 244 كيلوبايت. لدينا 14 من الأصول وحدها حيث يتجاوز كل منها هذا الحجم. بالإضافة إلى ذلك ، لدينا أربع نقاط دخول أعلى أيضًا من الحجم الموصى به. إليكم ما فعلته لتقليل حجم بنيتنا إلى النصف.

ما الذي يسبب حزم بناء كبيرة؟

أولاً ، كنت بحاجة لفهم سبب التسبب في أحجام مجموعة الإنشاءات الكبيرة. للقيام بذلك ، قمت بتثبيت webpack-bundle-analys. سيوفر هذا دليلًا مرئيًا لحجم العناصر في كل حزمة.

تثبيت npm - ، حفظ - webpack - حزمة محلل

بعد ذلك ، أقوم بتكوين حزمة الويب لاستخدامها في ملف vue.config.js. إليك ما يبدو عليه ملف vue.config.js:

const BundleAnalyzerPlugin = requ ('webpack-bundle-analys')
    .BundleAnalyzerPlugin.
module.exports = {
    configWebpack: {
        الإضافات: [جديد BundleAnalyzerPlugin ()]
    }
}؛

مع تثبيت المكوّن الإضافي عندما أقوم بتشغيل build للإنتاج مرة أخرى ، أستطيع أن أرى أن بنيتي 2.48 ميجابايت. من الصورة أستطيع أن أرى أكبر الجناة في الحجم بوضوح:

  • النظرية-echarts
  • vuetify
  • لحظة
  • lodash

تقليل حجم Lodash

كان لوداش يشغل مساحة 70.74 كيلو بايت. يستخدم Lodash فقط في 2 أماكن في جميع التطبيقات في إطارنا. هذا هو الكثير من الفضاء لطريقتين فقط.

لم نكن فقط تحميل lodash ولكن كنا أيضا تحميل vue-lodash. كانت الخطوة الأولى لإزالة vue-lodash من package.json لدينا لأنه لم يكن هناك حاجة إليها.

كانت الخطوة التالية هي استيراد العنصرين اللذين احتجناهما فقط من lodash بدلاً من تحميل المكتبة بالكامل. كنا نستخدم cloneDeep و sortBy. استبدل المكالمة الأولية التي كانت تستورد مكتبة النُسخ بالكامل:

استيراد _ من 'lodash' ؛

أنا استبداله مع هذه الدعوة التي تستورد فقط 2 العناصر التي نحتاجها. للقيام بذلك ، أقوم بتغيير الاستيراد من lodash إلى lodash / core:

استيراد {cloneDeep، sortBy} من 'lodash / core'؛

أدى إجراء هذا التغيير إلى تقليل حجم حزمة الإنشاء الخاصة بي من 2.48 ميغابايت إلى 2.42 ميغابايت. هنا هي الصورة التي تبين الحجم الحالي للبناء.

هنا يمكننا أن نرى حجم النزل نفسه كجزء من حزمة البناء الخاصة بنا.

تقليل حجم لحظات. js

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

لحسن الحظ ، يمكننا إزالته. بدلاً من استيراد كل اللحظات. js مع هذه الدعوة:

لحظة استيراد شكل 'لحظة' ؛

يمكننا استيراد رمز معالجة التاريخ فقط من خلال هذه المكالمة:

لحظة الاستيراد من "لحظة / src / لحظة"

هناك فائدة في إجراء هذا الاستبدال على الأقل في قاعدة بياناتنا. يوجد 18 مكانًا يتم استيرادها في الكود. كان بإمكاني القيام ببحث عالمي واستبداله في الكود. ولكن إذا أضفنا تطبيقًا جديدًا إلى الإطار ، فمن المحتمل تمامًا أن يستخدم المطور المكالمة الافتراضية لاستيراد moment.js. إذا فعلوا ذلك فسوف نعود مع استيراد جميع لغات التدويل مرة أخرى.

لذلك كانت المقايضة لإنشاء اسم مستعار مختصرة في webpack. يستبدل الاختصار جميع المكالمات التي تستورد "لحظية" بـ "لحظية / src / moment". يمكننا إضافة هذا الاسم المستعار في ملف vue.config.js الخاص بنا باستخدام العزم وإعداد اسم مستعار. إليك ما يبدو عليه ملف vue.config.js الآن.

عندما أقوم بتشغيل الإصدار الخاص بنا للإنتاج الآن ، انخفضت الحزمة الخاصة بنا الآن إلى 2.22 ميغابايت في الحجم.

عندما تنظر إلى لحظة. js في الصورة ، سترى أن لغات التدويل لم تعد تُحمل على الإطلاق.

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

لحل هذه المشكلة ، استخدم حزمة الويب المدمجة IgnorePlugin لتجاهل هذه الرسالة. إليك رمز البرنامج المساعد الذي أضفته إلى ملف vue.config.js:

webpack.IgnorePlugin الجديد (/^\.\/ locale $ /، / moment $ /)

تقليل حجم Vuetify.js

الشيء التالي الذي أريد استهدافه هو حجم Vuetify.js. تشغل Vuetify مساحة تبلغ 500.78 كيلو بايت. هذا هو مساحة كبيرة لمنتج بائع واحد.

يوفر Vuetify ميزة يسمونها الانتقائية. يتيح لك ذلك استيراد مكونات Vuetify التي تستخدمها فقط. هذا من شأنه أن يقلل من حجم Vuetify. التحدي هو أن لدينا العديد من التطبيقات التي تمر ونحاول تحديد المكونات التي نستخدمها فقط لن يحدث.

في الإصدار الحالي من Vuetify (الإصدار 1.56 في وقت كتابة هذا المقال) ، يقدمون منتجًا يسمى vuetify-loader. سوف يمر عبر الكود الخاص بك ويحدد جميع المكونات التي تستخدمها ثم يستوردها في حزمة البناء الخاصة بك. ملاحظة: في نهاية المطاف ، سيتضمن vuetify v2 هذه الميزة مدمجة. حتى يتوفر هذا الإصدار ، يجب عليك استخدام vuetify-loader لاستيراد المكونات التي تستخدمها فقط. تنص وثيقة Vuetify على أنه للحصول على جميع الأنماط المطلوبة ، نحتاج إلى استيرادها بالقلم.

أدركت أننا نستخدم إصدارًا أقدم من vuetify.js. لذلك قررت ترقية إصدار vuetify إلى أحدث إصدار. يمكنني أيضًا تثبيت الأنماط و vuetify-loader في نفس الوقت باستخدام:

npm install - vuetify vuetify-loader stylus stylus-loader-loader-loader

يشتمل رمز المكون الإضافي الخاص بي لاستيراد Vuetify على بعض التخصيصات للموضوع لاستخدام لوحة ألوان شركتنا. إليك ما يبدو عليه المكون الإضافي الحالي لبرنامج Vuetify:

سأحتاج إلى تغيير الاستيراد لـ Vuetify للاستيراد من vuetify / lib. أنا أيضا استيراد القلم للحصول على جميع الأنماط. إليك ما يبدو عليه رمز البرنامج المساعد الآن:

الخطوة الأخيرة هي إخبار webpack باستخدام البرنامج المساعد vuetify-loader ليتمكن من استيراد المكونات التي نستخدمها فقط. سأطلب المكوّن الإضافي ثم أضفه إلى مجموعة الإضافات. إليكم ملف vue.config.js:

الآن عندما أقوم بتشغيل الإصدار الخاص بي للإنتاج ، يكون حجم الباقة 2 ميغابايت.

تقليل حجم vue-echarts

لا يعتبر Vue-echarts أكبر عنصر لدي في باقتك. Vue-echarts يعمل على أعلى echarts. مثل Vuetify ، أقوم بتشغيل إصدار أقدم من كلا المنتجين. لترقية كلاهما إلى أحدث إصدار أشغله هذا الأمر:

npm تثبيت echarts vue-echarts - حفظ

قمت ببعض الأبحاث حول برنامج vue-echarts ، قام GitHub repo بدراسة جميع المشكلات المغلقة ليجد أن أحدث إصدار من vue-echarts يسمح لك بتحميل حزمة أصغر عن طريق تغيير ما تقوم باستيراده. في السابق كنت أستورده باستخدام هذا الأمر:

استيراد ECharts من 'vue-echarts' ؛

أغيرها إلى هذا:

استيراد ECharts من 'vue-echarts / components / ECharts.vue' ؛

الآن عندما أقوم بتشغيل إنشاء للإنتاج ، انخفض حجم الحزمة الخاص بي إلى 1.28 ميجابايت.

خاتمة

كان هدفي هو تقليل حجم الحزمة التي تم إنشاؤها للإنتاج من أجل تطبيقنا. الحجم المبدئي لبلدي كان 2.48MB. بإجراء بعض التغييرات ، تمكنت من تقليل حجم البنية إلى 1.2 ميغابايت. هذا هو ما يقرب من 50 ٪ انخفاض في الحجم.

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

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

المزيد من المقالات التي قد ترغب

إليك بعض المقالات التي كتبت ، قد ترغب في قراءتها أيضًا!