স্ক্রিপ্ট মূল্যায়ন এবং দীর্ঘ কাজ

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

Jeremy Wagner

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

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

স্ক্রিপ্ট মূল্যায়ন কি?

আপনি যদি এমন একটি অ্যাপ্লিকেশন প্রোফাইল করে থাকেন যা প্রচুর জাভাস্ক্রিপ্ট পাঠায়, আপনি হয়ত দীর্ঘ কাজ দেখে থাকবেন যেখানে অপরাধীকে মূল্যায়ন স্ক্রিপ্ট লেবেল করা হয়েছে।

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

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

স্ক্রিপ্ট এবং তাদের মূল্যায়ন করে এমন কাজের মধ্যে সম্পর্ক

স্ক্রিপ্ট মূল্যায়নের জন্য দায়ী কাজগুলি কীভাবে শুরু করা হয় তা নির্ভর করে আপনি যে স্ক্রিপ্টটি লোড করছেন সেটি একটি সাধারণ <script> উপাদান দিয়ে লোড করা হয়েছে কিনা বা স্ক্রিপ্টটি type=module দিয়ে লোড করা একটি মডিউল কিনা। যেহেতু ব্রাউজারগুলিতে জিনিসগুলিকে ভিন্নভাবে পরিচালনা করার প্রবণতা রয়েছে, তাই প্রধান ব্রাউজার ইঞ্জিনগুলি কীভাবে স্ক্রিপ্ট মূল্যায়ন পরিচালনা করে যেখানে তাদের জুড়ে স্ক্রিপ্ট মূল্যায়নের আচরণগুলি পরিবর্তিত হয় তার উপর স্পর্শ করা হবে।

<script> উপাদান দিয়ে লোড করা স্ক্রিপ্ট

স্ক্রিপ্ট মূল্যায়ন করার জন্য পাঠানো কাজের সংখ্যার সাধারণত একটি পৃষ্ঠায় <script> উপাদানের সংখ্যার সাথে সরাসরি সম্পর্ক থাকে। প্রতিটি <script> উপাদান অনুরোধ করা স্ক্রিপ্ট মূল্যায়ন করার জন্য একটি কাজ শুরু করে যাতে এটি পার্স করা, কম্পাইল করা এবং কার্যকর করা যায়। এটি ক্রোমিয়াম-ভিত্তিক ব্রাউজার, সাফারি এবং ফায়ারফক্সের ক্ষেত্রে।

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

আপনি জাভাস্ক্রিপ্টের বড় অংশ লোড করা এড়িয়ে স্ক্রিপ্ট মূল্যায়নের কাজটি ভেঙে ফেলতে পারেন এবং অতিরিক্ত <script> উপাদান ব্যবহার করে আরও পৃথক, ছোট স্ক্রিপ্ট লোড করতে পারেন।

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

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

<script> উপাদান এবং type=module বৈশিষ্ট্য সহ স্ক্রিপ্ট লোড করা হয়

<script> এলিমেন্টে type=module অ্যাট্রিবিউট দিয়ে ব্রাউজারে নেটিভলি ES মডিউল লোড করা এখন সম্ভব। স্ক্রিপ্ট লোড করার এই পদ্ধতিটি কিছু বিকাশকারীর অভিজ্ঞতার সুবিধা বহন করে, যেমন উত্পাদন ব্যবহারের জন্য কোড রূপান্তর করতে হবে না—বিশেষ করে যখন আমদানি মানচিত্রের সাথে একত্রে ব্যবহার করা হয়। যাইহোক, এইভাবে স্ক্রিপ্ট লোড করা কাজগুলিকে সময়সূচী করে যা ব্রাউজার থেকে ব্রাউজারে আলাদা।

ক্রোমিয়াম-ভিত্তিক ব্রাউজার

Chrome-এর মতো ব্রাউজারে—বা এটি থেকে উদ্ভূত— type=module অ্যাট্রিবিউট ব্যবহার করে ইএস মডিউল লোড করার ফলে আপনি সাধারণত type=module ব্যবহার না করার সময় দেখতে পাওয়ার চেয়ে বিভিন্ন ধরণের কাজ তৈরি করে। উদাহরণস্বরূপ, প্রতিটি মডিউল স্ক্রিপ্টের জন্য একটি টাস্ক চালানো হবে যাতে কম্পাইল মডিউল হিসাবে লেবেল করা কার্যকলাপ জড়িত থাকে।

একবার মডিউলগুলি কম্পাইল হয়ে গেলে, যেকোন কোড যা পরবর্তীতে তাদের মধ্যে চলে তা মূল্যায়ন মডিউল হিসাবে লেবেলযুক্ত কার্যকলাপ শুরু করবে।

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

• সমস্ত মডিউল কোড স্বয়ংক্রিয়ভাবে কঠোর মোডে চালিত হয়, যা জাভাস্ক্রিপ্ট ইঞ্জিনগুলির দ্বারা সম্ভাব্য অপ্টিমাইজেশনের অনুমতি দেয় যা অন্যথায় একটি অ-কঠোর প্রসঙ্গে তৈরি করা যায় না।
• type=module ব্যবহার করে লোড করা স্ক্রিপ্টগুলিকে এমনভাবে ধরা হয় যেন সেগুলি ডিফল্টরূপে স্থগিত করা হয়েছে । এই আচরণ পরিবর্তন করতে type=module সহ লোড করা স্ক্রিপ্টগুলিতে async বৈশিষ্ট্য ব্যবহার করা সম্ভব।

সাফারি এবং ফায়ারফক্স

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

গতিশীল import()

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

INP উন্নত করার ক্ষেত্রে ডায়নামিক import() দুটি সুবিধা রয়েছে:

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

ডায়নামিক import() কলগুলি সমস্ত প্রধান ব্রাউজার ইঞ্জিনে একই রকম আচরণ করে: স্ক্রিপ্ট মূল্যায়নের কাজগুলি যেগুলির ফলস্বরূপ গতিশীলভাবে আমদানি করা মডিউলগুলির পরিমাণের সমান হবে৷

ওয়েব ওয়ার্কারে স্ক্রিপ্ট লোড করা হয়েছে

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

