অ্যাডভান্সড রিয়্যাক্ট পারফরম্যান্স: ডেভ বিল্ড থেকে ওয়েব ওয়ার্কার পর্যন্ত

হোম » পাইথন » অ্যাডভান্সড রিয়্যাক্ট পারফরম্যান্স: ডেভ বিল্ড থেকে ওয়েব ওয়ার্কার পর্যন্ত

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

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

সঠিক React বিল্ড ব্যবহার করুন: ডেভেলপমেন্ট, প্রোডাকশন এবং প্রোফাইলিং।

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

আপনি React Developer Tools ব্রাউজার এক্সটেনশনের মাধ্যমে কোন বিল্ডটি ব্যবহার করছেন তা নিশ্চিত করতে পারেন।যখন আপনি React ব্যবহার করে কোনো সাইট খোলেন, তখন প্রোডাকশনে এক্সটেনশন আইকনের ব্যাকগ্রাউন্ড কালো এবং ডেভেলপমেন্টে লাল দেখায়। যদি আপনি আপনার লাইভ সাইটে কখনো লাল রঙ দেখেন, তার মানে আপনার বান্ডলার কনফিগ থেকে ভুল বিল্ড লিক হচ্ছে।

Create React App দিয়ে বুটস্ট্র্যাপ করা প্রোজেক্টগুলোর জন্য, আপনার বিল্ড স্ক্রিপ্টটি রান করার মতোই সহজ একটি অপটিমাইজড প্রোডাকশন বান্ডেল তৈরি করা যায়।যা একটি সংক্ষিপ্ত বান্ডেল আউটপুট করে build/ ডিরেক্টরি। স্থানীয় উন্নয়নের সময় আপনার মেনে চলা উচিত npm start (বা সমতুল্য) এবং শুধুমাত্র ডেপ্লয়মেন্টের জন্য অথবা বাস্তবসম্মত পারফরম্যান্স বেঞ্চমার্কের জন্য প্রোডাকশন বিল্ডটি চালান।

যদি আপনি React এবং React DOM-এর UMD সিঙ্গেল-ফাইল বিল্ডের উপর নির্ভর করেন (উদাহরণস্বরূপ একটি নন-বান্ডেলড পরিবেশে)নিশ্চিত করুন যে আপনি সেই ফাইলগুলি অন্তর্ভুক্ত করছেন যেগুলির শেষে রয়েছে .production.min.jsযেকোনো নন-মিনিফাইড বা নন-প্রোডাকশন ফাইল শুধুমাত্র ডেভেলপমেন্টের জন্য উদ্দিষ্ট এবং এটি আপনার ব্যবহারকারীদের জন্য অপ্রয়োজনীয় ডিবাগিং ওভারহেড তৈরি করবে।

বান্ডলার: ব্রাউজারিফাই, রোলআপ, ব্রাঞ্চ এবং ওয়েবপ্যাক

React-এর প্রোডাকশন অপটিমাইজেশন সম্পূর্ণরূপে সক্রিয় করতে বিভিন্ন বান্ডলারে বিভিন্ন ধরনের পরিবর্তনের প্রয়োজন হয়।কিন্তু এগুলোর সবই একই মূল ধারণা অনুসরণ করে: পরিবেশকে প্রোডাকশনে সেট করা, শুধুমাত্র ডেভেলপমেন্টের জন্য ব্যবহৃত ব্রাঞ্চগুলো বাদ দেওয়া এবং ফলস্বরূপ জাভাস্ক্রিপ্ট ফাইলটিকে মিনিফাই করা।

