Vue.js

উপস্থিতি

এই পৃষ্ঠায়

Performance ​

Overview ​

Vue কে ম্যানুয়াল অপ্টিমাইজেশনের খুব বেশি প্রয়োজন ছাড়াই সর্বাধিক সাধারণ ব্যবহারের ক্ষেত্রে পারফরম্যান্স করার জন্য ডিজাইন করা হয়েছে। যাইহোক, সবসময় চ্যালেঞ্জিং পরিস্থিতিতে আছে যেখানে অতিরিক্ত সূক্ষ্ম-টিউনিং প্রয়োজন। এই বিভাগে, Vue অ্যাপ্লিকেশনে পারফরম্যান্সের ক্ষেত্রে আপনার কী মনোযোগ দেওয়া উচিত তা আমরা আলোচনা করব।

প্রথমে, ওয়েব পারফরম্যান্সের দুটি প্রধান দিক নিয়ে আলোচনা করা যাক:

  • পৃষ্ঠা লোড পারফরম্যান্স: অ্যাপ্লিকেশনটি কত দ্রুত বিষয়অবজেক্ট দেখায় এবং প্রাথমিক পরিদর্শনে ইন্টারেক্টিভ হয়ে ওঠে। এটি সাধারণত Largest Contentful Paint (LCP) এবং First Input Delay (FID) এর মতো ওয়েব গুরুত্বপূর্ণ মেট্রিক্স ব্যবহার করে পরিমাপ করা হয়। .

  • আপডেট পারফরম্যান্স: ব্যবহারকারীর ইনপুটের প্রতিক্রিয়ায় অ্যাপ্লিকেশনটি কত দ্রুত আপডেট হয়। উদাহরণস্বরূপ, ব্যবহারকারী যখন একটি অনুসন্ধান বাক্সে টাইপ করেন তখন একটি তালিকা কত দ্রুত আপডেট হয়, বা ব্যবহারকারী যখন একটি একক-পৃষ্ঠা অ্যাপ্লিকেশন (SPA) একটি নেভিগেশন লিঙ্কে ক্লিক করেন তখন পৃষ্ঠাটি কত দ্রুত পরিবর্তন হয়৷

যদিও এটি উভয়কে সর্বাধিক করা আদর্শ হবে, বিভিন্ন ফ্রন্টএন্ড আর্কিটেকচারগুলি এই দিকগুলিতে পছন্দসই কর্মক্ষমতা অর্জন করা কতটা সহজ তা প্রভাবিত করে। উপরন্তু, আপনি যে ধরনের অ্যাপ্লিকেশন তৈরি করছেন তা কার্যক্ষমতার ক্ষেত্রে আপনার কী অগ্রাধিকার দেওয়া উচিত তা ব্যাপকভাবে প্রভাবিত করে। অতএব, সর্বোত্তম কর্মক্ষমতা নিশ্চিত করার প্রথম ধাপ হল আপনি যে ধরনের অ্যাপ্লিকেশন তৈরি করছেন তার জন্য সঠিক আর্কিটেকচার বাছাই করা:

  • পরামর্শ করুন ভিউ ব্যবহারের উপায় আপনি কিভাবে বিভিন্ন উপায়ে Vue ব্যবহার করতে পারেন তা দেখতে।

  • জেসন মিলার Application Holotypes এ ওয়েব অ্যাপ্লিকেশনের ধরন এবং তাদের নিজ নিজ আদর্শ বাস্তবায়ন/ডেলিভারি নিয়ে আলোচনা করেছেন।

Profiling Options ​

কর্মক্ষমতা উন্নত করতে, আমাদের প্রথমে এটি পরিমাপ করতে হবে তা জানতে হবে। এই বিষয়ে সাহায্য করতে পারে এমন অনেকগুলি দুর্দান্ত সরঞ্জাম রয়েছে:

প্রোডাকশন ডিপ্লয়মেন্টের প্রোফাইলিং লোড পারফরম্যান্সের জন্য:

স্থানীয় উন্নয়নের সময় প্রোফাইলিং কর্মক্ষমতা জন্য:

  • Chrome DevTools Performance Panel
    • app.config.performance Chrome DevTools-এর পারফরম্যান্স টাইমলাইনে Vue-নির্দিষ্ট পারফরম্যান্স মার্কার সক্ষম করে৷
  • Vue DevTools Extension এছাড়াও একটি কর্মক্ষমতা প্রোফাইলিং বৈশিষ্ট্য প্রদান করে।

