Vue.js-کابردها-کتابخانه جاوااسکریپتدوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

تحلیل عملکرد و بهینه‌سازی در Vue.js

بهینه‌سازی Vue.js باعث افزایش سرعت بارگذاری، کاهش مصرف منابع و بهبود تجربه کاربری می‌شود. در اینجا روش‌هایی برای تحلیل عملکرد و بهینه‌سازی Vue بررسی می‌کنیم.

1. استفاده از Vue DevTools برای تحلیل عملکرد

🔹 Vue DevTools یک افزونه برای Chrome و Firefox است که امکان بررسی وضعیت کامپوننت‌ها، داده‌ها و رویدادها را فراهم می‌کند.

🔹 نصب Vue DevTools:

🔹 ویژگی‌های مهم Vue DevTools:

  • بررسی وضعیت کامپوننت‌ها و داده‌ها در لحظه

  • مشاهده تغییرات state و ری‌اکتیویتی (Reactivity)‌

  • بررسی رویدادهای اجراشده در اپلیکیشن

2. کاهش حجم باندل (Bundle Size)

1.2 استفاده از Lazy Loading برای بارگذاری تنبل (Code Splitting)

🔹 در Vue Router می‌توان مسیرها را به‌صورت دینامیک و تنبل (Lazy Load)‌ بارگذاری کرد.

🔹 روش معمول (بدون Lazy Loading):

import Home from "./views/Home.vue";
import About from "./views/About.vue";

🔹 روش بهینه (با Lazy Loading):

const Home = () => import("./views/Home.vue");
const About = () => import("./views/About.vue");

این روش باعث می‌شود که صفحات فقط در صورت نیاز بارگذاری شوند و حجم اولیه کاهش یابد.

۲.۲ حذف وابستگی‌های غیرضروری

بررسی کنید که آیا تمام پکیج‌های نصب‌شده ضروری هستند؟

  • از Webpack Bundle Analyzer برای مشاهده حجم پکیج‌ها استفاده کنید:

npm install --save-dev webpack-bundle-analyzer

سپس در vue.config.js اضافه کنید:

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
};

با اجرای npm run build، گزارشی از اندازه فایل‌های پروژه نمایش داده می‌شود.

3. بهینه‌سازی ری‌اکتیویتی (Reactivity)

1.3 استفاده از computed به جای methods

 اگر مقدار یک متغیر ثابت باقی می‌ماند تا زمانی که وابستگی‌های آن تغییر کند، از computed استفاده کنید.

روش نادرست:

<template>
  <p>دو برابر مقدار: {{ double() }}</p>
</template>

<script>
export default {
  data() {
    return { number: 5 };
  },
  methods: {
    double() {
      console.log("محاسبه دوباره...");
      return this.number * 2;
    }
  }
};
</script>

روش بهینه با computed:

<template>
  <p>دو برابر مقدار: {{ double }}</p>
</template>

<script>
export default {
  data() {
    return { number: 5 };
  },
  computed: {
    double() {
      console.log("محاسبه فقط در صورت تغییر مقدار!");
      return this.number * 2;
    }
  }
};
</script>

مقدار double فقط زمانی دوباره محاسبه می‌شود که number تغییر کند.

2.3 استفاده از watch برای تغییرات خاص

روش نادرست (اجرای غیرضروری کد داخل computed)

computed: {
  userData() {
    this.fetchUser(); // مشکل: هر بار رندر دوباره اجرا می‌شود!
  }
}

روش بهینه با watch:

watch: {
  userId(newId) {
    this.fetchUser(newId);
  }
}

watch فقط در صورت تغییر مقدار userId اجرا می‌شود.

4. بهینه‌سازی رندر کامپوننت‌ها

1.4 استفاده از key در v-for برای بهینه‌سازی Diffing

 Vue هنگام تغییر لیست، مقادیر را بر اساس کلید (Key) بهینه می‌کند.
روش نادرست (بدون key)

<li v-for="item in items">{{ item.name }}</li>

روش بهینه با key:

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

2.4 استفاده از v-memo برای کاهش محاسبات غیرضروری

در Vue 3، می‌توان v-memo را روی بخش‌هایی از DOM قرار داد تا در صورت تغییر نکردن داده‌ها، Vue آن‌ها را دوباره رندر نکند.

<template>
  <div v-memo="[name]">
    <p>نام: {{ name }}</p>
  </div>
</template>

اگر مقدار name تغییر نکند، Vue این بخش را دوباره رندر نمی‌کند.

5. بهینه‌سازی استایل‌ها

استفاده از scoped در استایل کامپوننت‌ها

اگر یک کامپوننت دارای استایل‌های اختصاصی است، بهتر است از scoped استفاده کنید.

<style scoped>
button {
  background-color: blue;
}
</style>

این کار باعث می‌شود که استایل‌ها فقط روی همان کامپوننت تأثیر بگذارند.

6. فعال‌سازی کش (Cache) در Vue

Vue قابلیت موقت نگه داشتن کامپوننت‌ها در حافظه (Caching) را دارد.

<template>
  <keep-alive>
    <MyComponent />
  </keep-alive>
</template>

هنگام بازگشت به یک کامپوننت، Vue دوباره آن را از ابتدا لود نمی‌کند.

جمع‌بندی

✔ Vue DevTools برای تحلیل عملکرد استفاده کنید.
✔ Lazy Loading باعث کاهش حجم پروژه می‌شود.
✔ از computed به جای methods برای جلوگیری از محاسبات اضافی استفاده کنید.
✔ watch را برای نظارت بر تغییرات خاص استفاده کنید.
✔ v-memo و keep-alive رندر کامپوننت‌ها را بهینه می‌کنند.
✔ با Webpack Bundle Analyzer می‌توان وابستگی‌های اضافی را پیدا و حذف کرد.