Brunch-এর ক্ষেত্রে, প্রস্তাবিত পদ্ধতি হলো একটি মিনিফায়ার প্লাগইন ইনস্টল করা, যেমন terser-brunch, তারপর প্রোডাকশন ফ্ল্যাগ দিয়ে আপনার বিল্ডটি চালান (উদাহরণস্বরূপ এর সাথে -pএই কনফিগারেশনটি নিশ্চিত করে যে ডেভেলপমেন্ট-সময়ের সতর্কতাগুলো দূর করা হয় এবং চূড়ান্ত বান্ডেলটি জোরালোভাবে সংকুচিত হয়।

ব্রাউজারিফাইয়ের ক্ষেত্রে, সাধারণত একটি নির্দিষ্ট ক্রমে কয়েকটি ট্রান্সফর্মকে একসূত্রে গাঁথা হয়।প্রথমে প্রয়োগ করুন envify বিশ্বব্যাপী ইনজেকশন দিতে NODE_ENV="production", তারপর আবেদন করুন uglifyify বিশ্বব্যাপী ডেভেলপমেন্ট ইম্পোর্ট এবং কোড পাথ মুছে ফেলার জন্য, এবং সবশেষে বান্ডেলটিকে এর মধ্য দিয়ে পাইপ করার জন্য। terser ম্যাংলিং এবং কম্প্রেশনের জন্য। এখানে ক্রমটি গুরুত্বপূর্ণ, কারণ প্রতিটি ধাপ পরবর্তী ট্রান্সফর্মের জন্য কোডকে প্রস্তুত করে।

Rollup ব্যবহার করার সময়, একটি লিন প্রোডাকশন বিল্ড তৈরি করতে তিনটি প্লাগইন সংযুক্ত করতে হয়।: replace পরিবেশকে উৎপাদনে সেট করে, commonjs CommonJS মডিউল বান্ডল করার অনুমতি দেয়, এবং terser চূড়ান্ত মিনিফিকেশন এবং ম্যাংলিং সম্পন্ন করে। এই সংমিশ্রণটি ডেভ-অনলি হেল্পারগুলো ছাড়াই একটি ছোট, প্রোডাকশন-রেডি বান্ডেল তৈরি করে।

webpack 4 এবং এর পরবর্তী সংস্করণগুলোতে, প্রোডাকশন মোড চালু করলে মিনিফিকেশন সহ অনেক অপটিমাইজেশন স্বয়ংক্রিয়ভাবে সক্রিয় হয়ে যায়।. বিন্যাস mode: 'production' এটি নেপথ্যে টার্সারকে সংযুক্ত করে এবং যতক্ষণ পর্যন্ত রিয়্যাক্টের প্রোডাকশন আচরণ সক্ষম করে NODE_ENV মিলে যায়। খুব নির্দিষ্ট কোনো প্রয়োজন না থাকলে সাধারণত আলাদা মিনিফায়ার যোগ করার দরকার হয় না।

React-এর বিল্ড প্রোফাইলিং

নিয়মিত ডেভ এবং প্রোড বিল্ডের পাশাপাশি, রিয়্যাক্ট পারফরম্যান্স বিশ্লেষণের উপর দৃষ্টি নিবদ্ধ একটি বিশেষ প্রোফাইলিং বিল্ডও প্রদান করে।এই সংস্করণটি অভ্যন্তরীণভাবে React-কে ইনস্ট্রুমেন্ট করে, যাতে DevTools Profiler-এর মতো টুলগুলো অত্যন্ত বিস্তারিত টাইমিং তথ্য সংগ্রহ করতে পারে।

ব্রাউজার পরিবেশে প্রোফাইলিং বিল্ডটি ব্যবহার করতে, আপনাকে ইম্পোর্ট করতে হবে react-dom/profiling পরিবর্তে react-dom/client এবং সাধারণত একটি বান্ডলার অ্যালিয়াস কনফিগার করা হয়, যাতে আপনাকে প্রতিটি ইম্পোর্ট ম্যানুয়ালি করতে না হয়। কিছু ফ্রেমওয়ার্ক আপনার জন্য এই আচরণটি টগল করার জন্য আগে থেকেই একটি ফ্ল্যাগ বা মোড প্রদান করে।

React-এর আগের সংস্করণগুলো (১৭-এর আগে) স্ট্যান্ডার্ড ইউজার টাইমিং এপিআই (User Timing API)-এর উপর নির্ভর করত। ব্রাউজারের পারফরম্যান্স প্যানেলে দৃশ্যমান চিহ্ন ও পরিমাপ প্রদর্শন করতে। আধুনিক React এই ক্ষমতাগুলোকে React DevTools-এর ডেডিকেটেড প্রোফাইলার ট্যাবের সাথে যুক্ত করে, যাতে আপনি সরাসরি কম্পোনেন্টগুলোর গভীরে প্রবেশ করতে পারেন।

React পারফরম্যান্স বোঝা এবং পরিমাপ করা

যা পরিমাপ করা হয় না, তা ঠিক করা যায় না, তাই React-এ পারফরম্যান্স সংক্রান্ত কাজ সবসময় প্রোফাইলিং দিয়ে শুরু করা উচিত।এর মানে হলো, ব্রাউজার টুলিং এবং রিয়্যাক্ট-নির্দিষ্ট প্রোফাইলার ব্যবহার করে দেখা যে আসলে সময় কোথায় ব্যয় হচ্ছে এবং কোন কম্পোনেন্টগুলো প্রয়োজনের চেয়ে বেশিবার রি-রেন্ডার হচ্ছে।

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

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

শিডিউলার পর্যায়গুলি ট্র্যাক এবং রেন্ডার করে

শিডিউলার হলো React-এর একটি অভ্যন্তরীণ অ্যাবস্ট্রাকশন যা বিভিন্ন প্রায়োরিটিতে কাজ সমন্বয় করে।পারফরম্যান্স ট্রেসে আপনি ব্লকিং কাজের (প্রায়শই সিঙ্ক্রোনাস ইউজার-চালিত আপডেট) এবং ট্রানজিশন কাজের (ব্যাকগ্রাউন্ড UI আপডেট যা দ্বারা ট্রিগার হয়) জন্য আলাদা সাবট্র্যাক দেখতে পাবেন। startTransition), সাসপেন্স-সম্পর্কিত কাজ এবং অলস কাজ যা আরও জরুরি কোনো কাজ বাকি না থাকলে চলতে থাকে।