Page Load Optimizations ​

পৃষ্ঠা লোড কর্মক্ষমতা অপ্টিমাইজ করার জন্য অনেকগুলি কাঠামো-অজ্ঞেয়মূলক দিক রয়েছে - একটি বিস্তৃত রাউন্ড আপের জন্য এই web.dev গাইড দেখুন। এখানে, আমরা প্রাথমিকভাবে Vue-এর জন্য নির্দিষ্ট কৌশলগুলিতে ফোকাস করব।

Choosing the Right Architecture ​

আপনার ব্যবহারের ক্ষেত্রে যদি পৃষ্ঠা লোড কর্মক্ষমতা সংবেদনশীল হয়, তাহলে এটিকে বিশুদ্ধ ক্লায়েন্ট-সাইড এসপিএ হিসাবে শিপিং এড়িয়ে চলুন। আপনি চান যে আপনার সার্ভার ব্যবহারকারীরা দেখতে চায় এমন সামগ্রী সহ সরাসরি HTML পাঠাতে পারে। বিশুদ্ধ ক্লায়েন্ট-সাইড রেন্ডারিং ধীর সময় থেকে বিষয়অবজেক্ট থেকে ভুগছে। এটি দিয়ে প্রশমিত করা যেতে পারে সার্ভার-সাইড রেন্ডারিং (SSR) বা স্ট্যাটিক সাইট জেনারেশন (SSG). চেক আউট SSR গাইড Vue এর সাথে SSR সম্পাদন সম্পর্কে জানতে। আপনার অ্যাপের সমৃদ্ধ ইন্টারঅ্যাক্টিভিটি প্রয়োজনীয়তা না থাকলে, আপনি এইচটিএমএল রেন্ডার করতে এবং ক্লায়েন্টে Vue এর সাথে উন্নত করতে একটি ঐতিহ্যগত ব্যাকএন্ড সার্ভারও ব্যবহার করতে পারেন।

যদি আপনার মূল অ্যাপ্লিকেশনটি একটি এসপিএ হতে হয়, তবে বিপণন পৃষ্ঠাগুলি (ল্যান্ডিং, সম্পর্কে, ব্লগ) থাকে, সেগুলি আলাদাভাবে পাঠান! আপনার মার্কেটিং পৃষ্ঠাগুলি আদর্শভাবে SSG ব্যবহার করে ন্যূনতম JS সহ স্ট্যাটিক HTML হিসাবে স্থাপন করা উচিত।

Bundle Size and Tree-shaking ​

পৃষ্ঠা লোড কর্মক্ষমতা উন্নত করার সবচেয়ে কার্যকর উপায়গুলির মধ্যে একটি হল ছোট জাভাস্ক্রিপ্ট বান্ডিল পাঠানো। Vue ব্যবহার করার সময় বান্ডিলের আকার হ্রাস করার কয়েকটি উপায় এখানে রয়েছে:

  • সম্ভব হলে একটি বিল্ড স্টেপ ব্যবহার করুন।

    • Vue-এর অনেকগুলি API "tree-shakable" যদি একটি আধুনিক বিল্ড টুলের মাধ্যমে বান্ডিল করা হয়। উদাহরণস্বরূপ, আপনি যদি বিল্ট-ইন <Transition> কম্পোনেন্ট ব্যবহার না করেন, তাহলে এটি চূড়ান্ত উৎপাদন বান্ডেলে অন্তর্ভুক্ত হবে না। ট্রি-কাঁপানো আপনার সোর্স কোডের অন্যান্য অব্যবহৃত মডিউলগুলিকেও সরিয়ে দিতে পারে।

    • একটি বিল্ড স্টেপ ব্যবহার করার সময়, টেমপ্লেটগুলি আগে থেকে কম্পাইল করা হয় তাই আমাদের ব্রাউজারে Vue কম্পাইলার পাঠাতে হবে না। এটি 14kb min+gzipped JavaScript বাঁচায় এবং রানটাইম সংকলন খরচ এড়ায়।

  • নতুন নির্ভরতা প্রবর্তনের সময় আকার সম্পর্কে সতর্ক থাকুন! বাস্তব-বিশ্বের অ্যাপ্লিকেশনগুলিতে, ফোলা বান্ডিলগুলি প্রায়শই এটি উপলব্ধি না করেই ভারী নির্ভরতা প্রবর্তনের ফলাফল।

    • যদি একটি বিল্ড স্টেপ ব্যবহার করেন, তাহলে নির্ভরতা পছন্দ করুন যা ES মডিউল ফরম্যাট অফার করে এবং ট্রি-কাঁপানো বন্ধুত্বপূর্ণ। উদাহরণস্বরূপ, lodash এর চেয়ে lodash-es পছন্দ করুন।

    • একটি নির্ভরতার আকার পরীক্ষা করুন এবং এটি যে কার্যকারিতা প্রদান করে তা মূল্যবান কিনা তা মূল্যায়ন করুন৷ নোট করুন যদি নির্ভরতা গাছ-কাঁপানো বন্ধুত্বপূর্ণ হয়, প্রকৃত আকার বৃদ্ধি নির্ভর করবে আপনি আসলে এটি থেকে আমদানি করা APIগুলির উপর। bundlejs.com এর মতো সরঞ্জামগুলি দ্রুত পরীক্ষা করার জন্য ব্যবহার করা যেতে পারে, তবে আপনার প্রকৃত বিল্ড সেটআপের সাথে পরিমাপ করা সর্বদা সবচেয়ে সঠিক হবে।

  • আপনি যদি প্রাথমিকভাবে প্রগতিশীল বর্ধনের জন্য Vue ব্যবহার করেন এবং একটি বিল্ড স্টেপ এড়াতে পছন্দ করেন, তাহলে পরিবর্তে petite-vue (শুধু 6kb) ব্যবহার করার কথা বিবেচনা করুন।

