تقسیم بندی کد Vue.js با Webpack

یکی از معایب متصل کردن (Bundling) برنامه تک صفحه ای خود با Webpack این است که ممکن است در آخر با یک فایل Bundle بزرگ مواجه شوید، که گاهی چند مگابایت حجم دارد.

مشکل این قضیه در اینجاست که یک کاربر قبل از این که بتواند چیزی بر روی صفحه ببیند، باید فایل را به کلی دانلود کند. اگر کاربر در حال استفاده از یک موبایل با یک اینترنت ضعیف است، این فرایند می تواند زمان زیادی صرف کند.

تقسیم بندی کد یعنی این که یک Bundle به فایل های کوچک تری تقسیم شود، و به این صورت به کاربر اجازه داده شود تا هر کدی که می خواهد را دانلود کند.

برای مثال، با نگاه به این صفحه وب ساده، می توانیم بخش هایی را ببینیم که نیازی نیست همراه با صفحه بارگذاری شوند:

تقسیم بندی کد Vue.js با Webpack

اگر بارگذاری این بخش ها را به بعد از بارگذاری اولیه موکول می کردیم چه؟ این به کاربر اجازه می دهد که رابط صفحه را سریع تر ببیند.

در این مقاله به شما نشان می دهم که Vue.js و Webpack چگونه می توانند یک برنامه تک صفحه ای را به چند فایل بهینه سازی شده که به طور دینامیک بارگذاری شده اند، تقسیم کنند.

کامپوننت های Async

کلید تقسیم بندی کد یک برنامه Vue.js، کامپوننت Async است. این ها کامپوننت هایی هستند که در آنها تعریفات کامپوننت (شامل الگو ها، داده ها، متود ها و...) به طور ناهمگام بارگذاری می شوند.

فرض کنید که شما در حال تعریف یک کامپوننت با استفاده از component API هستید. به جای داشتن یک آبجکت تعریفی به عنوان آرگومان دوم، کامپوننت های Async یک تابع دارند. این تابع دو ویژگی مهم دارد:

1. یک executer برای یک promise است. یعنی یک آرگومان resolve دارد.

2. این یک تابع factory است. یعنی این که یک آبجکت را بر می گرداند. (در این مورد، تعریف کامپوننت)

Vue.component(‘async-component’, (resolve) => { 
	resolve({ 
		template: ‘<div>Async Component</div>’, 
		props: [ ‘myprop’ ] 	});
 });

کامپوننت های Async اولین قدم برای تقسیم بندی کد هستند، زیرا الان یک مکانیزم برای استخراج بخش های مختلف کد برنامه مان داریم.

بارگذاری module دینامیک

ما به کمک Webpack نیز نیاز خواهیم داشت. فرض کنید تعریف کامپوننت خود را در یک فایل module نوع ES6 خلاصه کنیم:

// AsyncComponent.js

Export default {
 	template: ‘<div>Async Component</div>’,
 	props: [ ‘myprop’ ]
}

چگونه می توانیم برنامه Vue.js خود را مجبور به بارگذاری این کنیم؟ شاید بخواهید چنین چیزی را امتحان کنید:

Import AsyncComponent from ‘./AsyncComponent.js’;
Vue.component(‘async-component’, AyncComponent);

گرچه این static است و در هنگام کمپایل resolve می شود. چیزی که ما نیاز داریم، راهی برای بارگذاری این در یک برنامه در حال اجرا به صورت دینامیک است.

Import()

در حال حاضر، امکان بارگذاری یک فایل module با استفاده از جاوا اسکریپت وجود ندارد. گرچه، یک تابع باگذاری دینامیک module که تحت ECMAScript است وجود دارد، به نام import().

Webpack از قبل پیاده سازی ای برای import() دارد و با آن به عنوان یک نقطه تقسیم بندی کد برخورد می کند، و زمانی که bundle ساخته می شود module درخواست را در یک فایل جدا قرار می دهد. (در واقع یک chunk جدا، اما فعلا آن را یک فایل در نظر بگیرید)

