RequireJS এর r.js Optimizer একটি শক্তিশালী টুল যা Multiple File Bundling এবং Concatenation করতে সহায়তা করে। এই টুলটি RequireJS প্রোজেক্টগুলির স্ক্রিপ্ট ফাইলগুলিকে একত্রিত (concatenate) এবং মিনিফাই (minify) করতে ব্যবহৃত হয়, যা অ্যাপ্লিকেশন লোড টাইম কমাতে সাহায্য করে এবং পারফরম্যান্স উন্নত করে।
Multiple File Bundling এবং Concatenation:
1. Multiple File Bundling:
Multiple file bundling এর মাধ্যমে আপনি একাধিক JavaScript ফাইলকে একটিতে সংযুক্ত করতে পারেন। এটি ডিপেনডেন্সি ম্যানেজমেন্ট এবং অ্যাপ্লিকেশনের লোডিং টাইমকে অপটিমাইজ করতে সহায়ক। r.js এর মাধ্যমে একাধিক স্ক্রিপ্ট ফাইলকে একটি ফাইলে একত্রিত করা সম্ভব হয়।
2. Concatenation:
Concatenation হলো একাধিক ফাইলকে একটি একক ফাইলে একত্রিত করা। এটি একাধিক স্ক্রিপ্ট ফাইলের সংখ্যা কমিয়ে দেয় এবং ব্রাউজারের জন্য কম HTTP রিকোয়েস্ট তৈরি করে, যা অ্যাপ্লিকেশন লোডিং স্পিড বৃদ্ধি করে।
r.js Optimizer ব্যবহার করে Multiple File Bundling এবং Concatenation
r.js একটি বিল্ট-ইন অপ্টিমাইজেশন টুল যা RequireJS এর অ্যাসিঙ্ক্রোনাস স্ক্রিপ্ট লোডিং ব্যবস্থাকে কাজে লাগিয়ে কোডের মিনিফিকেশন এবং একত্রিতকরণের কাজ করতে পারে। এটি স্ক্রিপ্ট ফাইলগুলির মধ্যে ডিপেনডেন্সি চিহ্নিত করে এবং সেই অনুযায়ী ফাইলগুলোকে একত্রিত বা মিনিফাই করে।
r.js Optimizer সেটআপ:
- RequireJS Optimization Tool (r.js) একটি কমান্ড লাইন টুল, যা
r.jsনামক ফাইলটির মাধ্যমে কাজ করে। এটি আপনার স্ক্রিপ্ট ফাইলগুলির minification, bundling, এবং concatenation প্রক্রিয়া সহজ করে তোলে। প্রথমে r.js ফাইলটি ডাউনলোড বা ইনস্টল করুন:
আপনি
r.jsঅপ্টিমাইজার ডাউনলোড করতে পারেন RequireJS-এর অফিসিয়াল গিটহাব রিপোজিটরি থেকে।
3. r.js Config ফাইল (build.js) কনফিগারেশন:
r.js অপ্টিমাইজার ব্যবহার করতে হলে আপনাকে একটি কনফিগারেশন ফাইল (build.js) তৈরি করতে হবে, যা bundling এবং concatenation অপটিমাইজেশন সেটআপ করবে। নিচে একটি উদাহরণ দেওয়া হল:
// build.js
({
baseUrl: 'js', // JavaScript ফাইলের বেস পাথ
name: 'main', // প্রধান স্ক্রিপ্ট ফাইলের নাম (main.js)
out: 'dist/main.min.js', // আউটপুট মিনিফাইড ফাইলের নাম
optimize: 'uglify2', // মিনিফিকেশন টুল (uglify2 ব্যবহার করা হয়েছে)
paths: {
'jquery': 'libs/jquery', // jQuery লাইব্রেরির পাথ
'underscore': 'libs/underscore' // Underscore লাইব্রেরির পাথ
},
include: ['jquery', 'underscore'], // স্ক্রিপ্টের ডিপেনডেন্সি
optimizeCss: 'standard', // CSS মিনিফিকেশন (যদি CSS থাকে)
findNestedDependencies: true, // Nested dependencies খুঁজে বের করা
wrap: {
startFile: 'js/wrap.start', // সাইটের শুরুতে যুক্ত করার জন্য ফাইল
endFile: 'js/wrap.end' // সাইটের শেষে যুক্ত করার জন্য ফাইল
},
// Additional configuration
skipDirOptimize: true, // অপ্রয়োজনীয় ডিরেক্টরি অপ্টিমাইজেশন বাদ দেওয়া
generateSourceMaps: true // সর্স ম্যাপ জেনারেট করা
})
ব্যাখ্যা:
- baseUrl:
jsফোল্ডার থেকে স্ক্রিপ্ট ফাইলগুলির লোড শুরু হবে। - name:
mainএখানে প্রধান স্ক্রিপ্ট ফাইলের নাম, যেমনmain.js। - out: আউটপুট মিনিফাইড স্ক্রিপ্টের ফাইল পাথ।
- optimize: স্ক্রিপ্ট মিনিফিকেশনের জন্য
uglify2অপশন ব্যবহার করা হচ্ছে। - paths: মডিউলগুলির পাথ নির্ধারণ করা হচ্ছে।
- include: প্রয়োজনীয় মডিউলগুলিকে একত্রিত করতে নির্দেশ দেয়।
- optimizeCss: যদি CSS থাকে তবে CSS ফাইল মিনিফাই করা হবে।
- wrap: স্ক্রিপ্টে প্রাক এবং পোস্ট ফাইল যোগ করার জন্য ব্যবহৃত হয়।
4. r.js অপ্টিমাইজার রান করা:
এখন আপনি r.js অপ্টিমাইজার ব্যবহার করে আপনার স্ক্রিপ্ট ফাইলগুলিকে একত্রিত এবং মিনিফাই করতে পারেন। টার্মিনাল বা কমান্ড প্রম্পট থেকে নিচের কমান্ড রান করুন:
node r.js -o build.js
এটি build.js কনফিগারেশন ফাইল অনুসারে স্ক্রিপ্ট ফাইলগুলিকে মিনিফাই এবং একত্রিত করবে এবং আউটপুট হিসেবে dist/main.min.js ফাইল তৈরি করবে।
5. Multiple File Bundling:
Multiple File Bundling এর মাধ্যমে আপনি একাধিক স্ক্রিপ্ট ফাইলকে একত্রিত করতে পারেন, যেমন:
// build.js (Multiple File Bundling Example)
({
baseUrl: 'js',
name: 'main',
out: 'dist/bundle.js',
include: ['module1', 'module2', 'module3'], // Multiple modules to be bundled
optimize: 'uglify2',
paths: {
'module1': 'modules/module1',
'module2': 'modules/module2',
'module3': 'modules/module3'
}
})
এখানে, module1.js, module2.js, এবং module3.js একত্রিত হবে এবং একটি নতুন ফাইল dist/bundle.js এ সংরক্ষণ হবে।
6. Concatenation:
Concatenation হচ্ছে একাধিক ফাইলকে এক ফাইলে যোগ করা। এটি bundling এরই অংশ, যেখানে একাধিক স্ক্রিপ্ট ফাইল একটি ফাইলে একত্রিত করা হয়। r.js স্বয়ংক্রিয়ভাবে এটি করবে, যখন আপনি include অপশনে একাধিক মডিউল উল্লেখ করবেন।
সারসংক্ষেপ:
r.js Optimizer-এর মাধ্যমে Multiple File Bundling এবং Concatenation একটি সহজ ও কার্যকর উপায়, যার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের স্ক্রিপ্ট ফাইলগুলোকে একটি একক ফাইলে একত্রিত এবং মিনিফাই করতে পারেন। এটি স্ক্রিপ্ট লোডিংয়ের সংখ্যা কমিয়ে দেয়, যার ফলে ওয়েব পেজের লোডিং টাইম দ্রুত হয় এবং পারফরম্যান্স উন্নত হয়।
Read more