Code Splitting ​

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

রোলআপ (যার উপর ভিত্তি করে Vite) বা ওয়েবপ্যাকের মতো বান্ডলারগুলি ESM গতিশীল আমদানি সিনট্যাক্স সনাক্ত করে স্বয়ংক্রিয়ভাবে বিভক্ত অংশ তৈরি করতে পারে:

js
// lazy.js and its dependencies will be split into a separate chunk
// and only loaded when `loadLazy()` is called.
function loadLazy() {
  return import('./lazy.js')
}

অলস লোডিং এমন বৈশিষ্ট্যগুলিতে সবচেয়ে ভাল ব্যবহার করা হয় যেগুলি প্রাথমিক পৃষ্ঠা লোডের পরে অবিলম্বে প্রয়োজন হয় না। Vue অ্যাপ্লিকেশনগুলিতে, এটি কম্পোনেন্ট গাছের জন্য বিভক্ত অংশ তৈরি করতে Vue এর Async Component বৈশিষ্ট্যের সাথে একত্রে ব্যবহার করা যেতে পারে:

js
import { defineAsyncComponent } from 'vue'

// a separate chunk is created for Foo.vue and its dependencies.
// it is only fetched on demand when the async component is
// rendered on the page.
const Foo = defineAsyncComponent(() => import('./Foo.vue'))

Vue রাউটার ব্যবহার করে অ্যাপ্লিকেশনগুলির জন্য, রুটের কম্পোনেন্টগুলির জন্য অলস লোডিং ব্যবহার করার জন্য দৃঢ়ভাবে সুপারিশ করা হয়। Vue রাউটারে defineAsyncComponent থেকে পৃথক, অলস লোডিংয়ের জন্য স্পষ্ট সমর্থন রয়েছে। আরও বিস্তারিত জানার জন্য Lazy Loading Routes দেখুন।

Update Optimizations ​

Props Stability ​

Vue-তে, একটি চাইল্ড কম্পোনেন্ট শুধুমাত্র তখনই আপডেট হয় যখন তার প্রাপ্ত প্রপগুলির মধ্যে অন্তত একটি পরিবর্তিত হয়। নিম্নলিখিত উদাহরণ বিবেচনা করুন:

template
<ListItem
  v-for="item in list"
  :id="item.id"
  :active-id="activeId" />

<ListItem> কম্পোনেন্টের ভিতরে, এটি বর্তমানে সক্রিয় আইটেম কিনা তা নির্ধারণ করতে এটির id এবং activeId প্রপস ব্যবহার করে। যদিও এটি কাজ করে, সমস্যা হল যে যখনই activeId পরিবর্তিত হয়, তালিকার প্রতি <ListItem> আপডেট করতে হয়!

