রিয়েক্ট এপ্লিকেশন পারফরমেন্স অপটিমাইজেশন

আস্সালামুলাইকুম, আমি সোলাইমান স্বাধীন…

এই আর্টিকেলটি রিয়েক্ট এপ্লিকেশন এর কিছু পারফরমেন্স অপটিমাইজেশন টেকনিক নিয়ে,

Let’s begin with some must know techniques …

কোড স্প্লিটিং (কোড বিভাজন) -

কোড স্প্লিটিং বা বাংলায় বললে কোড বিভাজন হচ্ছে একটি টেকনিক যেটার Goal হচ্ছে কোড ভাগ ভাগ করে লোড করা।

মানে যখন যেটা দরকার পরবে তখন সেটার কোড বান্ডেল লোড করবো , যেটার এখন দরকার নেই সেখানে ঐটার কোড বান্ডেল লোড না করে যখন দরকার পরবে তখনই সেটা লোড করবো । Ok :)

বাস্তব এক্সাম্পল দিয়ে চিন্তা করা যাক : আপনি ৫০ পেইজ এর একটি ওয়েব এপ্লিকেশন বানালেন এখন যখন ওয়েবসাইট-টাতে কেউ হোম পেইজ ভিজিট করবে তখন হোম পেইজ এর কোড বাবদ বাকি ৪৯ টা পেইজ এর কোড লোড করার প্রয়োজন আছে কি ?

নরমালি সবগুলো পেইজের কোড-ই লোড হচ্ছে , তাহলে ভাবেন! সাংঘাতিক নাহ ?

কতটা অপটিমাইজেশন করা যায় এখানে ! আপনি হোম পেইজ এ যাচ্ছেন আমি শুধু হোম পেইজ এর জন্য প্রয়োজনীয় কোড লোড করবো বাকি হাজারটা পেইজ থাকুক ওগুলো তো এখন লোড করার দরকার নেই, আর সব গুলো লোড করতে গেলে আমার জাস্ট হোম পেইজটা লোড করতেই কি অবস্থা হবে চিন্তা করেন! দরকার নেই , Rather than যখন যে পেইজে ভিজিট করা হবে তখন সেই পেইজ এর কোড বান্ডেল লোড করবো, Based on demand ।

তো, এখানে কোড বিভাজন মানে কোড স্প্লিটিং টেকনিক টা সেই কাজের জিনিস ! কিন্তু কাজটা করবো কি করে ?

খুব ইজি , রিয়েক্ট-এরই বিল্টইন সিস্টেম আছে https://reactjs.org/docs/code-splitting.html#reactlazy

Lazy Loading/অলস লোডিং, ডকুমেন্টেশন থেকে ঘুরে এসে থাকলে হয়তো ডিফারেন্সিয়েট করতে পারতেছেন। তেমন কিছু না জাস্ট আমরা নরমালি কোনো কম্পোনেন্ট/কোড ইম্পোর্ট/লোড করতে ডিরেক্ট ইম্পোর্ট করতাম , এটা জাস্ট React.lazy() ফাংশনটি দিয়ে ডাইনামিক ভাবে লোড করতেছে । এইটা আসলে করতেছে কি ? কম্পোনেন্টটিকে lazily/অলস ভাবে লোড করতেছে, মানে আগেই সব কিছু লোড না করে যখন পেইজে এটার use দেখতেছে তখন এটা লোড করতেছে অন্যথায় সে অলস ;) , দরকার ছাড়া কিছু করেনা সে, যখন দরকার পরবে কেবল তখনই লোড করবে সে :) ।

আর , আরেকটা জিনিস হয়তো লক্ষ্য করেছেন, সেটা রিয়েক্ট এর Suspense কম্পোনেন্ট, যেটা fallback নামে একটি props নিচ্ছে , সাসপেন্স কম্পোনেন্ট দিয়ে Lazy loaded কম্পোনেন্টটা মুড়িয়ে দেয়া , এই suspense এর fallback টা হচ্ছে আপনার কম্পোনেন্টটি লোডিং অবস্থায় থাকা-কালীন fallback হিসেবে যে UI টা দেখাবে , আমরা Preloader হিসাবে যাই use করবো সেটাই আরকি ।