প্রতিটি রেন্ডার পাস বেশ কয়েকটি স্বতন্ত্র ধাপের মধ্য দিয়ে যায়, যা আপনি টাইমলাইনে পর্যবেক্ষণ করতে পারেন।একটি আপডেট পর্যায় (যা রেন্ডারকে ট্রিগার করে), একটি রেন্ডার পর্যায় (যেখানে React আপনার কম্পোনেন্টগুলোকে কল করে এবং পরবর্তী ট্রি তৈরি করে), একটি কমিট পর্যায় (যেখানে DOM পরিবর্তিত হয় এবং লেআউট ইফেক্ট যেমন useLayoutEffect রান) এবং একটি অবশিষ্ট প্রভাব পর্যায় (যেখানে নিষ্ক্রিয় প্রভাব যেমন useEffect সাধারণত রঙের পরে চলে)।

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

কম্পোনেন্টস ট্র্যাক: রেন্ডার এবং ইফেক্টের জন্য ফ্লেমগ্রাফ

কম্পোনেন্টস ট্র্যাকটি দেখায় যে প্রতিটি কম্পোনেন্ট (এবং তার অধীনস্থ কম্পোনেন্টগুলো) রেন্ডার হতে কতক্ষণ সময় লাগে। ফ্লেমগ্রাফ ব্যবহার করে। গ্রাফে ব্লকটি যত চওড়া হয়, সেই রেন্ডার পাসে কম্পোনেন্ট সাবট্রিটি তত বেশি সময় নেয়।

React প্রভাবের সময়কালকেও একটি পৃথক ফ্লেমগ্রাফ হিসাবে প্রকাশ করে। এমন একটি কালার স্কিমের মাধ্যমে যা শিডিউলার ট্র্যাকের সংশ্লিষ্ট পর্যায়কে প্রতিফলিত করে, ফলে আপনি এক নজরেই রেন্ডার টাইম এবং এফেক্ট টাইমের মধ্যে পার্থক্য করতে পারবেন।

মাউন্ট, আনমাউন্ট, পুনঃসংযোগ এবং সংযোগ বিচ্ছিন্ন হওয়ার মতো অতিরিক্ত ঘটনাগুলো এই ফ্লেমগ্রাফগুলিতে টীকা হিসেবে প্রদর্শিত হয়।উদাহরণস্বরূপ, গাছের নতুন কোনো অংশ লাগানো বা কোনো অংশ কেটে ফেলা চিহ্নিত করা হবে, এবং কিছু বৈশিষ্ট্য যেমন <Activity> কম্পোনেন্টগুলোর নিজস্ব পুনঃসংযোগ/বিচ্ছিন্নতার চিহ্ন থাকে।

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

সার্ভার ট্র্যাক করে: অনুরোধ এবং সার্ভারের উপাদানসমূহ

