استخدام webpack للدمج وتعبئة عدة مكونات في Vue.js وتحقيق التحميل عند الحاجة

المقدمة

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

عند تطوير مشاريع باستخدام Vue، إذا كنت ترغب في استخدام خاصية مكونات ملفات الفئة الواحدة، فلا بد من استخدام webpack أو browserify لتحويلها، بالنسبة للنماذج الكبيرة، لتحسين سرعة التحميل، يمكنك استخدام خاصية تقسيم الكود الخاصة بـ webpack لتحويل الملفات إلى وحدات أصغر وتحميلها عند الحاجة، مما يتم ذكره في وثائق Vue و vue-router.}مكونات متزامنة،تحميل التطبيقات التجميدية.

يمكن استخدام تقسيم الكود الخاص بـ webpack باستخدام خاصية require.ensure الخاصة بـ webpack أو باستخدام لغة AMD style callback-require، على سبيل المثال——

تسجيل المكون المحدود Async Component عالميًا:

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}
Vue.component('async-webpack-example', myAsyncComponent)

تسجيل المكون المحدود Async Component، محتوى سكربت المكون الواحد:

let myAsyncComponent = resolve => {
 require(['./my-async-component'], resolve)
}
// تعديلات على خيارات نموذج Vue، يتم الإكثار من الخيارات الأخرى
export default {
 components: {
 'async-webpack-example': myAsyncComponent
 }
}

عند استخدام vue-router، يمكن استخدام نفس الطريقة في تعيين خصائص component للعناصر الم映射ة في الطرق المختلفة.

هنا، myAsyncComponent معرف كوظيفة المصنع، يتم تنفيذ callback-require وظيفة (نعم، هناك وظيفتان مختلفتان لتحليل خيارات المكونات في Vue و vue-router) كمعامل لـ resolve استدعاء وظيفة (معامل لـ resolve هو خيارات المكون) عند الحاجة، حيث يتم تعبئة ملف my-async-component.vue كملف منفرد أثناء تنفيذ سكربت التعبئة، و يتم تحميل المكون فقط عندما يتم استخدامه.

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

يهدف هذا المقال إلى شرح كيفية دمج عدة مكونات في ملف واحد، مما يمكن من تقليل عدد الكتل البرمجية، بالإضافة إلى ذلك، إذا تم استخدام هذه المكونات المتعددة في أماكن متعددة، يمكن لآلية التخزين المؤقت الخاصة بـ Vue زيادة سرعة تحميل المكونات اللاحقة، كما أن إذا لم تتغير هذه المكونات العامة لفترة طويلة (مثل المكونات المتعلقة بالواجهة المستخدم)، فإن ملف التجميع لن يتغير أيضًا، مما يمكن من استخدام وظيفة التخزين المؤقت الخاصة بالمتصفح لتحسين سرعة التحميل.

أولاً، عرض الصورة، في تطبيق SPA الذي يستخدم vue-router، قم بدمج جميع المكونات الثلاث ComponentA، ComponentB، ComponentC غير المكونات الجذرية في ملف واحد. عند تحميل الصفحة لأول مرة، يمكنك رؤية هذا في لوحة Network من أدوات المطور، حيث لم يتم تحميل ملف 0.a5a1bae6addad442ac82.js الذي يحتوي على هذه المكونات الثلاث عند النقر على رابط Page A، ثم عند النقر على رابط Page B أو Page C، لن يتم تحميل هذا الملف مرة أخرى.

نبدأ أولاً بإنشاء مشروع يحتوي على vue-router باستخدام أداة command line tool الخاصة بـ vue-cli، ثم ننشئ مجلد CommonComponents تحت مجلد src/components، وفي هذا المجلد ننشئ هذه المكونات الثلاث ComponentA، ComponentB، ComponentC.

في نفس الوقت، قم بإنشاء ملف index.js تحت مجلد CommonComponents، والذي يحتوي على ما يلي:

exports.ComponentA = require('./ComponentA')
exports.ComponentB = require('./ComponentB')
exports.ComponentC = require('./ComponentC')

بهذا، سنحتاج فقط إلى استخدام синтكس special syntax لـ require.ensure من webpack أو استخدام синтكس callback-require بنمط AMD للتحميل المتقطع لـ index.js في مجلد CommonComponents، أثناء تحويل ملفات webpack، يمكننا تحقيق دمج ComponentA، ComponentB، ComponentC هذه الثلاثة مكونات في حزمة واحدة. على سبيل المثال بنمط callback-require من AMD، لا يوجد أي متطلب خاص على شكل دالة callback. }}

require(['component/CommonComponents'], function (CommonComponents) {
 // قم بما تريد القيام به باستخدام CommonComponents
})

عندما يتم تحميل ملف module /CommonComponents بنجاح، سيكون معامل دالة ال回调 CommonComponents هو كائن يحتوي على خيارات المكونات ComponentA، ComponentB، ComponentC هذه الثلاثة.

عند تعريف المكونات المتحققة بشكل متقطع، نستخدم دالة المصنع resolve => {require(['./my-async-component'], resolve)}، وإذا كنت بحاجة إلى إضافة عنصر مسار يحتوي على مكون ComponentA كمتغير في ملف تكوين المسارات، يجب عليك تحديد ما هو نوع دالة المصنع؟ تذكر أن resolve هي دالة تُستخدم لتحليل خيارات المكون، وهي تحمل خيارات المكون، وقد تكون CommonComponents هي كائن يحتوي على عدة خيارات مكون، لذا يمكننا استخدام خصائص CommonComponents كمعلمات في استدعاء resolve، ونكتب دالة getCommonComponent تستخدم اسم المكون لاستعادة دالة المصنع التي تحمل الخيار.

تحدد getCommonComponent = componentName => resolve => require(['components/CommonComponents'], components => resolve(components[componentName]))

في الأماكن التي يتم استخدام أي من المكونات في نموذج المكون أو خريطة المسار وما إلى ذلك، يمكن استخدام دالة مثل getCommonComponent('ComponentA') للإعداد المكون، مثل الاستخدام في خريطة المسار، مثل المثال التالي:}}

routes: [
 {
 path: '/',
 name: 'Hello',
 component: Hello
 },
 {
 path: '/a',
 name: 'A',
 component: getCommonComponent('ComponentA')
 },
 {
 path: '/b',
 name: 'B',
 component: getCommonComponent('ComponentB')
 },
 {
 path: '/c',
 name: 'C',
 component: getCommonComponent('ComponentC')
 }
]

قائمة ملفات الت打包 النهائية تظهر في الشكل التالي، والملف 0.a5a1bae6addad442ac82.js يحتوي على هذه المكونات الثلاث: ComponentA،ComponentB،ComponentC.

الخلاصة

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون محتوى هذا المقال قد ساعدكم في التعلم أو العمل، إذا كان لديكم أي أسئلة، يمكنكم ترك تعليقات للتفاعل، شكرًا لدعمكم لتعليمات النفخ.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع المالك الأصلي بحقوق الطبع والنشر، ويتم جمع المحتوى من قبل المستخدمين عبر الإنترنت ويتم تحميله بشكل مستقل، ويتمتع هذا الموقع بلا حقوق ملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) للإبلاغ، وتقديم الدليل على ذلك، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.