Lazy Loading একটি পারফরম্যান্স অপটিমাইজেশন কৌশল যেখানে শুধুমাত্র প্রয়োজনীয় মডিউল বা স্ক্রিপ্ট লোড করা হয়, অর্থাৎ যখন ব্যবহারকারী সেই মডিউল বা স্ক্রিপ্ট ব্যবহার করতে চান তখনই তা লোড হয়। এটি আপনার অ্যাপ্লিকেশনের লোড টাইম কমাতে সাহায্য করে এবং কম্পোনেন্ট বা মডিউলগুলোর জন্য অতিরিক্ত অনুরোধ ছাড়াই সিস্টেমের রিসোর্স ব্যবহারের দক্ষতা বাড়ায়।
RequireJS ব্যবহার করে Lazy Loading কনফিগার করা সহজ, কারণ RequireJS অ্যাসিঙ্ক্রোনাস মডিউল লোডিং সমর্থন করে এবং মডিউলগুলির লোডিংটি খুব সহজে নিয়ন্ত্রণ করা যায়।
Lazy Loading কনফিগার করা RequireJS-এ
RequireJS-এর মাধ্যমে lazy loading করতে হলে আপনাকে require() ফাংশন বা define() ফাংশনের মধ্যে নির্দিষ্ট মডিউলগুলিকে অ্যাসিঙ্ক্রোনাসভাবে লোড করতে হবে।
Lazy Loading কনফিগারেশন এবং উদাহরণ
1. মডিউল লোডিং পদ্ধতি
আপনি সাধারণত require() ফাংশন ব্যবহার করে একটি মডিউল বা স্ক্রিপ্ট অ্যাসিঙ্ক্রোনাসভাবে লোড করতে পারেন। যখন আপনি একটি মডিউল বা স্ক্রিপ্ট লোড করতে চান, তখন এটি তখনই লোড হবে যখন তা প্রয়োজন হয়।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading Example with RequireJS</title>
</head>
<body>
<h1>Lazy Loading Example</h1>
<button id="loadModule">Load Module</button>
<!-- Include RequireJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
// Lazy load 'moduleA' only when the button is clicked
document.getElementById('loadModule').addEventListener('click', function() {
require(['moduleA'], function(moduleA) {
console.log('ModuleA loaded');
moduleA.sayHello();
});
});
</script>
</body>
</html>
এখানে, যখন Load Module বাটনে ক্লিক করা হয়, তখন moduleA মডিউলটি লোড হবে। এটি লোড হবে না যতক্ষণ না ব্যবহারকারী বাটন ক্লিক না করেন।
2. require() ফাংশন দ্বারা Lazy Loading
require() ফাংশন ব্যবহার করে, আপনি নির্দিষ্ট মডিউলগুলিকে lazy-load করতে পারেন। এখানে আপনি মডিউল পাথ উল্লেখ করবেন এবং একটি কলব্যাক ফাংশন দেবেন, যা মডিউলটি লোড হওয়ার পর এক্সিকিউট হবে।
উদাহরণ:
// Main.js
require.config({
paths: {
'moduleA': 'libs/moduleA',
'moduleB': 'libs/moduleB'
}
});
document.getElementById('loadModuleA').addEventListener('click', function() {
require(['moduleA'], function(moduleA) {
console.log('ModuleA loaded');
moduleA.init();
});
});
document.getElementById('loadModuleB').addEventListener('click', function() {
require(['moduleB'], function(moduleB) {
console.log('ModuleB loaded');
moduleB.run();
});
});
এখানে, moduleA এবং moduleB মডিউলগুলো একে একে lazy-load হচ্ছে, যখন ব্যবহারকারী বাটনে ক্লিক করবে।
3. RequireJS-এর data-main দিয়ে Lazy Loading
যদি আপনি data-main অ্যাট্রিবিউট দিয়ে অ্যাপ্লিকেশন সেটআপ করেন, তবে lazy loading করতে data-main এর মাধ্যমে নির্দিষ্ট ইনিশিয়াল মডিউল লোড করতে পারেন এবং বাকি মডিউলগুলো যখন প্রয়োজন হবে তখন লোড করবেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading with RequireJS</title>
<!-- Include RequireJS -->
<script data-main="app" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
<body>
<h1>Lazy Loading Example</h1>
<button id="loadModule">Load Module</button>
</body>
</html>
এখানে, data-main অ্যাট্রিবিউটের মাধ্যমে app.js ফাইলটি প্রথমে লোড হবে এবং এরপর আপনি require() এর মাধ্যমে প্রয়োজনীয় মডিউলগুলিকে লোড করতে পারবেন।
4. require.config() ব্যবহার করে Lazy Loading
RequireJS এর require.config() এর মাধ্যমে আপনি পাথ কনফিগার করে মডিউলগুলির lazy loading কনফিগার করতে পারেন। এতে, আপনি মডিউলগুলোর মধ্যে ডিপেনডেন্সি এবং লোডিং পাথ পরিচালনা করতে পারবেন।
উদাহরণ:
require.config({
baseUrl: 'js',
paths: {
'moduleA': 'modules/moduleA',
'moduleB': 'modules/moduleB'
}
});
document.getElementById('loadModuleA').addEventListener('click', function() {
require(['moduleA'], function(moduleA) {
console.log('ModuleA loaded');
moduleA.init();
});
});
এখানে:
baseUrlএবংpathsকনফিগারেশন ব্যবহার করে নির্দিষ্ট মডিউলগুলি লোড হচ্ছে।require()ফাংশনের মাধ্যমে মডিউলগুলি অ্যাসিঙ্ক্রোনাসভাবে লোড হবে।
5. Lazy Loading with requirejs API
RequireJS এর requirejs() ফাংশন ব্যবহারের মাধ্যমে আপনি একটি নির্দিষ্ট মডিউল লোড করতে পারেন এবং সেই মডিউল লোড হওয়ার পরে callback function চালাতে পারেন।
উদাহরণ:
// Dynamically load a module with requirejs
requirejs(['moduleA'], function(moduleA) {
moduleA.start();
});
এখানে, moduleA মডিউলটি lazy load হচ্ছে এবং লোড হওয়ার পর start() ফাংশনটি কল হচ্ছে।
6. Optimizing Lazy Loading with chunks
Lazy loading ব্যবহার করার সময় কোড স্প্লিটিং-এর মাধ্যমে chunks তৈরি করতে পারেন, যার ফলে আপনার অ্যাপ্লিকেশন আরও দ্রুত লোড হবে এবং শুধুমাত্র প্রয়োজনীয় স্ক্রিপ্ট লোড হবে।
উদাহরণ:
require.config({
// Base URL and paths
baseUrl: 'js',
paths: {
'moduleA': 'modules/moduleA',
'moduleB': 'modules/moduleB'
}
});
document.getElementById('loadModule').addEventListener('click', function() {
require(['moduleA', 'moduleB'], function(moduleA, moduleB) {
moduleA.init();
moduleB.run();
});
});
এখানে moduleA এবং moduleB মডিউল দুটি আলাদাভাবে লোড হচ্ছে যখনই তাদের প্রয়োজন হয়।
সারসংক্ষেপ:
Lazy loading RequireJS এর মাধ্যমে সহজে কনফিগার করা যায়। এটি অ্যাসিঙ্ক্রোনাসভাবে মডিউল লোড করতে সাহায্য করে এবং অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে। আপনি require(), data-main, এবং require.config() ফাংশন ব্যবহার করে সহজে lazy loading কনফিগার করতে পারেন। এটি ডিপেনডেন্সি ম্যানেজমেন্টকে আরও সুবিধাজনক করে এবং কোডের অপটিমাইজেশন নিশ্চিত করে।
Read more