আদর্শভাবে, শুধুমাত্র যে আইটেমগুলির সক্রিয় স্থিতি পরিবর্তিত হয়েছে তা আপডেট করা উচিত। আমরা সক্রিয় স্থিতি গণনাকে অভিভাবকের মধ্যে স্থানান্তর করে এটি অর্জন করতে পারি এবং এর পরিবর্তে <ListItem> সরাসরি একটি active প্রপ গ্রহণ করতে পারি:

template
<ListItem
  v-for="item in list"
  :id="item.id"
  :active="item.id === activeId" />

এখন, বেশিরভাগ কম্পোনেন্টের জন্য active প্রপ একই থাকবে যখন activeId পরিবর্তিত হবে, তাই তাদের আর আপডেট করার প্রয়োজন নেই। সাধারণভাবে, ধারণাটি যতটা সম্ভব স্থিতিশীল চাইল্ডর কম্পোনেন্টগুলিতে পাঠানো প্রপস রাখা।

v-once ​

v-one হল একটি অন্তর্নির্মিত নির্দেশিকা যা রানটাইম ডেটার উপর নির্ভর করে এমন সামগ্রী রেন্ডার করতে ব্যবহার করা যেতে পারে কিন্তু আপডেট করার প্রয়োজন নেই৷ এটি ব্যবহার করা সম্পূর্ণ উপ-বৃক্ষটি ভবিষ্যতের সমস্ত আপডেটের জন্য বাদ দেওয়া হবে। আরো বিস্তারিত জানার জন্য এর API রেফারেন্স দেখুন।

v-memo ​

v-memo হল একটি অন্তর্নির্মিত নির্দেশিকা যা শর্তসাপেক্ষে বড় সাব-ট্রি বা v-for তালিকার আপডেট এড়িয়ে যেতে ব্যবহার করা যেতে পারে। আরো বিস্তারিত জানার জন্য এর API রেফারেন্স দেখুন।

Computed Stability ​

3.4 থেকে শুরু করে, একটি গণনা করা সম্পত্তি শুধুমাত্র প্রভাবগুলি ট্রিগার করবে যখন এর গণনা করা মান আগের থেকে পরিবর্তিত হবে। উদাহরণ স্বরূপ, নিম্নোক্ত isEven গণনা করা শুধুমাত্র প্রভাবগুলিকে ট্রিগার করে যদি প্রত্যাবর্তিত মান সত্য থেকে মিথ্যা তে পরিবর্তিত হয়, বা বিপরীতে:

js
const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)

watchEffect(() => console.log(isEven.value)) // true

// will not trigger new logs because the computed value stays `true`
count.value = 2
count.value = 4

এটি অপ্রয়োজনীয় প্রভাব ট্রিগার হ্রাস করে, কিন্তু দুর্ভাগ্যবশত কাজ করে না যদি গণনা করা প্রতিটি গণনায় একটি নতুন বস্তু তৈরি করে:

js
const computedObj = computed(() => {
  return {
    isEven: count.value % 2 === 0
  }
})

যেহেতু প্রতিবার একটি নতুন বস্তু তৈরি হয়, নতুন মান প্রযুক্তিগতভাবে সর্বদা পুরানো মান থেকে আলাদা। এমনকি যদি isEven প্রপার্টি একই থাকে, Vue জানতে পারবে না যদি না এটি পুরানো মান এবং নতুন মানের গভীর তুলনা করে। এই ধরনের তুলনা ব্যয়বহুল হতে পারে এবং সম্ভবত এটি মূল্যবান নয়।

পরিবর্তে, আমরা পুরানো মানের সাথে নতুন মানকে ম্যানুয়ালি তুলনা করে এবং শর্তসাপেক্ষে পুরানো মানটি ফেরত দিয়ে যদি আমরা জানি যে কিছুই পরিবর্তন হয়নি:

js
const computedObj = computed((oldValue) => {
  const newValue = {
    isEven: count.value % 2 === 0
  }
  if (oldValue && oldValue.isEven === newValue.isEven) {
    return oldValue
  }
  return newValue
})

উদাহরণ দেখুন

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

General Optimizations ​

নিম্নলিখিত টিপস পৃষ্ঠা লোড এবং আপডেট কর্মক্ষমতা উভয়ই প্রভাবিত করে।