আপনি যদি রিয়্যাক্ট সার্ভার কম্পোনেন্ট ব্যবহার করেন, তাহলে পারফরম্যান্স টুলিং সার্ভার-সাইডের আচরণও প্রকাশ করতে পারে।“সার্ভার রিকোয়েস্টস” ট্র্যাকটি সেইসব প্রমিসগুলোকে একত্রিত করে যেগুলো শেষ পর্যন্ত সার্ভারের উপাদানগুলোতে ডেটা সরবরাহ করে, যার মধ্যে কলও অন্তর্ভুক্ত থাকে। fetch অথবা অ্যাসিঙ্ক্রোনাস ফাইলসিস্টেম অপারেশন।

React তৃতীয় পক্ষের হেল্পারে তৈরি Promise-গুলিকে একটি একক span-এ একত্রিত করার চেষ্টা করে। সুতরাং আপনি একটি যৌক্তিক ক্রিয়াকলাপ দেখতে পাবেন যেমন getUser এক ডজন নিম্ন-স্তরের পরিবর্তে fetch কল। একটি স্প্যানে ক্লিক করলে দেখা যায় সেটি কোথায় তৈরি করা হয়েছিল এবং, উপলব্ধ থাকলে, তার সমাধানকৃত মান বা প্রত্যাখ্যানের কারণ।

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

অপ্রয়োজনীয় রেন্ডার কমানো: React.memo, useMemo, useCallback এবং PureComponent

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

এই অপচয়মূলক কাজ কমাতে React বেশ কিছু উপায় প্রদান করে: React.memo কার্যকরী উপাদানগুলির জন্য, React.PureComponent ক্লাস কম্পোনেন্টগুলির জন্য, এবং useMemo/useCallback প্রপস হিসাবে পাঠানো মান স্থিতিশীল করার জন্য হুকএগুলো জাদুবলে পারফরম্যান্সের সব সমস্যা সমাধান করে না, কিন্তু ভেবেচিন্তে ব্যবহার করলে অনেক বড় পার্থক্য গড়ে তুলতে পারে।

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

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

এই হল যেখানে useMemo এবং useCallback ভিতরে আসো: useMemo অন্য স্টেট থেকে প্রাপ্ত অবজেক্ট বা অ্যারের মানগুলোকে স্থিতিশীল করে, যাতে সেগুলো কেবল তখনই পরিবর্তিত হয় যখন তাদের নির্ভরশীলতাগুলো পরিবর্তিত হয়, এবং useCallback মেমোইজড চাইল্ড ফাংশনে পাস করা কলব্যাকগুলির জন্য স্থিতিশীল ফাংশন রেফারেন্স প্রদান করে।

ক্লাস কম্পোনেন্ট: shouldComponentUpdate এবং React.PureComponent

আড়ালে, বেশিরভাগ React রেন্ডার অপ্টিমাইজেশন মূলত নিয়ন্ত্রণ করার উপর নির্ভর করে যে shouldComponentUpdate সত্য বা মিথ্যা ফেরত দেয়ডিফল্ট ইমপ্লিমেন্টেশন সর্বদা 'true' রিটার্ন করে, যার অর্থ হলো যেকোনো প্রপ বা স্টেট পরিবর্তন সেই কম্পোনেন্ট এবং তার সাবট্রির জন্য একটি রেন্ডার এবং রিকনসিলিয়েশন ট্রিগার করে।

ওভাররাইড করে shouldComponentUpdateযেসব সাবট্রি আপডেট করার প্রয়োজন নেই, সেগুলোর জন্য আপনি কাজ সংক্ষিপ্ত করতে পারেন।আপনি যদি false রিটার্ন করেন, React কল করবে না। render() সেই কম্পোনেন্ট বা তার কোনো উত্তরসূরির জন্য, এবং এটি ট্রি-এর সেই অংশের জন্য নতুন ও পুরোনো ভার্চুয়াল ডোম নোডগুলোর মধ্যে তুলনাও করবে না।

একটি ছোট কম্পোনেন্ট ট্রি বিবেচনা করুন যেখানে কিছু নোড ফলস রিটার্ন করে shouldComponentUpdateReact ওই শাখাগুলিতে ট্রাভার্সাল সম্পূর্ণরূপে এড়িয়ে যেতে পারে, যেখানে অন্যান্য নোড যেখানে মেথডটি 'true' রিটার্ন করে, সেগুলি সম্পূর্ণরূপে প্রসেস করা হবে। পরিশেষে, শুধুমাত্র সেই নোডগুলিই DOM মিউটেশন ঘটাবে, যাদের রেন্ডার করা আউটপুট প্রকৃতপক্ষে পরিবর্তিত হয়েছে।