মূল থ্রেডের কাজ কমানোর পাশাপাশি, ওয়েব কর্মীরা নিজেরাই কর্মী প্রসঙ্গে ব্যবহার করার জন্য বহিরাগত স্ক্রিপ্ট লোড করতে পারে, হয় importScripts বা ব্রাউজারে স্ট্যাটিক import স্টেটমেন্টের মাধ্যমে যা মডিউল কর্মীদের সমর্থন করে। ফলাফল হল যে কোনও ওয়েব কর্মী দ্বারা অনুরোধ করা কোনও স্ক্রিপ্ট মূল থ্রেড থেকে মূল্যায়ন করা হয়।

বাণিজ্য বন্ধ এবং বিবেচনা

আপনার স্ক্রিপ্টগুলিকে আলাদা করে ভাগ করার সময়, ছোট ফাইলগুলি কম, অনেক বড় ফাইল লোড করার বিপরীতে দীর্ঘ কাজগুলিকে সীমিত করতে সহায়তা করে, স্ক্রিপ্টগুলি কীভাবে ভাঙতে হবে তা সিদ্ধান্ত নেওয়ার সময় কিছু জিনিস বিবেচনা করা গুরুত্বপূর্ণ।

কম্প্রেশন দক্ষতা

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

আপনার ওয়েবসাইট যে স্ক্রিপ্টগুলির উপর নির্ভর করে তার আউটপুট আকার পরিচালনা করার জন্য বান্ডলারগুলি হল আদর্শ সরঞ্জাম:

• যেখানে ওয়েবপ্যাক উদ্বিগ্ন, তার SplitChunksPlugin প্লাগইন সাহায্য করতে পারে। সম্পদের আকার পরিচালনা করতে আপনি যে বিকল্পগুলি সেট করতে পারেন তার জন্য SplitChunksPlugin ডকুমেন্টেশনের সাথে পরামর্শ করুন৷
• Rollup এবং esbuild-এর মতো অন্যান্য বান্ডলারের জন্য, আপনি আপনার কোডে ডায়নামিক import() কল ব্যবহার করে স্ক্রিপ্ট ফাইলের আকার পরিচালনা করতে পারেন। এই বান্ডলারগুলি — সেইসাথে ওয়েবপ্যাক — স্বয়ংক্রিয়ভাবে গতিশীলভাবে আমদানি করা সম্পদকে তার নিজস্ব ফাইলে ভেঙে ফেলবে, এইভাবে বড় প্রাথমিক বান্ডেল আকারগুলি এড়িয়ে যাবে৷

ক্যাশে অবৈধতা

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

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

নেস্টেড মডিউল এবং লোডিং কর্মক্ষমতা

আপনি যদি উৎপাদনে ES মডিউল শিপিং করেন এবং type=module অ্যাট্রিবিউট দিয়ে লোড করেন, তাহলে মডিউল নেস্টিং কীভাবে শুরুর সময়কে প্রভাবিত করতে পারে সে সম্পর্কে আপনাকে সচেতন হতে হবে। মডিউল নেস্টিং বলতে বোঝায় যখন একটি ES মডিউল স্থিতিশীলভাবে অন্য ES মডিউল আমদানি করে যা স্ট্যাটিকভাবে অন্য ES মডিউল আমদানি করে:

// a.js
import {b} from './b.js';

// b.js
import {c} from './c.js';

যদি আপনার ES মডিউলগুলি একসাথে বান্ডিল না করা হয়, তাহলে পূর্ববর্তী কোডটি একটি নেটওয়ার্ক অনুরোধের শৃঙ্খলে পরিণত হয়: যখন একটি <script> উপাদান থেকে a.js অনুরোধ করা হয়, তখন b.js এর জন্য অন্য একটি নেটওয়ার্ক অনুরোধ পাঠানো হয়, যার পরে c.js জন্য আরেকটি অনুরোধ অন্তর্ভুক্ত থাকে। এটি এড়ানোর একটি উপায় হল একটি বান্ডলার ব্যবহার করা—কিন্তু আপনি স্ক্রিপ্ট মূল্যায়নের কাজটি ছড়িয়ে দেওয়ার জন্য স্ক্রিপ্টগুলি ভাঙতে আপনার বান্ডলারকে কনফিগার করছেন তা নিশ্চিত করুন।

আপনি যদি একটি বান্ডলার ব্যবহার করতে না চান, তাহলে নেস্টেড মডিউল কলগুলির কাছাকাছি যাওয়ার আরেকটি উপায় হল modulepreload রিসোর্স হিন্ট ব্যবহার করা, যা নেটওয়ার্ক অনুরোধের চেইন এড়াতে সময়ের আগে ES মডিউলগুলিকে প্রিলোড করবে।

উপসংহার

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

রিক্যাপ করার জন্য, এখানে কিছু জিনিস রয়েছে যা আপনি বড় স্ক্রিপ্ট মূল্যায়নের কাজগুলি ভেঙে দিতে পারেন:

• type=module অ্যাট্রিবিউট ছাড়া <script> উপাদান ব্যবহার করে স্ক্রিপ্ট লোড করার সময়, খুব বড় স্ক্রিপ্টগুলি লোড করা এড়িয়ে চলুন, কারণ এটি মূল থ্রেডকে ব্লক করে এমন রিসোর্স-ইনটেনসিভ স্ক্রিপ্ট মূল্যায়ন কাজ বন্ধ করে দেবে। এই কাজটি ভাঙতে আপনার স্ক্রিপ্টগুলিকে আরও <script> উপাদানগুলিতে ছড়িয়ে দিন।
• ব্রাউজারে স্থানীয়ভাবে ES মডিউলগুলি লোড করার জন্য type=module অ্যাট্রিবিউট ব্যবহার করে প্রতিটি পৃথক মডিউল স্ক্রিপ্টের মূল্যায়নের জন্য পৃথক কাজগুলি শুরু করবে।
• ডায়নামিক import() কল ব্যবহার করে আপনার প্রাথমিক বান্ডেলের আকার কমিয়ে দিন। এটি বান্ডলারগুলিতেও কাজ করে, কারণ বান্ডলাররা প্রতিটি গতিশীলভাবে আমদানি করা মডিউলকে "বিভক্ত পয়েন্ট" হিসাবে বিবেচনা করবে, যার ফলে প্রতিটি গতিশীলভাবে আমদানি করা মডিউলের জন্য একটি পৃথক স্ক্রিপ্ট তৈরি করা হবে।
• কম্প্রেশন দক্ষতা এবং ক্যাশে অবৈধকরণের মতো ট্রেড-অফগুলি ওজন করতে ভুলবেন না। বৃহত্তর স্ক্রিপ্টগুলি আরও ভালভাবে সংকুচিত করবে, তবে কম কাজে বেশি ব্যয়বহুল স্ক্রিপ্ট মূল্যায়নের কাজ জড়িত হওয়ার সম্ভাবনা বেশি, এবং ফলস্বরূপ ব্রাউজার ক্যাশে অবৈধ হয়ে যায়, যা সামগ্রিকভাবে কম ক্যাশিং দক্ষতার দিকে পরিচালিত করে।
• যদি ES মডিউলগুলিকে বান্ডলিং ছাড়াই স্থানীয়ভাবে ব্যবহার করা হয়, তাহলে স্টার্টআপের সময় তাদের লোডিং অপ্টিমাইজ করতে modulepreload রিসোর্স ইঙ্গিতটি ব্যবহার করুন।
• বরাবরের মতো, যতটা সম্ভব কম জাভাস্ক্রিপ্ট পাঠান।

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

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