প্রিফেচিং -

Ok, এখন পর্যন্ত আমরা কোড স্প্লিটিং করে এক লেভেলের অপটিমাইজেশন করেছি । এখন আমাদের প্রতিটা পেইজে যখন যাওয়া হয় তখন On demand সেই পেইজের প্রয়োজনীয় কোড বান্ডেল লোড হয় । ধরেন আমি হোম পেইজ-এ ছিলাম, শুধু হোম পেইজ এর কোড বান্ডেলই লোড হয়েছিলো, এখন হোম পেইজ থেকে about পেইজ যাবো , So যখন নেভিগেট করে নতুন পেইজ-এ যাবো তখন নতুন পেইজ এর কোড chank লোড হবে, লোড হতে কিছুটা সময় নিলে পেইজ ট্রান্সিশন এ একটি লোডিং লেটেন্সি লক্ষ্য করা যাবে (যেহেতো on demand লোড করা হচ্ছে, আগে থেকে লোড করা ছিলোনা) । আমরা কোড স্প্লিটটিং না করলে হোম পেইজ ভিজিট এর সময়ে যেহেতু সব গুলো পেইজ এর কোড chank লোড হয়ে যেত তাই যখন হোম পেইজ থেকে about পেইজ এ যাওয়া হতো তখন কিন্তু পেইজ ট্রান্সিশন এ কোড লোডিং লেটেন্সি থাকতোনা কারণ এগুলোতো হোম পেইজে থাকতেই লোড হয়েগেছে , তো এই লেটেন্সি টা আমাদের কোড স্প্লিটিং করে পারফরমেন্স অপটিমাইজেশন এর Costing । মানে কোনো কিছুই ফ্রি না সবকিছুরই কিছুনা কিছু Costing আছে :) ।

তবে এখানটাতে আমরা কিছুটা অপটিমাইজেশন করতে পারি ।

ধরেন আমি অন্য একটি ওয়েব এপ্লিকেশন এর লগইন পেইজ-এ আছি , এটাও মোটামুটি বড় এপ্লিকেশন , এই এপ্লিকেশন এও অনেক পেইজ আছে , তবে আমি লগইন করার পর ড্যাশবোর্ড নামের একটি পেইজ আছে সেখানে আমাকে নিয়ে যাওয়া হবে লগইন পেইজ থেকে, লগইন করার পর । তো দেখেন এখানে আমার জানা আছে লগইন পেইজ এর পর আমাকে ড্যাশবোর্ড পেইজ এর কোড লোড করতে হবে। তাহলে আমি যদি লগইন পেইজ এ থাকা অবস্থায় ড্যাশবোর্ড এর কোড বান্ডেল লোড করে রাখি ? হ্যা , এটাই Prefetching ।

তো এই টেকনিক এ হবে কি ? আমার লগইন পেইজ ভালো ভাবে লোড সম্পন্ন হওয়ার পর যখন idle অবস্থায় থাকবে তখন তলেতলে ড্যাশবোর্ড এর কোড বান্ডেল লোড করা শুরু করে দিবে (লগইন পেইজ লোড হয়ে যাওয়ার পরে কিন্তু ঘটনা শুরু হবে ) তো Smoothly লগইন পেইজও লোড হলো তারপর তলেতলে ড্যাশবোর্ড লোড হয়ে থাকায়, লগইন এর পর ড্যাশবোর্ড পেইজ দেখতে পাবো kind of instantly , তেমন পেইজ ট্রান্সিশন লেটেন্সি ছাড়াই । জোশ নাহ!

আর এটা ইমপ্লিমেন্ট করা ম্যাজিকের মতো ইজি। এটার জন্য Webpack এর একটি জিনিস আছে যেটাকে বলা হয় webpack ম্যাজিক কমেন্ট , ম্যাজিকের মতো কাজ কারবার আরকি :)

Code Splitting । webpack

tip This guide extends the example provided in Getting Started. Please make sure you are at least familiar with the…webpack.js.org