কারণ লেখার রীতি shouldComponentUpdate যুক্তি পুনরাবৃত্তিমূলক, React এর সাথে React.PureComponentযা বর্তমান এবং পূর্ববর্তী প্রপস ও স্টেটের একটি শ্যালো তুলনা বাস্তবায়ন করে। যদি শ্যালোভাবে কোনো পরিবর্তন না হয়, তাহলে React নিরাপদে সেই ক্লাস কম্পোনেন্টটি পুনরায় রেন্ডার করা এড়িয়ে যেতে পারে।

অপরিবর্তনীয়তা এবং কেন অগভীর তুলনা ব্যর্থ হতে পারে

শ্যালো কম্প্যারিসন ধরে নেয় যে, যদি কোনো ভ্যালু পরিবর্তিত হয়, তবে তার রেফারেন্সও পরিবর্তিত হবে—এই ধারণাটি তখনই ভেঙে যায়, যখন আপনি বিদ্যমান অ্যারে বা অবজেক্টকে সরাসরি পরিবর্তন (mutate) করেন।অপরিবর্তনীয়তা-ভিত্তিক অপ্টিমাইজেশনকে পরিবর্তনযোগ্য ডেটা স্ট্রাকচারের সাথে একত্রিত করার ক্ষেত্রে এটি বাগের একটি চিরাচরিত উৎস।

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

এর সমাধান হলো সরাসরি প্রপস বা স্টেট পরিবর্তন করা এড়িয়ে চলা এবং এর পরিবর্তে ডেটা পরিবর্তিত হলে নতুন অ্যারে বা অবজেক্ট তৈরি করা।। পরিবর্তে words.push(newWord), আপনি ব্যবহার করবেন words.concat(newWord) অথবা স্প্রেড সিনট্যাক্স [...words, newWord]যা অ্যারের জন্য একটি নতুন রেফারেন্স তৈরি করে এবং সঠিক আপডেটগুলো চালু করে।

একই নীতি বস্তুর ক্ষেত্রেও প্রযোজ্য।পুনর্বন্টন করার পরিবর্তে colormap.right = 'blue' বিদ্যমান কোনো অবজেক্টে, আপনি ব্যবহার করে একটি নতুন অবজেক্ট রিটার্ন করবেন Object.assign({}, colormap, { right: 'blue' }) অথবা অবজেক্ট স্প্রেড সিনট্যাক্স { ...colormap, right: 'blue' }এটি নিশ্চিত করে যে শ্যালো কম্প্যারিসন একটি নতুন রেফারেন্স দেখতে পায় এবং পরিবর্তনটি শনাক্ত করে।

যখন ডেটা গভীরভাবে নেস্টেড বা স্তরীভূত হয়ে যায়, তখন হাতে করে অপরিবর্তনীয়তা বজায় রাখা কষ্টসাধ্য হয়ে উঠতে পারে।Immer বা immutability-helper-এর মতো লাইব্রেরিগুলো আপনাকে এমন কোড লিখতে দেয় যা দেখতে ইম্পারেটিভ ও মিউটেটিভ মনে হলেও অভ্যন্তরীণভাবে নতুন ইমিউটেবল স্ট্রাকচার তৈরি করে, যা বিভিন্ন ক্ষেত্রের সাথে চমৎকারভাবে কাজ করে। PureComponent এবং React.memo.

দীর্ঘ তালিকা এবং ভারী UI ভার্চুয়ালাইজ করা

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

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

জনপ্রিয় লাইব্রেরি যেমন react-window এবং react-virtualized তালিকা, গ্রিড এবং টেবিলের জন্য পুনঃব্যবহারযোগ্য উপাদান সরবরাহ করুন যেগুলো কার্যকর ভার্চুয়ালাইজেশন কৌশল প্রয়োগ করে। এগুলো কোন আইটেমগুলো রেন্ডার করতে হবে তার গাণিতিক হিসাব, ​​আকার নির্ধারণ, কন্টেইনার স্ক্রল করা এবং এমনকি অসীম লোডিং আচরণের মতো বিষয়গুলোও সামলায়।