Import نام فایل را به عنوان یک آرگومان می گیرد و یک Promise را بر می گرداند. در زیر، نحوه بارگذاری module بالا را میبینید:

import(/* webpackChunkName: "async-component" */ './AsyncComponent.js.)
 	.then((AsyncComponent) => {
 		console. log(AsyncComponent.default.template);
 		// Output: <div>Async Component</div>
});

نکته: اگر در حال استفاده از Babel هستید، باید پلاگین syntax-dynamic-import را اضافه کنید تا Babel بتواند به درستی این سینتکس را Parse کند.

حال اگر پروژه خود را باز کنید، میبینید که module در فایل خودش ظاهر می شود:

تقسیم بندی کد Vue.js با Webpack

نکته: می توانید به module chunk ایمپورت شده یک نام بدهید تا راحت تر شناسایی شود. همانند کاری که من در کد بالا کردم، فقط قبل از نام فایل یک // قرار دهید.

بارگذاری کامپوننت دینامیک

حال همه چیز را سر هم می کنیم. از آنجایی که import() یک promise را بر می گرداند، می توانیم آن را به همراه توابع Vue’s async استفاده کنیم. Webpack به طور جداگانه AyncComponent را متصل می کند و زمانی که برنامه آن را فراخوانی می کند، آن را به صورت دینامیک با استفاده از AJAX به داخل برنامه بارگذاری می کند.

// main.js:
import Vue from 'vue';  Vue.component('async-component', (resolve) => {
 	import(1./AsyncComponent.js') 
		.then((AsyncComponent) => { 
			resolve(AsyncComponent.default);
 		}); 
});

  new Vue({ 	el: '#app' });

// index.html:

<div id=”app”> 
	<p>This part in included in the page load</p>
 	<async-component></async-component> 
</div>
 <script src=”bundle.main.js”></script>

در هنگام بارگذاری اولیه صفحه به این صورت رندر می شود:

<div id=”app”>
   <p>This part is included in the page load</p?
</div>

زمانی که main.js بارگذاری می شود، درخواستی برای module کامپوننت async راه اندازی می کند. (این کار به طور خودکار انجام می شود، زیرا پیاده سازی import() در Webpack شامل کد لازم برای بارگذاری این module با Ajax می شود.)

اگر فراخوانی AJAX موفقیت آمیز باشد و module باز گردانده شود، Promise ریزالو می شود و کامپوننت می تواند رندر شود، پس Vue صفحه را دوباره رندر می کند:

<div id=”app”>
   <p>This part is included in the page load</p?
   <div>Async Component</div>
</div>

در اینجا نموداری وجود دارد که به شما کمک می کند این فرایند را تصور کنید:

تقسیم بندی کد Vue.js با Webpack

کامپوننت های تک فایلی

یک راه ویژه برای تقسیم بندی کد در Vue، استفاده از Single file component است. در زیر، نمونه کد بالا با استفاده از Single file component را مشاهده می کنید:

<template>
 	<div>Aync Component</div> 
</template>
 <script>
 	export default {
 		props: [ ‘myprop’ ]
 	} 
</script>

این سینتکس برای import کردن حتی بهتر است:

new Vue({ 
	el: ‘#app’,
	components: { 
		AsyncComponent: () => import(‘./AyncComponent.vue’)
 	}
 });

معماری تقسیم بندی کد

در اینجا، بخش فنی کار به پایان می رسد. حال سوال این است که چگونه می توان یک برنامه را برای تقسیم بندی کد معماری کرد؟

واضح ترین راه استفاده از صفحه است. برای مثال، فرض کنید که دو صفحه در برنامه تان دارید. یک صفحه خانه، و یک صفحه «درباره ما». این صفحات می توانند در کامپوننت های Home.vue و About.vue جمع بندی شوند، و همچنین نقاط تقسیم بندی کد قرار بگیرند.

اما راه های دیگری نیز وجود دارند. برای مثال، می توانید کامپوننت هایی که بر پایه یک شرط نشان داده می شوند، (تب ها، modal ها، منو های کشویی و...) یا کامپوننت های پایین صفحه را نقاط تقسیم بندی خود قرار دهید.

منبع