Jeremy Wagner

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

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

স্ক্রিপ্ট মূল্যায়ন কি?

আপনি যদি এমন একটি অ্যাপ্লিকেশন প্রোফাইল করে থাকেন যা প্রচুর জাভাস্ক্রিপ্ট পাঠায়, আপনি হয়ত দীর্ঘ কাজ দেখে থাকবেন যেখানে অপরাধীকে মূল্যায়ন স্ক্রিপ্ট লেবেল করা হয়েছে।

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

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

স্ক্রিপ্ট এবং তাদের মূল্যায়ন করে এমন কাজের মধ্যে সম্পর্ক

স্ক্রিপ্ট মূল্যায়নের জন্য দায়ী কাজগুলি কীভাবে শুরু করা হয় তা নির্ভর করে আপনি যে স্ক্রিপ্টটি লোড করছেন সেটি একটি সাধারণ <script> উপাদান দিয়ে লোড করা হয়েছে কিনা বা স্ক্রিপ্টটি type=module দিয়ে লোড করা একটি মডিউল কিনা। যেহেতু ব্রাউজারগুলিতে জিনিসগুলিকে ভিন্নভাবে পরিচালনা করার প্রবণতা রয়েছে, তাই প্রধান ব্রাউজার ইঞ্জিনগুলি কীভাবে স্ক্রিপ্ট মূল্যায়ন পরিচালনা করে যেখানে তাদের জুড়ে স্ক্রিপ্ট মূল্যায়নের আচরণগুলি পরিবর্তিত হয় তার উপর স্পর্শ করা হবে।

<script> উপাদান দিয়ে লোড করা স্ক্রিপ্ট

স্ক্রিপ্ট মূল্যায়ন করার জন্য পাঠানো কাজের সংখ্যার সাধারণত একটি পৃষ্ঠায় <script> উপাদানের সংখ্যার সাথে সরাসরি সম্পর্ক থাকে। প্রতিটি <script> উপাদান অনুরোধ করা স্ক্রিপ্ট মূল্যায়ন করার জন্য একটি কাজ শুরু করে যাতে এটি পার্স করা, কম্পাইল করা এবং কার্যকর করা যায়। এটি ক্রোমিয়াম-ভিত্তিক ব্রাউজার, সাফারি এবং ফায়ারফক্সের ক্ষেত্রে।

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

আপনি জাভাস্ক্রিপ্টের বড় অংশ লোড করা এড়িয়ে স্ক্রিপ্ট মূল্যায়নের কাজটি ভেঙে ফেলতে পারেন এবং অতিরিক্ত <script> উপাদান ব্যবহার করে আরও পৃথক, ছোট স্ক্রিপ্ট লোড করতে পারেন।

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

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

<script> উপাদান এবং type=module বৈশিষ্ট্য সহ স্ক্রিপ্ট লোড করা হয়

<script> এলিমেন্টে type=module অ্যাট্রিবিউট দিয়ে ব্রাউজারে নেটিভলি ES মডিউল লোড করা এখন সম্ভব। স্ক্রিপ্ট লোড করার এই পদ্ধতিটি কিছু বিকাশকারীর অভিজ্ঞতার সুবিধা বহন করে, যেমন উত্পাদন ব্যবহারের জন্য কোড রূপান্তর করতে হবে না—বিশেষ করে যখন আমদানি মানচিত্রের সাথে একত্রে ব্যবহার করা হয়। যাইহোক, এইভাবে স্ক্রিপ্ট লোড করা কাজগুলিকে সময়সূচী করে যা ব্রাউজার থেকে ব্রাউজারে আলাদা।

ক্রোমিয়াম-ভিত্তিক ব্রাউজার

Chrome-এর মতো ব্রাউজারে—বা এটি থেকে উদ্ভূত— type=module অ্যাট্রিবিউট ব্যবহার করে ইএস মডিউল লোড করার ফলে আপনি সাধারণত type=module ব্যবহার না করার সময় দেখতে পাওয়ার চেয়ে বিভিন্ন ধরণের কাজ তৈরি করে। উদাহরণস্বরূপ, প্রতিটি মডিউল স্ক্রিপ্টের জন্য একটি টাস্ক চালানো হবে যাতে কম্পাইল মডিউল হিসাবে লেবেল করা কার্যকলাপ জড়িত থাকে।

একবার মডিউলগুলি কম্পাইল হয়ে গেলে, যেকোন কোড যা পরবর্তীতে তাদের মধ্যে চলে তা মূল্যায়ন মডিউল হিসাবে লেবেলযুক্ত কার্যকলাপ শুরু করবে।

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

• সমস্ত মডিউল কোড স্বয়ংক্রিয়ভাবে কঠোর মোডে চালিত হয়, যা জাভাস্ক্রিপ্ট ইঞ্জিনগুলির দ্বারা সম্ভাব্য অপ্টিমাইজেশনের অনুমতি দেয় যা অন্যথায় একটি অ-কঠোর প্রসঙ্গে তৈরি করা যায় না।
• type=module ব্যবহার করে লোড করা স্ক্রিপ্টগুলিকে এমনভাবে ধরা হয় যেন সেগুলি ডিফল্টরূপে স্থগিত করা হয়েছে । এই আচরণ পরিবর্তন করতে type=module সহ লোড করা স্ক্রিপ্টগুলিতে async বৈশিষ্ট্য ব্যবহার করা সম্ভব।