ভার্চুয়ালাইজেশন সেট আপ করতে সাধারণত তিনটি অংশ জড়িত থাকে।উপযুক্ত উপাদান বাছাই করা (উদাহরণস্বরূপ, FixedSizeList অভিন্ন সারি বা VariableSizeList পরিবর্তনশীল উচ্চতার জন্য), কন্টেইনারটিকে একটি নির্দিষ্ট উচ্চতা প্রদান করে overflow: scrollএবং লাইব্রেরির অনুরোধ করা শুধুমাত্র আইটেম কম্পোনেন্টটি রেন্ডার করা, যা সাধারণত মেমোরাইজড থাকে React.memo অপ্রয়োজনীয় পুনঃরেন্ডার এড়াতে

সঠিকভাবে করা হলে, ভার্চুয়ালাইজেশন বিশাল ডেটাসেটের ক্ষেত্রেও স্ক্রোল পারফরম্যান্স মসৃণ রাখে এবং মেমরি ব্যবহার কম রাখে।বাস্তব অ্যাপগুলো এই কৌশলটি ব্যবহার করে ইউজার ইন্টারফেস (UI) থেমে না গিয়েই বিশাল সংগ্রহ—যেমন মিউজিক রিভিউ, ই-কমার্স ক্যাটালগ, ইনবক্স—দক্ষতার সাথে ব্রাউজ করেছে।

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

স্টেট ম্যানেজমেন্ট, ভার্চুয়াল ডোম এবং কম্পোনেন্ট কাঠামো

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

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

