কোড-বিভক্ত জাভাস্ক্রিপ্ট

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

একটি পৃষ্ঠা ডাউনলোড, পার্স এবং বড় জাভাস্ক্রিপ্ট ফাইল কম্পাইল করার সময়, এটি সময়ের জন্য অপ্রতিক্রিয়াশীল হতে পারে। পৃষ্ঠার উপাদানগুলি দৃশ্যমান, কারণ সেগুলি একটি পৃষ্ঠার প্রাথমিক HTML এর একটি অংশ এবং CSS দ্বারা স্টাইল করা হয়েছে৷ যাইহোক, যেহেতু জাভাস্ক্রিপ্টের সেই ইন্টারেক্টিভ উপাদানগুলিকে শক্তির প্রয়োজন হয়—সেইসাথে পৃষ্ঠা দ্বারা লোড করা অন্যান্য স্ক্রিপ্টগুলি-তাদের কাজ করার জন্য জাভাস্ক্রিপ্ট পার্সিং এবং এক্সিকিউট করা হতে পারে। ফলাফল হল যে ব্যবহারকারীর মনে হতে পারে যেন মিথস্ক্রিয়াটি উল্লেখযোগ্যভাবে বিলম্বিত হয়েছে, বা এমনকি সম্পূর্ণভাবে ভেঙে গেছে।

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

কোড স্প্লিটিং এর মাধ্যমে স্টার্টআপের সময় জাভাস্ক্রিপ্ট পার্সিং এবং এক্সিকিউশন হ্রাস করুন

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

তার চেয়েও বেশি, অত্যধিক জাভাস্ক্রিপ্ট এক্সিকিউশন এবং পার্সিং প্রাথমিক পৃষ্ঠা লোডের সময় বিশেষভাবে সমস্যাযুক্ত, কারণ এটি পৃষ্ঠার জীবনচক্রের বিন্দু যে ব্যবহারকারীদের পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করার সম্ভাবনা রয়েছে। প্রকৃতপক্ষে, টোটাল ব্লকিং টাইম (TBT) -একটি লোড রেসপন্সিভনেস মেট্রিক— আইএনপি- এর সাথে অত্যন্ত সম্পর্কযুক্ত , এটি পরামর্শ দেয় যে প্রাথমিক পৃষ্ঠা লোডের সময় ব্যবহারকারীদের ইন্টারঅ্যাকশনের চেষ্টা করার উচ্চ প্রবণতা রয়েছে৷

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

কোড বিভাজন একটি দরকারী কৌশল যা একটি পৃষ্ঠার প্রাথমিক জাভাস্ক্রিপ্ট পেলোড কমাতে পারে। এটি আপনাকে একটি জাভাস্ক্রিপ্ট বান্ডিলকে দুটি অংশে বিভক্ত করতে দেয়:

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

ডায়নামিক import() সিনট্যাক্স ব্যবহার করে কোড স্প্লিটিং করা যেতে পারে। এই সিনট্যাক্স - <script> উপাদানগুলির বিপরীতে যা স্টার্টআপের সময় একটি প্রদত্ত জাভাস্ক্রিপ্ট রিসোর্সকে অনুরোধ করে - পৃষ্ঠা জীবনচক্রের সময় পরবর্তী সময়ে একটি জাভাস্ক্রিপ্ট সংস্থানের জন্য একটি অনুরোধ করে৷

document.querySelectorAll('#myForm input').addEventListener('blur', async () => {
  // Get the form validation named export from the module through destructuring:
  const { validateForm } = await import('/validate-form.mjs');

  // Validate the form:
  validateForm();
}, { once: true });

পূর্ববর্তী জাভাস্ক্রিপ্ট স্নিপেটে, validate-form.mjs মডিউলটি ডাউনলোড, পার্স এবং এক্সিকিউট করা হয় শুধুমাত্র যখন একজন ব্যবহারকারী একটি ফর্মের <input> ক্ষেত্রগুলিকে অস্পষ্ট করে । এই পরিস্থিতিতে, জাভাস্ক্রিপ্ট রিসোর্সটি ফর্মের বৈধতা লজিক চালনার জন্য দায়ী শুধুমাত্র তখনই পৃষ্ঠার সাথে জড়িত থাকে যখন এটি বাস্তবে ব্যবহৃত হওয়ার সম্ভাবনা বেশি থাকে।