সাফারি এবং ফায়ারফক্স

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

গতিশীল import()

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

INP উন্নত করার ক্ষেত্রে ডায়নামিক import() দুটি সুবিধা রয়েছে:

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

ডায়নামিক import() কলগুলি সমস্ত প্রধান ব্রাউজার ইঞ্জিনে একই রকম আচরণ করে: স্ক্রিপ্ট মূল্যায়নের কাজগুলি যেগুলির ফলস্বরূপ গতিশীলভাবে আমদানি করা মডিউলগুলির পরিমাণের সমান হবে৷

ওয়েব ওয়ার্কারে স্ক্রিপ্ট লোড করা হয়েছে

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

মূল থ্রেডের কাজ কমানোর পাশাপাশি, ওয়েব কর্মীরা নিজেরাই কর্মী প্রসঙ্গে ব্যবহার করার জন্য বহিরাগত স্ক্রিপ্ট লোড করতে পারে, হয় importScripts বা ব্রাউজারে স্ট্যাটিক import স্টেটমেন্টের মাধ্যমে যা মডিউল কর্মীদের সমর্থন করে। ফলাফল হল যে কোনও ওয়েব কর্মী দ্বারা অনুরোধ করা কোনও স্ক্রিপ্ট মূল থ্রেড থেকে মূল্যায়ন করা হয়।

বাণিজ্য বন্ধ এবং বিবেচনা

আপনার স্ক্রিপ্টগুলিকে আলাদা করে ভাগ করার সময়, ছোট ফাইলগুলি কম, অনেক বড় ফাইল লোড করার বিপরীতে দীর্ঘ কাজগুলিকে সীমিত করতে সহায়তা করে, স্ক্রিপ্টগুলি কীভাবে ভাঙতে হবে তা সিদ্ধান্ত নেওয়ার সময় কিছু জিনিস বিবেচনা করা গুরুত্বপূর্ণ।

কম্প্রেশন দক্ষতা

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

আপনার ওয়েবসাইট যে স্ক্রিপ্টগুলির উপর নির্ভর করে তার আউটপুট আকার পরিচালনা করার জন্য বান্ডলারগুলি হল আদর্শ সরঞ্জাম:

• যেখানে ওয়েবপ্যাক উদ্বিগ্ন, তার SplitChunksPlugin প্লাগইন সাহায্য করতে পারে। সম্পদের আকার পরিচালনা করতে আপনি যে বিকল্পগুলি সেট করতে পারেন তার জন্য SplitChunksPlugin ডকুমেন্টেশনের সাথে পরামর্শ করুন৷
• Rollup এবং esbuild-এর মতো অন্যান্য বান্ডলারের জন্য, আপনি আপনার কোডে ডায়নামিক import() কল ব্যবহার করে স্ক্রিপ্ট ফাইলের আকার পরিচালনা করতে পারেন। এই বান্ডলারগুলি — সেইসাথে ওয়েবপ্যাক — স্বয়ংক্রিয়ভাবে গতিশীলভাবে আমদানি করা সম্পদকে তার নিজস্ব ফাইলে ভেঙে ফেলবে, এইভাবে বড় প্রাথমিক বান্ডেল আকারগুলি এড়িয়ে যাবে৷

ক্যাশে অবৈধতা

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

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

নেস্টেড মডিউল এবং লোডিং কর্মক্ষমতা

আপনি যদি উৎপাদনে ES মডিউল শিপিং করেন এবং type=module অ্যাট্রিবিউট দিয়ে লোড করেন, তাহলে মডিউল নেস্টিং কীভাবে শুরুর সময়কে প্রভাবিত করতে পারে সে সম্পর্কে আপনাকে সচেতন হতে হবে। মডিউল নেস্টিং বলতে বোঝায় যখন একটি ES মডিউল স্থিতিশীলভাবে অন্য ES মডিউল আমদানি করে যা স্ট্যাটিকভাবে অন্য ES মডিউল আমদানি করে:

// a.js
import {b} from './b.js';

// b.js
import {c} from './c.js';

যদি আপনার ES মডিউলগুলি একসাথে বান্ডিল না করা হয়, তাহলে পূর্ববর্তী কোডটি একটি নেটওয়ার্ক অনুরোধের শৃঙ্খলে পরিণত হয়: যখন একটি <script> উপাদান থেকে a.js অনুরোধ করা হয়, তখন b.js এর জন্য অন্য একটি নেটওয়ার্ক অনুরোধ পাঠানো হয়, যার পরে c.js জন্য আরেকটি অনুরোধ অন্তর্ভুক্ত থাকে। এটি এড়ানোর একটি উপায় হল একটি বান্ডলার ব্যবহার করা—কিন্তু আপনি স্ক্রিপ্ট মূল্যায়নের কাজটি ছড়িয়ে দেওয়ার জন্য স্ক্রিপ্টগুলি ভাঙতে আপনার বান্ডলারকে কনফিগার করছেন তা নিশ্চিত করুন।

আপনি যদি একটি বান্ডলার ব্যবহার করতে না চান, তাহলে নেস্টেড মডিউল কলগুলির কাছাকাছি যাওয়ার আরেকটি উপায় হল modulepreload রিসোর্স হিন্ট ব্যবহার করা, যা নেটওয়ার্ক অনুরোধের চেইন এড়াতে সময়ের আগে ES মডিউলগুলিকে প্রিলোড করবে।

উপসংহার

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

রিক্যাপ করার জন্য, এখানে কিছু জিনিস রয়েছে যা আপনি বড় স্ক্রিপ্ট মূল্যায়নের কাজগুলি ভেঙে দিতে পারেন:

• type=module অ্যাট্রিবিউট ছাড়াই <script> উপাদান ব্যবহার করে স্ক্রিপ্টগুলি লোড করার সময়, খুব বড় যে স্ক্রিপ্টগুলি লোড করা এড়িয়ে চলুন, কারণ এগুলি মূল থ্রেডকে অবরুদ্ধ করে এমন রিসোর্স-নিবিড় স্ক্রিপ্ট মূল্যায়ন কার্যগুলি বন্ধ করে দেবে। এই কাজটি ভেঙে ফেলার জন্য আপনার স্ক্রিপ্টগুলি আরও <script> উপাদানগুলিতে ছড়িয়ে দিন।
• ব্রাউজারে স্থানীয়ভাবে ইএস মডিউলগুলি লোড করতে type=module বৈশিষ্ট্যটি ব্যবহার করা প্রতিটি পৃথক মডিউল স্ক্রিপ্টের জন্য মূল্যায়নের জন্য পৃথক কাজগুলি বন্ধ করে দেবে।
• গতিশীল import() কলগুলি ব্যবহার করে আপনার প্রাথমিক বান্ডিলগুলির আকার হ্রাস করুন। এটি বান্ডলারগুলিতেও কাজ করে, কারণ বান্ডলাররা প্রতিটি গতিশীলভাবে আমদানিকৃত মডিউলটিকে "স্প্লিট পয়েন্ট" হিসাবে বিবেচনা করবে, ফলস্বরূপ প্রতিটি গতিশীলভাবে আমদানি করা মডিউলটির জন্য একটি পৃথক স্ক্রিপ্ট উত্পন্ন হবে।
• সংকোচনের দক্ষতা এবং ক্যাশে অবৈধতার মতো বাণিজ্য-অফগুলি ওজন করতে ভুলবেন না। বৃহত্তর স্ক্রিপ্টগুলি আরও ভালভাবে সংকুচিত হবে, তবে কম কাজে আরও ব্যয়বহুল স্ক্রিপ্ট মূল্যায়নের কাজ জড়িত হওয়ার সম্ভাবনা বেশি রয়েছে এবং ফলস্বরূপ ব্রাউজার ক্যাশে অবৈধতার ফলস্বরূপ, সামগ্রিক নিম্ন ক্যাশে দক্ষতার দিকে পরিচালিত করে।
• যদি বান্ডিলিং ছাড়াই স্থানীয়ভাবে ইএস মডিউলগুলি ব্যবহার করা হয় তবে স্টার্টআপের সময় তাদের লোডিংটি অনুকূল করতে modulepreload রিসোর্স ইঙ্গিতটি ব্যবহার করুন।
• সর্বদা হিসাবে, যতটা সম্ভব ছোট জাভাস্ক্রিপ্ট শিপ করুন।

এটি নিশ্চিতভাবে একটি ভারসাম্যপূর্ণ কাজ - তবে স্ক্রিপ্টগুলি ভাঙার মাধ্যমে এবং গতিশীল import() দিয়ে প্রাথমিক পে -লোডগুলি হ্রাস করে আপনি আরও ভাল স্টার্টআপ পারফরম্যান্স অর্জন করতে পারেন এবং সেই গুরুত্বপূর্ণ স্টার্টআপ সময়কালে ব্যবহারকারীর মিথস্ক্রিয়াকে আরও ভালভাবে সামঞ্জস্য করতে পারেন। এটি আপনাকে আইএনপি মেট্রিকটিতে আরও ভাল স্কোর করতে সহায়তা করবে, এইভাবে আরও ভাল ব্যবহারকারীর অভিজ্ঞতা সরবরাহ করে।

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

Jeremy Wagner

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

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

স্ক্রিপ্ট মূল্যায়ন কী?

যদি আপনি এমন কোনও অ্যাপ্লিকেশনটির প্রোফাইল করেছেন যা প্রচুর জাভাস্ক্রিপ্ট প্রেরণ করে তবে আপনি দীর্ঘ কাজগুলি দেখতে পেয়েছেন যেখানে অপরাধীকে মূল্যায়ন স্ক্রিপ্ট লেবেলযুক্ত রয়েছে।

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

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

স্ক্রিপ্ট এবং তাদের মূল্যায়নকারী কাজের মধ্যে সম্পর্ক

স্ক্রিপ্ট মূল্যায়নের জন্য দায়ী কাজগুলি কীভাবে লাথি মেরে ফেলা হয় তা নির্ভর করে যে আপনি যে স্ক্রিপ্টটি লোড করছেন তা কোনও সাধারণ <script> উপাদান দিয়ে লোড করা হয়েছে কিনা তার উপর নির্ভর করে বা স্ক্রিপ্টটি যদি type=module দিয়ে লোডযুক্ত একটি মডিউল হয়। যেহেতু ব্রাউজারগুলিতে জিনিসগুলি আলাদাভাবে পরিচালনা করার প্রবণতা রয়েছে, তাই বড় ব্রাউজার ইঞ্জিনগুলি কীভাবে স্ক্রিপ্ট মূল্যায়ন পরিচালনা করে সেখানে স্ক্রিপ্ট মূল্যায়ন আচরণগুলি পৃথক হয়।

স্ক্রিপ্টগুলি <script> উপাদান দিয়ে লোড

স্ক্রিপ্টগুলি মূল্যায়নের জন্য প্রেরণ করা কার্যগুলির সংখ্যা সাধারণত কোনও পৃষ্ঠায় <script> উপাদানগুলির সংখ্যার সাথে সরাসরি সম্পর্ক থাকে। প্রতিটি <script> উপাদান অনুরোধ করা স্ক্রিপ্টটি মূল্যায়নের জন্য কোনও কাজ বন্ধ করে দেয় যাতে এটি পার্সড, সংকলিত এবং সম্পাদন করা যায়। এটি ক্রোমিয়াম ভিত্তিক ব্রাউজার, সাফারি এবং ফায়ারফক্সের ক্ষেত্রে।

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

আপনি জাভাস্ক্রিপ্টের বৃহত অংশগুলি লোড করে এড়িয়ে স্ক্রিপ্ট মূল্যায়নের কাজটি ভেঙে ফেলতে পারেন এবং অতিরিক্ত <script> উপাদানগুলি ব্যবহার করে আরও স্বতন্ত্র, ছোট স্ক্রিপ্টগুলি লোড করতে পারেন।

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

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

স্ক্রিপ্টগুলি <script> উপাদান এবং type=module বৈশিষ্ট্য সহ লোড