প্রথমে, আপনার অ্যাপের জটিলতার জন্য একটি উপযুক্ত স্টেট ম্যানেজমেন্ট কৌশল বেছে নিন।স্থানীয় রিঅ্যাক্ট অবস্থা (useState, useReducerছোট কম্পোনেন্টগুলোর জন্য এটি ক্ষুদ্র ও সরল, অন্যদিকে Redux-এর মতো লাইব্রেরি বা Zustand-এর মতো লাইটওয়েট স্টোরগুলো অপ্টিমাইজড সাবস্ক্রিপশন প্যাটার্নের মাধ্যমে আরও জটিল গ্লোবাল স্টেটকে কেন্দ্রীভূত করতে পারে।

দ্বিতীয়ত, আপনার স্টেটকে এমনভাবে গঠন করুন যাতে সম্পর্কিত ডেটাগুলো যৌক্তিকভাবে গোষ্ঠীভুক্ত হয়।কখনও কখনও এর অর্থ হলো একাধিককে একত্রিত করা useState একটিমাত্র অবজেক্টে কল করা হয় যাতে আপডেটগুলো সুসংগত থাকে; অন্য ক্ষেত্রে, স্টেটকে এমনভাবে বিভক্ত করা বেশি কার্যকর যাতে স্বাধীন বিষয়গুলো একে অপরকে পুনরায় রেন্ডার করতে বাধ্য না করে।

পূর্ববর্তী মান থেকে প্রাপ্ত স্টেট আপডেট করার সময়, সর্বদা ফাংশনাল আপডেট ব্যবহার করুন। যেমন setCount(prev => prev + 1)এবং অ্যারে ও অবজেক্টগুলোকে সরাসরি পরিবর্তন না করে ক্লোন করার মাধ্যমে অপরিবর্তনীয়তা বজায় রাখা হয়। এর ফলে আচরণ অনুমানযোগ্য হয় এবং এটি মেমোইজেশন ও পিওরকম্পোনেন্টস-এর সাথে ভালোভাবে কাজ করে।

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

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

কোড স্প্লিটিং, লেজি লোডিং এবং উন্নত অ্যাসেট লোডিং

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

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

একটি সাধারণ কৌশল হলো রুট-স্তরের বিভাজন।যেখানে প্রতিটি পৃষ্ঠা তার নিজস্ব একটি অংশ এবং ব্যবহারকারী যখন সেখানে নেভিগেট করে, কেবল তখনই তা লোড হয়। আপনি আরও এক ধাপ এগিয়ে বড় ফিচার কম্পোনেন্ট বা কদাচিৎ ব্যবহৃত প্যানেলগুলিকে বিভক্ত করতে পারেন, তবে শর্ত হলো আপনাকে সেগুলিকে একটি <div> ট্যাগের মধ্যে রাখতে হবে। Suspense একটি উপযুক্ত ফলব্যাক UI সহ।

লেজি লোডিং ইমেজের ক্ষেত্রেও প্রযোজ্য।। যুক্ত হচ্ছে loading="lazy" থেকে <img> ট্যাগগুলি স্ক্রিনের নিচের ছবিগুলিকে স্ক্রল করে দৃশ্যমান না হওয়া পর্যন্ত লোড হতে বিলম্ব ঘটায়, যা ব্যান্ডউইথ সাশ্রয় করে এবং প্রাথমিক পেইন্টের গতি বাড়ায়। আরও উন্নত ইফেক্টের জন্য, লাইব্রেরি যেমন react-lazy-load-image-component ঝাপসা প্লেসহোল্ডার এবং প্রগতিশীল লোডিং সমর্থন করে।

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

সার্ভার-সাইড রেন্ডারিং, রিয়্যাক্ট সার্ভার কম্পোনেন্ট এবং সার্ভার অ্যাকশন

সার্ভার-সাইড রেন্ডারিং (SSR) আপনার React অ্যাপটিকে সার্ভারে রেন্ডার করে এবং ক্লায়েন্টের কাছে HTML পাঠায়, যা পারফরম্যান্স এবং SEO-এর মান ব্যাপকভাবে উন্নত করতে পারে।ব্যবহারকারীরা দরকারি বিষয়বস্তু আরও দ্রুত দেখতে পান এবং সার্চ ইঞ্জিনগুলো আপনার পেজগুলোকে আরও নির্ভরযোগ্যভাবে ইন্ডেক্স করতে পারে।

Next.js-এর মতো ফ্রেমওয়ার্কগুলো দৈনন্দিন অ্যাপের জন্য SSR এবং স্ট্রিমিং HTML-কে বাস্তবসম্মত করে তোলে।আপনি সার্ভার থেকে ডেটা সংগ্রহ করেন, কম্পোনেন্টগুলোকে HTML-এ রেন্ডার করেন—কখনও কখনও স্ট্রিম হিসেবেও—এবং তারপর ক্লায়েন্টে সেই মার্কআপটিকে হাইড্রেট করেন যাতে এটি ইন্টারেক্টিভ হয়ে ওঠে।

ক্লাসিক SSR-এর বাইরে, React Server Components আপনার UI লজিকের আরও বেশি অংশ সার্ভার সাইডে ঠেলে দেয়।এর ফলে আপনি এমন কম্পোনেন্ট রেন্ডার করতে পারবেন যা কখনোই ক্লায়েন্টে পাঠানো হয় না। এটি ক্লায়েন্ট বান্ডেলের আকার উল্লেখযোগ্যভাবে কমাতে পারে এবং ডেটা সংগ্রহকে সহজ করে তোলে, কারণ সার্ভার কম্পোনেন্টগুলো সরাসরি ডেটাবেস বা এপিআই কল করতে পারে।

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

SSR, সার্ভার কম্পোনেন্ট এবং সার্ভার অ্যাকশন একসাথে ব্যবহার করলে আপনি বিভিন্ন ধরণের রেন্ডারিং কৌশল লাভ করতে পারেন।গুরুত্বপূর্ণ কন্টেন্ট সার্ভার থেকে দ্রুত স্ট্রিম করা যায়, জটিল লজিক ক্লায়েন্টে থাকে না, এবং রিয়্যাক্ট রানটাইম সবকিছুকে একত্রিত করে একটি সুসংহত ইউএক্স (UX) তৈরি করে।

ওয়েব ওয়ার্কারদের মাধ্যমে ভারী কাজের চাপ কমানো

এমনকি সেরা অপ্টিমাইজ করা রিয়্যাক্ট ট্রি-ও আটকে যাবে যদি আপনি মেইন থ্রেডে সিপিইউ-নির্ভর কাজ চালান।ব্যয়বহুল গণনা রেন্ডারিং আটকে দেয়, ইভেন্ট হ্যান্ডলিংয়ে বিলম্ব ঘটায় এবং আপনার অ্যাপকে প্রতিক্রিয়াহীন করে তোলে।

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

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

React-এর সাথে ওয়ার্কার ইন্টিগ্রেট করতে হলে একটি আলাদা স্ক্রিপ্ট ফাইল তৈরি করতে হয়, যা বিভিন্ন সিগন্যালের জন্য লিসেন করে। onmessage ওয়ার্কারের ভিতরে এবং আপনার কম্পোনেন্টগুলো থেকে মেসেজ পোস্ট করাকম্পোনেন্টের মধ্যে, আপনি ওয়ার্কারটি ইনস্ট্যানশিয়েট করেন এবং এটিকে ইনপুট পাঠান। postMessage এবং এটি সাড়া দিলে স্টেট আপডেট করুন, আদর্শগতভাবে কম্পোনেন্টটি আনমাউন্ট হওয়ার সময় ওয়ার্কারটি পরিষ্কার করে ফেলুন।

Comlink, workerize বা bundler প্লাগইনের মতো লাইব্রেরিগুলো এই প্যাটার্নটিকে সরল করতে পারে। নিম্ন-স্তরের মেসেজ পাসিংকে বিমূর্ত করে এবং আপনাকে এমন একটি এপিআই প্রদান করে যা অ্যাসিঙ্ক ফাংশন কল করার মতো অনুভূতি দেয়, যা একটি রিয়্যাক্ট কোডবেসে বোঝা আরও সহজ।

নজর রাখার মতো প্রধান ব্রাউজার এবং ব্যবহারকারী-কেন্দ্রিক মেট্রিকসমূহ

উচ্চতর পর্যায়ে, সামগ্রিক ওয়েব পারফরম্যান্স সাধারণত ব্যবহারকারী-কেন্দ্রিক মেট্রিক্স ব্যবহার করে ট্র্যাক করা হয়। যেমন ফার্স্ট কনটেন্টফুল পেইন্ট (FCP), লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP) এবং টাইম টু ইন্টারঅ্যাক্টিভ (TTI)। এগুলো থেকে ধারণা পাওয়া যায় যে ব্যবহারকারীরা কত দ্রুত কনটেন্ট দেখতে পায় এবং কত তাড়াতাড়ি তারা সেটির সাথে ইন্টারঅ্যাক্ট করতে পারে।

