কোড বিভাজন সহ জাভাস্ক্রিপ্ট পেলোড হ্রাস করুন

Houssein Djirdeh

Jeremy Wagner

কেউ অপেক্ষা করতে পছন্দ করে না। একটি ওয়েবসাইট লোড হতে 3 সেকেন্ডের বেশি সময় লাগলে 50% এরও বেশি ব্যবহারকারী ওয়েবসাইট পরিত্যাগ করে ।

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

কেন কোড বিভাজন উপকারী?

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

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

আপনার ওয়েবসাইটের আর্কিটেকচারের উপর নির্ভর করে-বিশেষ করে যদি আপনার ওয়েবসাইট ক্লায়েন্ট-সাইড রেন্ডারিং-এর উপর খুব বেশি নির্ভর করে-মার্কআপ রেন্ডার করার জন্য দায়ী জাভাস্ক্রিপ্ট পেলোডের আকার হ্রাস করা হলে তা উন্নত বৃহৎ কন্টেন্টফুল পেইন্ট (LCP) বার হতে পারে। এটি ঘটতে পারে যখন ক্লায়েন্ট-সাইড মার্কআপ সম্পূর্ণ না হওয়া পর্যন্ত ব্রাউজার দ্বারা LCP সংস্থান আবিষ্কার হতে দেরি হয়, বা যখন প্রধান থ্রেড সেই LCP উপাদানটি রেন্ডার করতে খুব ব্যস্ত থাকে। উভয় পরিস্থিতিতেই পৃষ্ঠার জন্য LCP সময় বিলম্বিত হতে পারে।

পরিমাপ

বাতিঘর একটি ব্যর্থ অডিট প্রদর্শন করে যখন একটি পৃষ্ঠায় সমস্ত জাভাস্ক্রিপ্ট চালানোর জন্য উল্লেখযোগ্য পরিমাণ সময় নেওয়া হয়।

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

ওয়েবপ্যাক , পার্সেল এবং রোলআপের মতো জনপ্রিয় মডিউল বান্ডলারগুলি আপনাকে গতিশীল আমদানি ব্যবহার করে আপনার বান্ডেলগুলিকে বিভক্ত করার অনুমতি দেয়৷ উদাহরণস্বরূপ, নিম্নলিখিত কোড স্নিপেটটি বিবেচনা করুন যা 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 কীভাবে আপনাকে এটি করতে সাহায্য করতে পারে সে সম্পর্কে আপনি আরও পড়তে পারেন।

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