Virtualize Large Lists ​

সমস্ত ফ্রন্টএন্ড অ্যাপ্লিকেশনের সবচেয়ে সাধারণ পারফরম্যান্স সমস্যাগুলির মধ্যে একটি হল বড় তালিকা রেন্ডার করা। ফ্রেমওয়ার্ক যতই পারফরম্যান্স হোক না কেন, ব্রাউজারকে যে পরিমাণ DOM নোড পরিচালনা করতে হবে তার কারণে হাজার হাজার আইটেমের সাথে একটি তালিকা রেন্ডার করা ধীরে হবে।

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

তালিকা ভার্চুয়ালাইজেশন বাস্তবায়ন করা সহজ নয়, ভাগ্যক্রমে বিদ্যমান কমিউনিটি লাইব্রেরি রয়েছে যা আপনি সরাসরি ব্যবহার করতে পারেন:

Reduce Reactivity Overhead for Large Immutable Structures ​

Vue এর প্রতিক্রিয়াশীলতা সিস্টেম ডিফল্টরূপে গভীর। যদিও এটি স্টেট ম্যানেজমেন্টকে স্বজ্ঞাত করে তোলে, এটি ডেটার আকার বড় হলে এটি ওভারহেডের একটি নির্দিষ্ট স্তর তৈরি করে, কারণ প্রতিটি কম্পিউটেড প্রপার্টি অ্যাক্সেস প্রক্সি ফাঁদগুলিকে ট্রিগার করে যা নির্ভরতা ট্র্যাকিং সম্পাদন করে। গভীরভাবে নেস্টেড অবজেক্টের বড় অ্যারের সাথে কাজ করার সময় এটি সাধারণত লক্ষণীয় হয়ে ওঠে, যেখানে একটি একক রেন্ডারকে ১০০,০০০+ বৈশিষ্ট্যগুলি অ্যাক্সেস করতে হবে, তাই এটি শুধুমাত্র খুব নির্দিষ্ট ব্যবহারের ক্ষেত্রে প্রভাবিত করা উচিত।

Vue shallowRef() এবং shallowReactive() ব্যবহার করে গভীর প্রতিক্রিয়া থেকে অপ্ট-আউট করার জন্য একটি এস্কেপ হ্যাচ প্রদান করে . অগভীর API গুলি এমন অবস্থা তৈরি করে যা শুধুমাত্র রুট স্তরে প্রতিক্রিয়াশীল, এবং সমস্ত নেস্টেড অবজেক্টগুলিকে স্পর্শ করে না। এটি নেস্টেড প্রপার্টি অ্যাক্সেসকে দ্রুত রাখে, ট্রেড-অফ হল যে আমাদের এখন সমস্ত নেস্টেড অবজেক্টকে অপরিবর্তনীয় হিসাবে বিবেচনা করতে হবে এবং আপডেটগুলি শুধুমাত্র রুট স্টেট প্রতিস্থাপন করে ট্রিগার করা যেতে পারে:

js
const shallowArray = shallowRef([
  /* big list of deep objects */
])

// this won't trigger updates...
shallowArray.value.push(newObject)
// this does:
shallowArray.value = [...shallowArray.value, newObject]

// this won't trigger updates...
shallowArray.value[0].foo = 1
// this does:
shallowArray.value = [
  {
    ...shallowArray.value[0],
    foo: 1
  },
  ...shallowArray.value.slice(1)
]

Avoid Unnecessary Component Abstractions ​

কখনও কখনও আমরা আরও ভাল বিমূর্ততা বা কোড সংগঠনের জন্য রেন্ডারলেস কম্পোনেন্ট বা উচ্চ-ক্রম কম্পোনেন্ট (অর্থাৎ অতিরিক্ত প্রপস সহ অন্যান্য কম্পোনেন্ট রেন্ডার করে) তৈরি করতে পারি। যদিও এতে কোনো ভুল নেই, মনে রাখবেন যে কম্পোনেন্ট ইন্সট্যান্স প্লেইন DOM নোডের তুলনায় অনেক বেশি ব্যয়বহুল, এবং বিমূর্তকরণ প্যাটার্নের কারণে তাদের অনেকগুলি তৈরি করা কর্মক্ষমতা খরচ বহন করবে।

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

GitHub-এ এই পৃষ্ঠাটি সম্পাদনা করুন