<script> উপাদানটিতে type=module বৈশিষ্ট্য সহ ব্রাউজারে ইএস মডিউলগুলি স্থানীয়ভাবে লোড করা এখন সম্ভব। স্ক্রিপ্ট লোডিংয়ের এই পদ্ধতির কিছু বিকাশকারী অভিজ্ঞতার সুবিধা বহন করে, যেমন উত্পাদন ব্যবহারের জন্য কোড রূপান্তর না করা - বিশেষত যখন আমদানি মানচিত্রের সাথে একত্রে ব্যবহৃত হয়। যাইহোক, এইভাবে স্ক্রিপ্টগুলি লোড করা ব্রাউজার থেকে ব্রাউজারে পৃথক হওয়া কার্যগুলি সময়সূচী করে।

ক্রোমিয়াম-ভিত্তিক ব্রাউজার

ক্রোম - বা এ type=module প্রাপ্ত type=module explote উদাহরণস্বরূপ, প্রতিটি মডিউল স্ক্রিপ্টের জন্য একটি কাজ চলবে যা সংকলন মডিউল হিসাবে লেবেলযুক্ত ক্রিয়াকলাপ জড়িত।

মডিউলগুলি একবার সংকলিত হয়ে গেলে, পরবর্তীকালে যে কোনও কোড চালানো হয় তা মূল্যায়ন মডিউল হিসাবে লেবেলযুক্ত ক্রিয়াকলাপ বন্ধ করে দেবে।

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

• সমস্ত মডিউল কোডটি স্বয়ংক্রিয়ভাবে কঠোর মোডে চালিত হয়, যা জাভাস্ক্রিপ্ট ইঞ্জিনগুলির দ্বারা সম্ভাব্য অপ্টিমাইজেশনের অনুমতি দেয় যা অন্যথায় কোনও কঠোর প্রসঙ্গে তৈরি করা যায় না।
• type=module ব্যবহার করে লোড করা স্ক্রিপ্টগুলি এমনভাবে চিকিত্সা করা হয় যেন সেগুলি ডিফল্টরূপে স্থগিত করা হয়। এই আচরণটি পরিবর্তন করতে type=module সহ লোড করা স্ক্রিপ্টগুলিতে async অ্যাট্রিবিউটটি ব্যবহার করা সম্ভব।

সাফারি এবং ফায়ারফক্স

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

গতিশীল import()

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

আইএনপি উন্নত করার ক্ষেত্রে গতিশীল import() দুটি সুবিধা রয়েছে:

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

ডায়নামিক import() কলগুলি সমস্ত বড় ব্রাউজার ইঞ্জিনগুলিতে একইভাবে আচরণ করে: স্ক্রিপ্ট মূল্যায়ন কার্যগুলি যে ফলাফলগুলি গতিশীলভাবে আমদানি করা মডিউলগুলির পরিমাণের সমান হবে।

স্ক্রিপ্টগুলি একটি ওয়েব কর্মীর মধ্যে লোড হয়েছে

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

মূল থ্রেডের কাজ হ্রাস করার পাশাপাশি, ওয়েব কর্মীরা নিজেরাই শ্রমিক প্রসঙ্গে ব্যবহার করার জন্য বাহ্যিক স্ক্রিপ্টগুলি লোড করতে পারেন, হয় importScripts বা মডিউল কর্মীদের সমর্থন করে এমন ব্রাউজারগুলিতে স্ট্যাটিক import বিবরণের মাধ্যমে। ফলাফলটি হ'ল কোনও ওয়েব কর্মীর দ্বারা অনুরোধ করা কোনও স্ক্রিপ্টটি মূল থ্রেড থেকে মূল্যায়ন করা হয়।

ট্রেড-অফ এবং বিবেচনা

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

কম্প্রেশন দক্ষতা

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

আপনার ওয়েবসাইটের উপর নির্ভর করে স্ক্রিপ্টগুলির জন্য আউটপুট আকার পরিচালনার জন্য বান্ডলারগুলি আদর্শ সরঞ্জাম:

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

ক্যাশে অবৈধতা

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

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

নেস্টেড মডিউল এবং লোডিং পারফরম্যান্স

আপনি যদি উত্পাদনে ইএস মডিউলগুলি শিপিং করেন এবং type=module অ্যাট্রিবিউট দিয়ে সেগুলি লোড করছেন তবে মডিউল নেস্টিং কীভাবে স্টার্টআপের সময়কে প্রভাবিত করতে পারে সে সম্পর্কে আপনাকে সচেতন হওয়া দরকার। মডিউল নেস্টিং বোঝায় যখন কোনও ইএস মডিউলটি স্ট্যাটিকভাবে অন্য একটি ইএস মডিউল আমদানি করে যা স্ট্যাটিকভাবে অন্য একটি ইএস মডিউল আমদানি করে:

// a.js
import {b} from './b.js';

// b.js
import {c} from './c.js';

যদি আপনার ইএস মডিউলগুলি একসাথে বান্ডিল না করা হয়, তবে পূর্ববর্তী কোডটির ফলাফল একটি নেটওয়ার্ক অনুরোধ চেইনে ফলাফল: যখন a.js <script> উপাদান থেকে অনুরোধ করা হয়, তখন অন্য নেটওয়ার্ক অনুরোধ b.js জন্য প্রেরণ করা হয়, যা পরে c.js জন্য অন্য অনুরোধ জড়িত। এটি এড়ানোর একটি উপায় হ'ল একটি বান্ডিলার ব্যবহার করা - তবে নিশ্চিত হন যে আপনি স্ক্রিপ্টগুলি স্ক্রিপ্টগুলি ভেঙে স্ক্রিপ্ট মূল্যায়নের কাজটি ছড়িয়ে দেওয়ার জন্য কনফিগার করছেন।

আপনি যদি কোনও বান্ডিলার ব্যবহার করতে না চান, তবে নেস্টেড মডিউল কলগুলির কাছাকাছি যাওয়ার আরেকটি উপায় হ'ল modulepreload রিসোর্স ইঙ্গিতটি ব্যবহার করা, যা নেটওয়ার্ক রিকোয়েস্ট চেইনগুলি এড়াতে সময়ের আগে ইএস মডিউলগুলি প্রিলোড করবে।

উপসংহার

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

পুনরুদ্ধার করার জন্য, বড় স্ক্রিপ্ট মূল্যায়নের কাজগুলি ভেঙে ফেলার জন্য এখানে কিছু জিনিস আপনি করতে পারেন:

• type=module অ্যাট্রিবিউট ছাড়াই <script> উপাদান ব্যবহার করে স্ক্রিপ্টগুলি লোড করার সময়, খুব বড় যে স্ক্রিপ্টগুলি লোড করা এড়িয়ে চলুন, কারণ এগুলি মূল থ্রেডকে অবরুদ্ধ করে এমন রিসোর্স-নিবিড় স্ক্রিপ্ট মূল্যায়ন কার্যগুলি বন্ধ করে দেবে। এই কাজটি ভেঙে ফেলার জন্য আপনার স্ক্রিপ্টগুলি আরও <script> উপাদানগুলিতে ছড়িয়ে দিন।
• ব্রাউজারে স্থানীয়ভাবে ইএস মডিউলগুলি লোড করতে type=module বৈশিষ্ট্যটি ব্যবহার করা প্রতিটি পৃথক মডিউল স্ক্রিপ্টের জন্য মূল্যায়নের জন্য পৃথক কাজগুলি বন্ধ করে দেবে।
• গতিশীল import() কলগুলি ব্যবহার করে আপনার প্রাথমিক বান্ডিলগুলির আকার হ্রাস করুন। এটি বান্ডলারগুলিতেও কাজ করে, কারণ বান্ডলাররা প্রতিটি গতিশীলভাবে আমদানিকৃত মডিউলটিকে "স্প্লিট পয়েন্ট" হিসাবে বিবেচনা করবে, ফলস্বরূপ প্রতিটি গতিশীলভাবে আমদানি করা মডিউলটির জন্য একটি পৃথক স্ক্রিপ্ট উত্পন্ন হবে।
• সংকোচনের দক্ষতা এবং ক্যাশে অবৈধতার মতো বাণিজ্য-অফগুলি ওজন করতে ভুলবেন না। বৃহত্তর স্ক্রিপ্টগুলি আরও ভালভাবে সংকুচিত হবে, তবে কম কাজে আরও ব্যয়বহুল স্ক্রিপ্ট মূল্যায়নের কাজ জড়িত হওয়ার সম্ভাবনা বেশি রয়েছে এবং ফলস্বরূপ ব্রাউজার ক্যাশে অবৈধতার ফলস্বরূপ, সামগ্রিক নিম্ন ক্যাশে দক্ষতার দিকে পরিচালিত করে।
• যদি বান্ডিলিং ছাড়াই স্থানীয়ভাবে ইএস মডিউলগুলি ব্যবহার করা হয় তবে স্টার্টআপের সময় তাদের লোডিংটি অনুকূল করতে modulepreload রিসোর্স ইঙ্গিতটি ব্যবহার করুন।
• সর্বদা হিসাবে, যতটা সম্ভব ছোট জাভাস্ক্রিপ্ট শিপ করুন।

এটি নিশ্চিতভাবে একটি ভারসাম্যপূর্ণ কাজ - তবে স্ক্রিপ্টগুলি ভাঙার মাধ্যমে এবং গতিশীল import() দিয়ে প্রাথমিক পে -লোডগুলি হ্রাস করে আপনি আরও ভাল স্টার্টআপ পারফরম্যান্স অর্জন করতে পারেন এবং সেই গুরুত্বপূর্ণ স্টার্টআপ সময়কালে ব্যবহারকারীর মিথস্ক্রিয়াকে আরও ভালভাবে সামঞ্জস্য করতে পারেন। এটি আপনাকে আইএনপি মেট্রিকটিতে আরও ভাল স্কোর করতে সহায়তা করবে, এইভাবে আরও ভাল ব্যবহারকারীর অভিজ্ঞতা সরবরাহ করে।

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

Jeremy Wagner

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

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

স্ক্রিপ্ট মূল্যায়ন কী?

যদি আপনি এমন কোনও অ্যাপ্লিকেশনটির প্রোফাইল করেছেন যা প্রচুর জাভাস্ক্রিপ্ট প্রেরণ করে তবে আপনি দীর্ঘ কাজগুলি দেখতে পেয়েছেন যেখানে অপরাধীকে মূল্যায়ন স্ক্রিপ্ট লেবেলযুক্ত রয়েছে।

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

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

স্ক্রিপ্ট এবং তাদের মূল্যায়নকারী কাজের মধ্যে সম্পর্ক

স্ক্রিপ্ট মূল্যায়নের জন্য দায়ী কাজগুলি কীভাবে লাথি মেরে ফেলা হয় তা নির্ভর করে যে আপনি যে স্ক্রিপ্টটি লোড করছেন তা কোনও সাধারণ <script> উপাদান দিয়ে লোড করা হয়েছে কিনা তার উপর নির্ভর করে বা স্ক্রিপ্টটি যদি type=module দিয়ে লোডযুক্ত একটি মডিউল হয়। যেহেতু ব্রাউজারগুলিতে জিনিসগুলি আলাদাভাবে পরিচালনা করার প্রবণতা রয়েছে, তাই বড় ব্রাউজার ইঞ্জিনগুলি কীভাবে স্ক্রিপ্ট মূল্যায়ন পরিচালনা করে সেখানে স্ক্রিপ্ট মূল্যায়ন আচরণগুলি পৃথক হয়।

স্ক্রিপ্টগুলি <script> উপাদান দিয়ে লোড

স্ক্রিপ্টগুলি মূল্যায়নের জন্য প্রেরণ করা কার্যগুলির সংখ্যা সাধারণত কোনও পৃষ্ঠায় <script> উপাদানগুলির সংখ্যার সাথে সরাসরি সম্পর্ক থাকে। প্রতিটি <script> উপাদান অনুরোধ করা স্ক্রিপ্টটি মূল্যায়নের জন্য কোনও কাজ বন্ধ করে দেয় যাতে এটি পার্সড, সংকলিত এবং সম্পাদন করা যায়। এটি ক্রোমিয়াম ভিত্তিক ব্রাউজার, সাফারি এবং ফায়ারফক্সের ক্ষেত্রে।

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

আপনি জাভাস্ক্রিপ্টের বৃহত অংশগুলি লোড করে এড়িয়ে স্ক্রিপ্ট মূল্যায়নের কাজটি ভেঙে ফেলতে পারেন এবং অতিরিক্ত <script> উপাদানগুলি ব্যবহার করে আরও স্বতন্ত্র, ছোট স্ক্রিপ্টগুলি লোড করতে পারেন।

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

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

স্ক্রিপ্টগুলি <script> উপাদান এবং type=module বৈশিষ্ট্য সহ লোড

