কেউই অপেক্ষা করতে পছন্দ করে না। কোনো ওয়েবসাইট লোড হতে ৩ সেকেন্ডের বেশি সময় লাগলে ৫০ শতাংশেরও বেশি ব্যবহারকারী তা ছেড়ে চলে যায় ।
বড় আকারের জাভাস্ক্রিপ্ট পেলোড পাঠানো আপনার সাইটের গতিকে উল্লেখযোগ্যভাবে প্রভাবিত করে। আপনার অ্যাপ্লিকেশনের প্রথম পৃষ্ঠা লোড হওয়ার সাথে সাথেই ব্যবহারকারীর কাছে সমস্ত জাভাস্ক্রিপ্ট পাঠানোর পরিবর্তে, আপনার বান্ডেলটিকে একাধিক অংশে বিভক্ত করুন এবং একেবারে শুরুতে কেবল প্রয়োজনীয় অংশটুকুই পাঠান।
কোড স্প্লিটিং কেন উপকারী?
কোড স্প্লিটিং হলো এমন একটি কৌশল যার লক্ষ্য হলো স্টার্টআপ টাইম কমানো। স্টার্টআপের সময় কম জাভাস্ক্রিপ্ট ব্যবহার করে, আমরা এই গুরুত্বপূর্ণ সময়ে মেইন থ্রেডের কাজ কমিয়ে অ্যাপ্লিকেশনগুলোকে আরও দ্রুত ইন্টারেক্টিভ করতে পারি।
কোর ওয়েব ভাইটালস-এর ক্ষেত্রে, স্টার্টআপের সময় ডাউনলোড হওয়া জাভাস্ক্রিপ্ট পেলোড কমালে তা ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) টাইম উন্নত করতে সাহায্য করে। এর পেছনের কারণ হলো, মেইন থ্রেডকে মুক্ত করার মাধ্যমে জাভাস্ক্রিপ্ট পার্স, কম্পাইল এবং এক্সিকিউশন-সম্পর্কিত স্টার্টআপ খরচ কমে যাওয়ায় অ্যাপ্লিকেশনটি ব্যবহারকারীর ইনপুটে আরও দ্রুত সাড়া দিতে পারে।
আপনার ওয়েবসাইটের আর্কিটেকচারের উপর নির্ভর করে—বিশেষ করে যদি আপনার ওয়েবসাইট ক্লায়েন্ট-সাইড রেন্ডারিংয়ের উপর ব্যাপকভাবে নির্ভরশীল হয়—মার্কআপ রেন্ডার করার জন্য দায়ী জাভাস্ক্রিপ্ট পেলোডের আকার কমালে লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP) টাইম উন্নত হতে পারে। এটি তখন ঘটতে পারে যখন ক্লায়েন্ট-সাইড মার্কআপ সম্পূর্ণ হওয়ার পর ব্রাউজার LCP রিসোর্সটি খুঁজে পেতে দেরি করে , অথবা যখন প্রধান থ্রেডটি সেই LCP এলিমেন্টটি রেন্ডার করার জন্য খুব বেশি ব্যস্ত থাকে। উভয় পরিস্থিতিই পেজটির LCP টাইমকে বিলম্বিত করতে পারে।
পরিমাপ
কোনো পৃষ্ঠার সমস্ত জাভাস্ক্রিপ্ট কার্যকর করতে উল্লেখযোগ্য পরিমাণ সময় লাগলে লাইটহাউস একটি ব্যর্থ নিরীক্ষা প্রদর্শন করে।
ব্যবহারকারী যখন কোনো অ্যাপ্লিকেশন লোড করে, তখন শুধুমাত্র প্রাথমিক রুটের জন্য প্রয়োজনীয় কোড পাঠানোর জন্য জাভাস্ক্রিপ্ট বান্ডেলটি বিভক্ত করুন। এর ফলে পার্স এবং কম্পাইল করার জন্য প্রয়োজনীয় স্ক্রিপ্টের পরিমাণ কমে যায়, যার ফলস্বরূপ পেজ দ্রুত লোড হয়।
webpack , Parcel , এবং Rollup-এর মতো জনপ্রিয় মডিউল বান্ডলারগুলো আপনাকে ডাইনামিক ইম্পোর্ট ব্যবহার করে আপনার বান্ডলগুলো ভাগ করার সুযোগ দেয়। উদাহরণস্বরূপ, নিচের কোড স্নিপেটটি দেখুন, যেখানে একটি someFunction মেথডের উদাহরণ দেখানো হয়েছে, যা কোনো ফর্ম সাবমিট করা হলে ফায়ার হয়।
import moduleA from "library";
form.addEventListener("submit", e => {
e.preventDefault();
someFunction();
});
const someFunction = () => {
// uses moduleA
}
এখানে, someFunction একটি নির্দিষ্ট লাইব্রেরি থেকে ইম্পোর্ট করা একটি মডিউল ব্যবহার করে। যদি এই মডিউলটি অন্য কোথাও ব্যবহৃত না হয়, তবে কোড ব্লকটি পরিবর্তন করে একটি ডাইনামিক ইম্পোর্ট ব্যবহার করা যেতে পারে, যাতে এটি শুধুমাত্র ব্যবহারকারীর ফর্ম সাবমিট করার সময়ই ফেচ করা হয়।
form.addEventListener("submit", e => {
e.preventDefault();
import('library.moduleA')
.then(module => module.default) // using the default export
.then(() => someFunction())
.catch(handleError());
});
const someFunction = () => {
// uses moduleA
}
মডিউলটি যে কোড দিয়ে গঠিত, তা প্রাথমিক বান্ডেলে অন্তর্ভুক্ত হয় না এবং এখন লেজি লোড করা হয়, অর্থাৎ ফর্ম জমা দেওয়ার পর যখন প্রয়োজন হয়, তখনই ব্যবহারকারীকে সরবরাহ করা হয়। পেজের পারফরম্যান্স আরও উন্নত করতে, ক্রিটিক্যাল চাঙ্কগুলোকে প্রি-লোড করুন, যাতে সেগুলোকে অগ্রাধিকার দিয়ে দ্রুত ফেচ করা যায় ।
যদিও পূর্ববর্তী কোড স্নিপেটটি একটি সাধারণ উদাহরণ, বড় অ্যাপ্লিকেশনগুলিতে থার্ড-পার্টি ডিপেন্ডেন্সি লেজি লোডিং একটি প্রচলিত রীতি নয়। সাধারণত, থার্ড-পার্টি ডিপেন্ডেন্সিগুলিকে একটি পৃথক ভেন্ডর বান্ডেলে ভাগ করা হয় যা ক্যাশ করা যেতে পারে, কারণ সেগুলি ঘন ঘন আপডেট হয় না। SplitChunksPlugin কীভাবে আপনাকে এটি করতে সাহায্য করতে পারে সে সম্পর্কে আপনি আরও পড়তে পারেন।
ক্লায়েন্ট-সাইড ফ্রেমওয়ার্ক ব্যবহার করার সময়, আপনার অ্যাপ্লিকেশনের বিভিন্ন অংশ লেজি লোড করার জন্য রাউট বা কম্পোনেন্ট লেভেলে বিভাজন করা একটি সহজতর পদ্ধতি। ওয়েবপ্যাক ব্যবহারকারী অনেক জনপ্রিয় ফ্রেমওয়ার্ক অ্যাবস্ট্রাকশন প্রদান করে, যা নিজে থেকে কনফিগারেশনের গভীরে যাওয়ার চেয়ে লেজি লোডিংকে আরও সহজ করে তোলে।