ওয়েবপ্যাক , পার্সেল , রোলআপ , এবং esbuild এর মত JavaScript বান্ডলারগুলিকে জাভাস্ক্রিপ্ট বান্ডেলগুলিকে ছোট খণ্ডে বিভক্ত করার জন্য কনফিগার করা যেতে পারে যখনই তারা আপনার সোর্স কোডে একটি ডায়নামিক import() কলের সম্মুখীন হয়৷ এই টুলগুলির বেশিরভাগই এটি স্বয়ংক্রিয়ভাবে করে, কিন্তু বিশেষ করে esbuild-এর জন্য আপনাকে এই অপ্টিমাইজেশানটি বেছে নিতে হবে।

কোড বিভাজনে সহায়ক নোট

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

আপনি যদি পারেন একটি বান্ডলার ব্যবহার করুন

ডেভেলপারদের ডেভেলপমেন্ট প্রক্রিয়া চলাকালীন জাভাস্ক্রিপ্ট মডিউল ব্যবহার করা সাধারণ অভ্যাস। এটি একটি চমৎকার বিকাশকারীর অভিজ্ঞতার উন্নতি যা কোড পঠনযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা উন্নত করে। যাইহোক, জাভাস্ক্রিপ্ট মডিউল উৎপাদনে শিপিং করার সময় কিছু সাবঅপ্টিমাল কর্মক্ষমতা বৈশিষ্ট্য রয়েছে।

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

বান্ডলাররা নেটওয়ার্কের মাধ্যমে প্রচুর সংখ্যক আনবান্ডেড মডিউল পাঠানোর সমস্যা এড়ায়। জাভাস্ক্রিপ্ট মডিউল ব্যবহার করে এমন আর্কিটেকচারে বড়, জটিল মডিউল ট্রি থাকে। যখন মডিউল ট্রিগুলিকে আনবান্ড করা হয়, তখন প্রতিটি মডিউল একটি পৃথক HTTP অনুরোধের প্রতিনিধিত্ব করে এবং আপনি যদি মডিউলগুলি বান্ডিল না করেন তবে আপনার ওয়েব অ্যাপে ইন্টারঅ্যাক্টিভিটি বিলম্বিত হতে পারে৷ যত তাড়াতাড়ি সম্ভব বড় মডিউল ট্রি লোড করার জন্য <link rel="modulepreload"> রিসোর্স ইঙ্গিত ব্যবহার করা সম্ভব, জাভাস্ক্রিপ্ট বান্ডেলগুলি লোডিং কর্মক্ষমতা দৃষ্টিকোণ থেকে এখনও পছন্দনীয়৷

অসাবধানতাবশত স্ট্রিমিং সংকলন অক্ষম করবেন না

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

Chromium-এ আপনার ওয়েব অ্যাপ্লিকেশনের জন্য স্ট্রিমিং সংকলন ঘটে তা নিশ্চিত করার জন্য আপনার কাছে কয়েকটি উপায় রয়েছে:

• জাভাস্ক্রিপ্ট মডিউল ব্যবহার এড়াতে আপনার প্রোডাকশন কোড রূপান্তর করুন। বান্ডলাররা আপনার জাভাস্ক্রিপ্ট সোর্স কোডকে একটি সংকলন লক্ষ্যের উপর ভিত্তি করে রূপান্তর করতে পারে এবং লক্ষ্যটি প্রায়শই একটি নির্দিষ্ট পরিবেশের জন্য নির্দিষ্ট হয়। V8 যেকোন জাভাস্ক্রিপ্ট কোডে স্ট্রিমিং সংকলন প্রয়োগ করবে যা মডিউল ব্যবহার করে না এবং আপনি আপনার জাভাস্ক্রিপ্ট মডিউল কোডটিকে একটি সিনট্যাক্সে রূপান্তর করতে আপনার বান্ডলারকে কনফিগার করতে পারেন যা জাভাস্ক্রিপ্ট মডিউল এবং তাদের বৈশিষ্ট্যগুলি ব্যবহার করে না।
• আপনি যদি জাভাস্ক্রিপ্ট মডিউল উৎপাদনে পাঠাতে চান তাহলে .mjs এক্সটেনশন ব্যবহার করুন। আপনার প্রোডাকশন জাভাস্ক্রিপ্ট মডিউল ব্যবহার করুক বা না করুক, জাভাস্ক্রিপ্টের জন্য কোন বিশেষ কন্টেন্ট টাইপ নেই যা মডিউল ব্যবহার করে বনাম জাভাস্ক্রিপ্ট যা করে না। যেখানে V8 উদ্বিগ্ন, আপনি যখন .js এক্সটেনশন ব্যবহার করে জাভাস্ক্রিপ্ট মডিউল উৎপাদনে পাঠান তখন আপনি কার্যকরভাবে স্ট্রিমিং সংকলন থেকে অপ্ট আউট করেন। আপনি যদি জাভাস্ক্রিপ্ট মডিউলের জন্য .mjs এক্সটেনশন ব্যবহার করেন, V8 নিশ্চিত করতে পারে যে মডিউল-ভিত্তিক জাভাস্ক্রিপ্ট কোডের জন্য স্ট্রিমিং সংকলন ভাঙা হয়নি।

এই বিবেচনাগুলি আপনাকে কোড বিভাজন ব্যবহার থেকে বিরত করবেন না। কোড স্প্লিটিং হল ব্যবহারকারীদের কাছে প্রাথমিক জাভাস্ক্রিপ্ট পেলোড কমানোর একটি কার্যকর উপায়, কিন্তু একটি বান্ডলার ব্যবহার করে এবং কীভাবে আপনি V8 এর স্ট্রিমিং সংকলন আচরণ সংরক্ষণ করতে পারেন তা জেনে, আপনি নিশ্চিত করতে পারেন যে আপনার উৎপাদন জাভাস্ক্রিপ্ট কোড ব্যবহারকারীদের জন্য যত দ্রুত হতে পারে।

গতিশীল আমদানি ডেমো

ওয়েবপ্যাক

SplitChunksPlugin নামের একটি প্লাগইন সহ ওয়েবপ্যাক পাঠানো হয়, যা আপনাকে কনফিগার করতে দেয় কিভাবে বান্ডলার জাভাস্ক্রিপ্ট ফাইলগুলিকে বিভক্ত করে। ওয়েবপ্যাক গতিশীল import() এবং স্ট্যাটিক import বিবৃতি উভয়কেই স্বীকৃতি দেয়। SplitChunksPlugin এর আচরণ কনফিগারেশনে chunks বিকল্প উল্লেখ করে পরিবর্তন করা যেতে পারে:

• chunks: async হল ডিফল্ট মান, এবং ডায়নামিক import() কলকে বোঝায়।
• chunks: initial স্ট্যাটিক import কল বোঝায়।
• chunks: all ডাইনামিক import() এবং স্ট্যাটিক ইম্পোর্ট উভয়কেই কভার করে, আপনাকে async এবং initial আমদানির মধ্যে অংশ ভাগ করতে দেয়৷

ডিফল্টরূপে, যখনই ওয়েবপ্যাক একটি ডায়নামিক import() স্টেটমেন্টের সম্মুখীন হয়। এটি সেই মডিউলের জন্য একটি পৃথক খণ্ড তৈরি করে:

/* main.js */

// An application-specific chunk required during the initial page load:
import myFunction from './my-function.js';

myFunction('Hello world!');

// If a specific condition is met, a separate chunk is downloaded on demand,
// rather than being bundled with the initial chunk:
if (condition) {
  // Assumes top-level await is available. More info:
  // https://v8.dev/features/top-level-await
  await import('/form-validation.js');
}