<script> উপাদানটিতে type=module বৈশিষ্ট্য সহ ব্রাউজারে ইএস মডিউলগুলি স্থানীয়ভাবে লোড করা এখন সম্ভব। স্ক্রিপ্ট লোডিংয়ের এই পদ্ধতির কিছু বিকাশকারী অভিজ্ঞতার সুবিধা বহন করে, যেমন উত্পাদন ব্যবহারের জন্য কোড রূপান্তর না করা - বিশেষত যখন আমদানি মানচিত্রের সাথে একত্রে ব্যবহৃত হয়। যাইহোক, এইভাবে স্ক্রিপ্টগুলি লোড করা ব্রাউজার থেকে ব্রাউজারে পৃথক হওয়া কার্যগুলি সময়সূচী করে।

ক্রোমিয়াম-ভিত্তিক ব্রাউজার

ক্রোম - বা এ type=module প্রাপ্ত type=module explote উদাহরণস্বরূপ, প্রতিটি মডিউল স্ক্রিপ্টের জন্য একটি কাজ চলবে যা সংকলন মডিউল হিসাবে লেবেলযুক্ত ক্রিয়াকলাপ জড়িত।

মডিউলগুলি একবার সংকলিত হয়ে গেলে, পরবর্তীকালে যে কোনও কোড চালানো হয় তা মূল্যায়ন মডিউল হিসাবে লেবেলযুক্ত ক্রিয়াকলাপ বন্ধ করে দেবে।

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

• সমস্ত মডিউল কোডটি স্বয়ংক্রিয়ভাবে কঠোর মোডে চালিত হয়, যা জাভাস্ক্রিপ্ট ইঞ্জিনগুলির দ্বারা সম্ভাব্য অপ্টিমাইজেশনের অনুমতি দেয় যা অন্যথায় কোনও কঠোর প্রসঙ্গে তৈরি করা যায় না।
• type=module ব্যবহার করে লোড করা স্ক্রিপ্টগুলি এমনভাবে চিকিত্সা করা হয় যেন সেগুলি ডিফল্টরূপে স্থগিত করা হয়। এই আচরণটি পরিবর্তন করতে type=module সহ লোড করা স্ক্রিপ্টগুলিতে async অ্যাট্রিবিউটটি ব্যবহার করা সম্ভব।

সাফারি এবং ফায়ারফক্স

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

গতিশীল import()

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

আইএনপি উন্নত করার ক্ষেত্রে গতিশীল import() দুটি সুবিধা রয়েছে:

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

ডায়নামিক import() কলগুলি সমস্ত বড় ব্রাউজার ইঞ্জিনগুলিতে একইভাবে আচরণ করে: স্ক্রিপ্ট মূল্যায়ন কার্যগুলি যে ফলাফলগুলি গতিশীলভাবে আমদানি করা মডিউলগুলির পরিমাণের সমান হবে।

স্ক্রিপ্টগুলি একটি ওয়েব কর্মীর মধ্যে লোড হয়েছে

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

মূল থ্রেডের কাজ হ্রাস করার পাশাপাশি, ওয়েব কর্মীরা নিজেরাই শ্রমিক প্রসঙ্গে ব্যবহার করার জন্য বাহ্যিক স্ক্রিপ্টগুলি লোড করতে পারেন, হয় importScripts বা মডিউল কর্মীদের সমর্থন করে এমন ব্রাউজারগুলিতে স্ট্যাটিক import বিবরণের মাধ্যমে। ফলাফলটি হ'ল কোনও ওয়েব কর্মীর দ্বারা অনুরোধ করা কোনও স্ক্রিপ্টটি মূল থ্রেড থেকে মূল্যায়ন করা হয়।

ট্রেড-অফ এবং বিবেচনা

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

কম্প্রেশন দক্ষতা

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

আপনার ওয়েবসাইটের উপর নির্ভর করে স্ক্রিপ্টগুলির জন্য আউটপুট আকার পরিচালনার জন্য বান্ডলারগুলি আদর্শ সরঞ্জাম:

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

ক্যাশে অবৈধতা

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

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

নেস্টেড মডিউল এবং লোডিং পারফরম্যান্স

If you're shipping ES modules in production and loading them with the type=module attribute, you need to be aware of how module nesting can impact startup time. Module nesting refers to when an ES module statically imports another ES module that statically imports another ES module:

// a.js
import {b} from './b.js';

// b.js
import {c} from './c.js';

If your ES modules are not bundled together, the preceding code results in a network request chain: when a.js is requested from a <script> element, another network request is dispatched for b.js , which then involves another request for c.js . One way to avoid this is to use a bundler—but be sure you're configuring your bundler to break up scripts to spread out script evaluation work.

If you don't want to use a bundler, then another way to get around nested module calls is to use the modulepreload resource hint , which will preload ES modules ahead of time to avoid network request chains.

উপসংহার

Optimizing evaluation of scripts in the browser is no doubt a tricky feat. The approach depends on your website's requirements and constraints. However, by splitting up scripts, you're spreading the work of script evaluation over numerous smaller tasks, and therefore giving the main thread the ability to handle user interactions more efficiently, rather than blocking the main thread.

To recap, here are some things you can to do to break up large script evaluation tasks:

• When loading scripts using the <script> element without the type=module attribute, avoid loading scripts that are very large, as these will kick off resource-intensive script evaluation tasks that block the main thread. Spread out your scripts over more <script> elements to break up this work.
• Using the type=module attribute to load ES modules natively in the browser will kick off individual tasks for evaluation for each separate module script.
• Reduce the size of your initial bundles by using dynamic import() calls. This also works in bundlers, as bundlers will treat each dynamically imported module as a "split point," resulting in a separate script being generated for each dynamically imported module.
• Be sure to weigh trade-offs such as compression efficiency and cache invalidation. Larger scripts will compress better, but are more likely to involve more expensive script evaluation work in fewer tasks, and result in browser cache invalidation, leading to overall lower caching efficiency.
• If using ES modules natively without bundling, use the modulepreload resource hint to optimize the loading of them during startup.
• As always, ship as little JavaScript as possible.

It's a balancing act for sure—but by breaking up scripts and reducing initial payloads with dynamic import() , you can achieve better startup performance and better accommodate user interactions during that crucial startup period. This should help you score better on the INP metric, thus delivering a better user experience.