সাধারণ ডিভাইসগুলিতে ভালো React অ্যাপের লক্ষ্য থাকে FCP প্রায় ১.৮ সেকেন্ডের নিচে, LCP প্রায় ২.৫ সেকেন্ডের নিচে এবং TTI ৪ সেকেন্ডের অনেক নিচে রাখা।যদিও সঠিক সীমা প্রজেক্ট অনুযায়ী ভিন্ন হতে পারে। আপনি যদি ধারাবাহিকভাবে এই সংখ্যাগুলো অতিক্রম করেন, তবে এটি একটি লক্ষণ যে আপনার বান্ডেল, রেন্ডারিং কৌশল বা সার্ভারের প্রতিক্রিয়া সময়ের উন্নতি প্রয়োজন।

Lighthouse, WebPageTest এবং Chrome-এর পারফরম্যান্স প্যানেলের মতো টুলগুলি আপনাকে সিন্থেটিক টেস্ট এনভায়রনমেন্টে এই মেট্রিকগুলি পরিমাপ করতে সাহায্য করে।বাস্তব পরিস্থিতি সম্পর্কে ধারণা পেতে, স্পিডকার্ভ, ডেটাডগ, লগরকেট বা সেন্ট্রির মতো রিয়েল ইউজার মনিটরিং (RUM) টুলগুলো ব্যবহারকারীর প্রকৃত সেশন ট্র্যাক করে এবং ধীরগতির কারণ হিসেবে কোডের পরিবর্তনগুলোকে চিহ্নিত করে।

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

পারফরম্যান্স টিউনিং এর জন্য কার্যকরী টিম ওয়ার্কফ্লো

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

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

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

বাস্তবায়ন হলো যেখানে আপনি নির্দিষ্ট সমাধান প্রয়োগ করেন।—একটি হট কম্পোনেন্টকে মেমোইজ করা, একটি দীর্ঘ তালিকাকে ভার্চুয়ালাইজ করা, একটি বান্ডেলকে বিভক্ত করা, একটি ওয়েব ওয়ার্কারের কাছে কাজ অফলোড করা, অথবা নির্দিষ্ট কিছু পেজের জন্য এসএসআর (SSR) সক্রিয় করা। প্রতিটি পরিবর্তন এতটাই ছোট হওয়া উচিত যাতে তা নিয়ে যুক্তি দিয়ে বোঝা যায়।

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

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