পূর্ববর্তী কোড স্নিপেটের জন্য ডিফল্ট ওয়েবপ্যাক কনফিগারেশন দুটি পৃথক অংশে পরিণত হয়:

• main.js খণ্ড—যা ওয়েবপ্যাককে initial খণ্ড হিসেবে শ্রেণীবদ্ধ করে—যাতে main.js এবং ./my-function.js মডিউল অন্তর্ভুক্ত রয়েছে।
• async খণ্ড, যা শুধুমাত্র form-validation.js অন্তর্ভুক্ত করে (যদি কনফিগার করা থাকে তবে সম্পদের নামে একটি ফাইল হ্যাশ রয়েছে)। এই অংশটি শুধুমাত্র ডাউনলোড করা হয় যদি এবং যখন condition সত্য হয়।

এই কনফিগারেশনটি আপনাকে form-validation.js খণ্ডটি লোড করা পিছিয়ে দিতে দেয় যতক্ষণ না এটি আসলে প্রয়োজন হয়। এটি প্রাথমিক পৃষ্ঠা লোডের সময় স্ক্রিপ্ট মূল্যায়নের সময় হ্রাস করে লোড প্রতিক্রিয়াশীলতা উন্নত করতে পারে। form-validation.js খণ্ডের জন্য স্ক্রিপ্ট ডাউনলোড এবং মূল্যায়ন ঘটে যখন একটি নির্দিষ্ট শর্ত পূরণ করা হয়, এই ক্ষেত্রে, গতিশীলভাবে আমদানি করা মডিউল ডাউনলোড করা হয়। একটি উদাহরণ এমন একটি শর্ত হতে পারে যেখানে একটি পলিফিল শুধুমাত্র একটি নির্দিষ্ট ব্রাউজারের জন্য ডাউনলোড করা হয়, বা - আগের উদাহরণের মতো - ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য আমদানি করা মডিউলটি প্রয়োজনীয়৷

অন্যদিকে, খণ্ডগুলি নির্দিষ্ট করতে SplitChunksPlugin কনফিগারেশন পরিবর্তন করা chunks: initial নিশ্চিত করে যে কোড শুধুমাত্র প্রাথমিক অংশগুলিতে বিভক্ত করা হয়েছে। এগুলি হল স্থিরভাবে আমদানি করা বা ওয়েবপ্যাকের entry প্রপার্টিতে তালিকাভুক্ত। পূর্ববর্তী উদাহরণের দিকে তাকালে, ফলস্বরূপ অংশটি একটি একক স্ক্রিপ্ট ফাইলে form-validation.js এবং main.js এর সংমিশ্রণ হবে, যার ফলে প্রাথমিক পৃষ্ঠা লোডের কার্যকারিতা আরও খারাপ হবে।

SplitChunksPlugin এর বিকল্পগুলিও বড় স্ক্রিপ্টগুলিকে একাধিক ছোট স্ক্রিপ্টে আলাদা করার জন্য কনফিগার করা যেতে পারে-উদাহরণস্বরূপ, maxSize দ্বারা নির্দিষ্ট করা সীমা ছাড়িয়ে গেলে ওয়েবপ্যাককে খণ্ডগুলিকে আলাদা ফাইলে ভাগ করতে নির্দেশ দেওয়ার জন্য maxSize বিকল্পটি ব্যবহার করে। বড় স্ক্রিপ্ট ফাইলগুলিকে ছোট ফাইলে বিভক্ত করা লোড প্রতিক্রিয়াশীলতাকে উন্নত করতে পারে , কারণ কিছু ক্ষেত্রে সিপিইউ-নিবিড় স্ক্রিপ্ট মূল্যায়ন কাজকে ছোট ছোট কাজগুলিতে ভাগ করা হয়, যা দীর্ঘ সময়ের জন্য মূল থ্রেডটিকে ব্লক করার সম্ভাবনা কম।

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

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

ওয়েবপ্যাক ডেমো

ওয়েবপ্যাক SplitChunksPlugin ডেমো ।

আপনার জ্ঞান পরীক্ষা করুন

পরবর্তী: অলস লোড চিত্র এবং <iframe> উপাদান

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