প্রিলোড মডিউল

Sérgio Gomes
X

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

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

<link rel="preload"> হল ঘোষণামূলকভাবে রিসোর্সগুলিকে সময়ের আগে অনুরোধ করার একটি উপায়, ব্রাউজারের প্রয়োজনের আগে।

<head>
  <link rel="preload" as="style" href="critical-styles.css">
  <link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">
</head>

ব্রাউজার সমর্থন

  • ক্রোম: 50।
  • প্রান্ত: ≤79।
  • ফায়ারফক্স: 85।
  • সাফারি: 11.1।

উৎস

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

<link rel="preload"> এবং এর এইচটিটিপি হেডার সমতুল্য একটি সহজ, ঘোষণামূলক উপায় প্রদান করে ব্রাউজারকে সরাসরি গুরুত্বপূর্ণ ফাইলগুলি সম্পর্কে জানাতে যা বর্তমান নেভিগেশনের অংশ হিসাবে প্রয়োজন হবে৷ যখন ব্রাউজারটি প্রিলোড দেখে, তখন এটি রিসোর্সের জন্য একটি উচ্চ অগ্রাধিকার ডাউনলোড শুরু করে, যাতে প্রকৃতপক্ষে এটির প্রয়োজনে এটি ইতিমধ্যেই আনা হয় বা আংশিকভাবে সেখানে থাকে। যাইহোক, এটি মডিউলগুলির জন্য কাজ করে না।

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

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

উপরন্তু, ফাইল আনা আসলে কোড চালানোর প্রথম ধাপ। প্রথমত, ব্রাউজারকে পার্স এবং কম্পাইল করতে হবে। আদর্শভাবে, এটি সময়ের আগেও হওয়া উচিত, যাতে মডিউলটির প্রয়োজন হলে, কোডটি চালানোর জন্য প্রস্তুত হয়। যাইহোক, V8 (Chrome-এর JavaScript ইঞ্জিন) অন্যান্য জাভাস্ক্রিপ্ট থেকে আলাদাভাবে মডিউল পার্স ও কম্পাইল করে। <link rel="preload"> ফাইলটি যে একটি মডিউল লোড হচ্ছে তা নির্দেশ করার কোনো উপায় প্রদান করে না, তাই ব্রাউজার যা করতে পারে তা হল ফাইলটি লোড করা এবং ক্যাশে রাখা৷ একবার <script type="module"> ট্যাগ ব্যবহার করে স্ক্রিপ্টটি লোড হয়ে গেলে (অথবা এটি অন্য মডিউল দ্বারা লোড করা হয়), ব্রাউজারটি জাভাস্ক্রিপ্ট মডিউল হিসাবে কোডটিকে পার্স করে এবং কম্পাইল করে।

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

<head>
  <link rel="modulepreload" href="super-critical-stuff.mjs">
</head>
[...]
<script type="module" src="super-critical-stuff.mjs">

এবং যেহেতু ব্রাউজার এখন জানে যে আপনি যা প্রিলোড করছেন তা একটি মডিউল, এটি চালানোর চেষ্টা না করা পর্যন্ত অপেক্ষা করার পরিবর্তে এটি স্মার্ট এবং পার্স করতে পারে এবং মডিউলটি আনার সাথে সাথে কম্পাইল করতে পারে।

ব্রাউজার সমর্থন

  • ক্রোম: 66।
  • প্রান্ত: ≤79।
  • ফায়ারফক্স: 115।
  • সাফারি: 17।

উৎস

কিন্তু মডিউল 'নির্ভরতা সম্পর্কে কি?

মজার আপনি জিজ্ঞাসা করা উচিত! সত্যিই এমন কিছু আছে যা এই নিবন্ধটি কভার করেনি: পুনরাবৃত্তি।

<link rel="modulepreload"> স্পেক আসলে ঐচ্ছিকভাবে শুধুমাত্র অনুরোধ করা মডিউল নয়, এর সমস্ত নির্ভরতা ট্রিও লোড করার অনুমতি দেয়। ব্রাউজারদের এটি করতে হবে না, তবে তারা করতে পারে।

সুতরাং একটি মডিউল এবং এর নির্ভরতা ট্রি প্রিলোড করার জন্য সেরা ক্রস-ব্রাউজার সমাধান কী হবে, যেহেতু অ্যাপটি চালানোর জন্য আপনার সম্পূর্ণ নির্ভরতা গাছের প্রয়োজন হবে?

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

<head>
  <!-- dog.js imports dog-head.js, which in turn imports
       dog-head-mouth.js, which imports dog-head-mouth-tongue.js. -->
  <link rel="modulepreload" href="dog-head-mouth-tongue.mjs">
  <link rel="modulepreload" href="dog-head-mouth.mjs">
  <link rel="modulepreload" href="dog-head.mjs">
  <link rel="modulepreload" href="dog.mjs">
</head>

প্রিলোডিং মডিউল কর্মক্ষমতা সাহায্য করে?

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

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