3 روش برای افزایش کارایی و بهره وری در Vue

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

1) استفاده از lazy loading

خب همونطور که از اسمش مشخصه، lazy loading یه متد برای بارگذاری module های مختلفه وقتی که کاربر بهش نیاز داره و نه بصورت پیش فرض، بیشتر اوقات ما نیاز نداریم که تمامی module های موجود تو javascript bundle رو زمانی که کاربر وارد سایت میشه بارگذاری کنیم.

بیشتر module های ما برای مثال modal و tooltip هایی دارن که میشه فقط زمانی که بهشون نیاز هست لود بشن، البته اگه پروژه شما فقط چندتا modal و tooltip داشته باشه، زیاد متوجه تغییر در پرفورمنس نمیشید، ولی در نظر بگیرید که پروژه‌ی پیچیده و سنگین با چندین نوع modal و tooltip متفاوت دارید، با پیاده سازی lazy loading نه تنها این بخش از کد دیگه دانلود نمیشه بلکه با parse شدن اون کد زمانی که بهش نیاز هست، میتونه باعث افزایش سرعت بارگذاری صفحه و در کل کمتر شدن مصرف resource هاتون بشه.

حالا چجوری پیاده سازیش کنیم؟

ما در حالت عادی وقتی میخوایم از یه کامپوننت یا فانکشن یا ... استفاده کنیم به این صورت عمل میکنیم.

// helloWorld.js
const HelloWorld= {
  sayHello: function () {
    console.log(&quotHello World&quot)
  }
}
export default HelloWorld

// app.js
import HelloWorld from './helloWorld.js'
HelloWorld.sayHello()

کاری که اینجا انجام میشه این ـه که فایل helloworld.js بصورت یه node به app.js اضافه میشه و با اینجوری اضافه کردنش باعث bundle شدن این دو تا فایل باهم میشیم، پس هروقت app.js بارگذاری بشه، helloWorld.js هم پشت بندش بارگذاری میشه، بی اهمیت به اینکه نیازی هست بهش یا نه.

ولی اگه بخوایم فقط helloWorld.js رو در نتیجه نیاز یه کاربر بارگذاری کنیم چی؟ برای اینکار از
dynamic importing استفاده میکنیم، خب چجوری؟ بیاید کد بالارو اینبار با dynamic importing بنویسیم.

// app.js
const getHelloWorld= () => import('./helloWorld.js')

// later when user needs it
getHelloWorld()
  .then({ sayHello} => sayHello())

همونطور که میبینید به جای اینکه مستقیم helloWorld رو import کنیم یه فانکشن نوشتیم که return ـش کنه، اتفاقی که الان میوفته این ـه که webpack متوجه میشه باید helloWorld رو تو یه فایل مجزا نگه داره و بعد هم فانکشن getHelloWorld اونو به عنوان یه promise بهمون برمیگردونه، که در کل باعث حذف hello world از باندل میشه و بعد در صورت نیاز دانلودش میکنه.
استفاده از lazy loading میتونه تاثیر بسزایی تو کاهش سایز bundle شما داره و همینطور باعث افزایش پرفورمنس میشه.

2) انجام code splitting بر اساس route های مختلف

فرض کنید دارید یه اپلیکیشن ساده vue با دو تا route میسازید و برای ساخت همین دو تا مسیر باید از vue-router استفاده کنید. فایل routing.js شما ممکنه همچین حالتی داشته باشه:

// routing.js
import Dashboard from './Dashboard.vue'
import Contact from './Contact.vue'

const routes = [
  { path: '/', component: Dashboard }
  { path: '/contact, component: Contact }
]

اتفاقی که میوفته اینجا چیه؟ کامپوننت های Dashboard & Contact بی اهمیت به اینکه تو کدوم route قرار دارید، دانلود میشن. شاید ما بخوایم هیچکدوم از این فایل ها در این صورت دانلود نشن، شاید براتون سوال بشه دو تا صفحه اضافی چه تاثیری قراره داشته باشه مگه؟ ولی بحث ما تو پروژه هایی با مقیاس بزرگه،
خب برای حل این موضوع باید چیکار کنیم؟ میتونیم با جدا کردن کدامون از روش dynamic importing بیایم و یک سری bundle های مجزا بر اساس route ـمون ایجاد کنیم.
حالا به جای اینکه کامپوننتامون رو بصورت مستقیم import کنیم، میایم و از روش dynamic importing استفاده میکنیم.

// routing.js 
const routes = [
  { path: '/', component: () => import('./Dashboard.vue') }
  { path: '/contact, component: () => import('./Contact.vue') }
]

شاید باورتون نشه ولی با این روش میتونید سایز باندل پروژه ـتون رو تا نصف پایین بیارید، البته باید بدونید کدوم کامپوننتا بهتره بصورت مستقیم import بشن و کدومشون به طریق dynamic importing.

3) انجام prefetch برای کامپوننت

این روش همونطوری که از اسمش هم مشخصه روشیه به منظور بارگذاری یک کامپوننت قبل از اینکه کاربر درخواستی بکنه، اگه به عنوان مثال مطمئن باشید که کاربر بعد از ورود به صفحه دسته بندی محصولات، وارد صفحه محصولات هم میشه، میتونید با استفاده از این متد اون کامپوننت رو قبل از درخواست کاربر بارگذاری کنید، این روش همینطور باعث میشه یک سری از عوارض جانبی lazy loading برطرف بشه، خب حالا چجوری باید پیاده سازیش کنیم؟

< link rel=&quotprefetch&quot href=&quoturl&quot />

به همین سادگی، البته اگه پای webpack وسط باشه مسئله یکم پیچیده میشه، ولی خوشبختانه webpack یه magic comments داره که باهاش میشه حلش کرد، magic comments چی هست اصلا؟ بخوایم ساده بگیم یه سری کامنتایی که رو پروسه build تاثیر میزاره. برای prefetch کردن کامپوننت فقط کافیه اینکارو کنیم:

components: {
  ModalView: () => import(/* webpackPrefetch: true */ './ModalView.vue')
}

حالا وقتی کد اجرا میشه، وب پک دنبال این magic comment ها میگرده و

< link rel="prefetch" url="resource-url" />

رو بهش اضافه میکنه.


در نهایت اهمیتی نداره اپلیکیشن ما در چه اندازه‌ای هست، رعایت کردن این موارد باعث میشه که کاربر شما تجربه بهتری با اپلیکیشن شما داشته باشه.