ভার্চুয়াল স্ক্রলিং এবং লেজি লোডিং

ভার্চুয়াল স্ক্রলিং এবং লেজি লোডিং দুটি গুরুত্বপূর্ণ কৌশল যা বড় ডেটা বা লিস্টের ক্ষেত্রে পারফরম্যান্স অপটিমাইজেশন করতে ব্যবহৃত হয়। এই কৌশলগুলি ইউজারের এক্সপেরিয়েন্স উন্নত করতে সহায়ক, বিশেষ করে যখন আপনার অ্যাপ্লিকেশনটি প্রচুর ডেটা নিয়ে কাজ করে।

ভার্চুয়াল স্ক্রলিং (Virtual Scrolling)

ভার্চুয়াল স্ক্রলিং হল এমন একটি কৌশল, যেখানে শুধুমাত্র স্ক্রিনে দৃশ্যমান আইটেমগুলি রেন্ডার করা হয়, এবং যখন স্ক্রল করা হয়, তখন স্ক্রিনে দৃশ্যমান না থাকা আইটেমগুলি রিমুভ বা লোড করা হয়। এর মাধ্যমে মেমরি এবং প্রসেসিং এর উপর কম চাপ পড়ে এবং অ্যাপ্লিকেশনটি আরও দ্রুত এবং পারফরম্যান্ট হয়।

Vue.js এ ভার্চুয়াল স্ক্রলিং বাস্তবায়ন করার জন্য আপনি vue-virtual-scroller লাইব্রেরি ব্যবহার করতে পারেন।

vue-virtual-scroller ইনস্টলেশন:

npm install vue-virtual-scroller

ভার্চুয়াল স্ক্রলিং ব্যবহার করা:

<template>
  <div>
    <virtual-scroller :items="items" :item-height="50">
      <template #default="{ item }">
        <div class="item">{{ item }}</div>
      </template>
    </virtual-scroller>
  </div>
</template>

<script>
import { VirtualScroller } from 'vue-virtual-scroller'

export default {
  components: {
    VirtualScroller
  },
  data() {
    return {
      items: Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`)
    }
  }
}
</script>

<style>
.item {
  height: 50px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
}
</style>

এখানে:

• vue-virtual-scroller কম্পোনেন্ট ব্যবহার করা হয়েছে, যা items প্রোপসের মাধ্যমে আইটেমগুলো রেন্ডার করবে।
• item-height দিয়ে প্রতিটি আইটেমের উচ্চতা নির্ধারণ করা হয়েছে।

ভার্চুয়াল স্ক্রলিং ব্যবহার করার ফলে আপনি শুধু স্ক্রিনে দৃশ্যমান আইটেমগুলি রেন্ডার করবেন, যা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে।

লেজি লোডিং (Lazy Loading)

লেজি লোডিং হল একটি কৌশল, যেখানে শুধু তখনই ডেটা বা রিসোর্স লোড করা হয় যখন সেগুলোর প্রয়োজন হয়, অর্থাৎ প্রথমে প্রাথমিক অংশটি লোড হয় এবং পরবর্তীতে ইউজারের ইন্টারঅ্যাকশন অনুযায়ী বাকি অংশ লোড করা হয়। এটি ওয়েব অ্যাপ্লিকেশনটির লোডিং টাইম কমিয়ে দেয় এবং পারফরম্যান্স বৃদ্ধি করতে সহায়তা করে।

Vue.js এ Lazy Loading সাধারণত Vue Router এর সাথে ব্যবহার করা হয়, যেখানে রাউটিংয়ের সময় কম্পোনেন্টগুলোকে ডাইনামিকভাবে লোড করা হয়।

Vue.js এ লেজি লোডিং:

Vue Router এর মাধ্যমে লেজি লোডিং কম্পোনেন্ট:

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/components/Home')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/components/About')
    }
  ]
})

এখানে:

• () => import('@/components/Home') এবং () => import('@/components/About') এর মাধ্যমে কম্পোনেন্টগুলো Lazy Load করা হচ্ছে।

Lazy Loading Images (চিত্র লোডিং):

লেজি লোডিং কেবল কম্পোনেন্ট নয়, বরং চিত্র এবং ভিডিওর ক্ষেত্রেও ব্যবহৃত হতে পারে। আপনি IntersectionObserver API ব্যবহার করে চিত্রগুলোর লেজি লোডিং ইমপ্লিমেন্ট করতে পারেন।

<template>
  <div>
    <img v-lazy="'/path/to/image.jpg'" alt="Lazy Loaded Image">
  </div>
</template>

<script>
import { VueLazyload } from 'vue-lazyload'

export default {
  directives: {
    lazy: VueLazyload
  }
}
</script>

এখানে v-lazy ডিরেকটিভের মাধ্যমে চিত্রটি তখনই লোড হবে যখন এটি স্ক্রিনে আসবে। এর ফলে প্রথমে অ্যাপ্লিকেশন দ্রুত লোড হয় এবং চিত্রগুলি লোড হতে শুরু করবে ব্যবহারকারী যখন সেগুলি স্ক্রল করে দেখবেন।

vue-lazyload ইন্সটলেশন:

npm install vue-lazyload

ভার্চুয়াল স্ক্রলিং এবং লেজি লোডিং এর যৌথ ব্যবহার

আপনি Virtual Scrolling এবং Lazy Loading একসাথে ব্যবহার করতে পারেন, বিশেষ করে যখন আপনার অ্যাপ্লিকেশন বড় ডেটা সেটের সাথে কাজ করে। উদাহরণস্বরূপ, যখন আপনার কাছে একটি বড় লিস্ট বা তালিকা থাকে এবং আপনি চান যে স্ক্রল করার সাথে সাথে ডেটা লোড এবং রেন্ডার হয়, তখন এই দুটি কৌশল একসাথে কার্যকরী হবে।

উদাহরণ:

<template>
  <virtual-scroller :items="items" :item-height="60">
    <template #default="{ item }">
      <img v-lazy="item.image" :alt="item.name">
      <p>{{ item.name }}</p>
    </template>
  </virtual-scroller>
</template>

<script>
import { VirtualScroller } from 'vue-virtual-scroller'
import { VueLazyload } from 'vue-lazyload'

export default {
  components: {
    VirtualScroller
  },
  directives: {
    lazy: VueLazyload
  },
  data() {
    return {
      items: Array.from({ length: 1000 }, (_, i) => ({
        name: `Item ${i + 1}`,
        image: `https://via.placeholder.com/150?text=Item+${i + 1}`
      }))
    }
  }
}
</script>

<style>
img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
</style>

এখানে, Virtual Scrolling এবং Lazy Loading একসাথে ব্যবহার করা হয়েছে, যেখানে শুধুমাত্র দৃশ্যমান আইটেমগুলো লোড হয় এবং তাদের চিত্রও লেজি লোড হয়।

সারাংশ

• ভার্চুয়াল স্ক্রলিং একটি পারফরম্যান্স অপটিমাইজেশন কৌশল যা শুধুমাত্র স্ক্রিনে দৃশ্যমান আইটেমগুলো লোড করে।
• লেজি লোডিং এমন একটি কৌশল যেখানে ডেটা বা রিসোর্সগুলো তখনই লোড হয় যখন প্রয়োজন হয়।
• Vue.js এর মাধ্যমে আপনি এই দুটি কৌশল খুব সহজেই প্রয়োগ করতে পারেন, এবং এগুলি অ্যাপ্লিকেশনের পারফরম্যান্স এবং লোডিং টাইম অপটিমাইজ করতে সহায়তা করে।