সিম্পল এক্সাম্পল :

const Dashboard = React.lazy(() => import(/* webpackPrefetch: true */ ‘./Dashboard.js’))

Eager loading (আগ্রহী লোডিং) -

তো আমরা সম্ভাবনা বুঝে তলেতলে কোড লোডিং (Prefetching) টেকনিক শিখে ফেলেছি, এবার আমরা আরেকটা লোডিং টেকনিক শিখবো User এর আগ্রহ বুঝে কোড লোডিং টেকনিক, Eager loading বা আগ্রহী লোডিং :) । এবার আর বেশি কথা হবে না । User এর আগ্রহ বুঝবো আর লোডিং শুরু করবো :) । ধরেন User যেই পেইজ এ আছে ঐখান থেকে অন্যান্য পেইজ এ নেভিগেট করার জন্য ন্যাভিগেশন লিংক আছে , এবার আমরা করবো কি, User যখনই কোনো ন্যাভিগেশন লিংক এর আশেপাশে ঘুরাঘুরি করবে, ধরেন যখন লিংক-এর উপর মাউস হোভার করবে, ক্লিক তো পরে থাক, হোভার করার সাথে সাথেই আমরা লিংক পেইজ এর কোড Chank লোড করা শুরু করে দিবো, এমন হতে পারে যে দেখা গেলো সে মাউস হোভার করার পর যে ক্লিক করবে, ক্লিক করার আগেই পেইজ এর কোড chank লোড হয়ে রেডি অথবা অনেকটা লোড করে ফেলেছে, তো User যখন পেইজ ট্রান্সিশন দেখবে হতে পারে kind of instantly experience অথবা তুলনা মূলক কম লেটেন্সি experience পাবে ।

এটি ইমপ্লিমেন্ট করা কঠিন না, হালকার উপর সুডো টাইপের একটি এক্সাম্পল দিচ্ছি আপনার জন্য:

const loadAboutPage = () => import(‘./about.js’);

return (<Link onMouseOver={loadAboutPage} to=”/about”> About Me</Link>)

বোনাস —

Image অপটিমাইজেশন :

সাধারণত একটি ওয়েবসাইট এর ফাইল সাইজ চিন্তা করলে দেখবেন সাইজ এর বেশির ভাগ রিসোর্স ইমেজ । একটি ওয়েব পেইজ Load এর ক্ষেত্রে ভারী জিনিস গুলোর মধ্যে ইমেজ অন্যতম । So, ইমেজ গুলো Optimaze করা গেলে ওভারঅল ওয়েবপেইজ লোড টাইম অনেকটা ইম্প্রোভ করা যায় , অনলাইনে বেশকিছু টুলস আছে যেগুলোর যাহায্যে আপনার ওয়েব পেইজ এ ব্যাবহৃত ইমেজ গুলো কমপ্রেস করে ফাইল সাইজ কমিয়ে নিতে পারেন : https://compressor.io/ , https://tinypng.com/ । আর সবচেয়ে মজার বেপার হচ্ছে আপনি ইমেজ গুলোকেও lazy লোড করতে পারেন, এন্ড জিনিস টা করাও খুব ইজি , HTML এরই একটি এট্রিবিউট জাস্ট <img loading=”lazy”> । এতে হবে কি ? ধরেন আপনার অনেক লম্বা একটি ওয়েবপেইজ এ, উপরে নিচে অনেক ইমেজ use করা হয়েছে , নরমালি ওয়েবপেইজ টা লোড করতে হলে ইমেজ গুলোও একই সময়ে লোড করতে হবে , আপনি loading=”lazy” arrtibute টি use করলে ইমেজটি ঠিক যেখানে দেখানো হচ্ছে পর্শনটার আশেপাশে স্ক্রল করে যখন যাওয়া হবে তখন ইমেজটা লোড হবে , মানে On Demand ।

তো ভাই আজকের জন্য এই পর্যন্তই , ইনশাআল্লাহ “রিয়েক্ট এপ্লিকেশন পারফরমেন্স অপটিমাইজেশন পার্ট — ২” আসতে পারে ।