ব্রাউজার বিক্রেতারা এবং ওয়েব পারফরম্যান্স বিশেষজ্ঞরা গত দশকের ভাল অংশে বলে আসছেন যে localStorage ধীর , এবং ওয়েব ডেভেলপারদের এটি ব্যবহার করা বন্ধ করা উচিত।
ন্যায্যভাবে বলতে গেলে, লোকেরা যা বলছে তা ভুল নয়। localStorage হল একটি সিঙ্ক্রোনাস এপিআই যা মূল থ্রেডকে ব্লক করে এবং যে কোনো সময় আপনি এটি অ্যাক্সেস করলে আপনি সম্ভাব্যভাবে আপনার পৃষ্ঠাকে ইন্টারেক্টিভ হতে বাধা দেন।
সমস্যা হল localStorage এপিআই খুব লোভনীয়ভাবে সহজ, এবং localStorage একমাত্র অসিঙ্ক্রোনাস বিকল্প হল IndexedDB , যা (আসুন এটির মুখোমুখি হওয়া যাক) এর ব্যবহার সহজ বা স্বাগত API এর জন্য পরিচিত নয়।
তাই ডেভেলপারদের ব্যবহার করা কঠিন এবং পারফরম্যান্সের জন্য খারাপ কিছুর মধ্যে একটি পছন্দ দেওয়া হয়। এবং যখন এমন লাইব্রেরি আছে যেগুলি localStorage API-এর সরলতা অফার করে যখন প্রকৃতপক্ষে হুডের নীচে অ্যাসিঙ্ক্রোনাস স্টোরেজ API ব্যবহার করে, আপনার অ্যাপের সেই লাইব্রেরিগুলির মধ্যে একটি সহ ফাইল-আকারের খরচ রয়েছে এবং এটি আপনার পারফরম্যান্স বাজেটে খেতে পারে।
কিন্তু ফাইলের আকার খরচ না করেই যদি localStorage API-এর সরলতার সাথে একটি অ্যাসিঙ্ক্রোনাস স্টোরেজ API-এর কার্যক্ষমতা পাওয়া সম্ভব হয়?
ওয়েল, শীঘ্রই হতে পারে. ক্রোম বিল্ট-ইন মডিউল নামে পরিচিত একটি নতুন বৈশিষ্ট্য নিয়ে পরীক্ষা-নিরীক্ষা করছে , এবং আমরা প্রথম যেটি পাঠানোর পরিকল্পনা করছি সেটি হল কেভি স্টোরেজ নামক একটি অ্যাসিঙ্ক্রোনাস কী/মান স্টোরেজ মডিউল৷
কিন্তু কেভি স্টোরেজ মডিউলের বিশদ বিবরণে যাওয়ার আগে, বিল্ট-ইন মডিউল বলতে আমি কী বুঝি তা ব্যাখ্যা করি।
অন্তর্নির্মিত মডিউল কি?
অন্তর্নির্মিত মডিউলগুলি সাধারণ জাভাস্ক্রিপ্ট মডিউলগুলির মতোই, ব্যতীত সেগুলি ডাউনলোড করতে হবে না কারণ সেগুলি ব্রাউজার দিয়ে পাঠানো হয়৷
প্রথাগত ওয়েব API-এর মতো, অন্তর্নির্মিত মডিউলগুলিকে অবশ্যই একটি প্রমিতকরণ প্রক্রিয়ার মধ্য দিয়ে যেতে হবে — প্রতিটির নিজস্ব স্পেসিফিকেশন থাকবে যার জন্য একটি ডিজাইন পর্যালোচনা এবং এটি পাঠানোর আগে ওয়েব ডেভেলপার এবং অন্যান্য ব্রাউজার বিক্রেতা উভয়ের কাছ থেকে সমর্থনের ইতিবাচক লক্ষণ প্রয়োজন। (Chrome-এ, বিল্ট-ইন মডিউল একই লঞ্চ প্রক্রিয়া অনুসরণ করবে যা আমরা সমস্ত নতুন API বাস্তবায়ন ও শিপ করতে ব্যবহার করি।)
প্রথাগত ওয়েব এপিআইগুলির বিপরীতে, অন্তর্নির্মিত মডিউলগুলি বিশ্বব্যাপী পরিসরে প্রকাশ করা হয় না — সেগুলি শুধুমাত্র আমদানির মাধ্যমে উপলব্ধ।
বিল্ট-ইন মডিউলগুলিকে বিশ্বব্যাপী প্রকাশ না করার অনেক সুবিধা রয়েছে: তারা একটি নতুন জাভাস্ক্রিপ্ট রানটাইম প্রসঙ্গ (যেমন একটি নতুন ট্যাব, কর্মী, বা পরিষেবা কর্মী) শুরু করার জন্য কোনও ওভারহেড যোগ করবে না এবং তারা কোনও মেমরি ব্যবহার করবে না বা CPU যদি না সেগুলি আসলে আমদানি করা হয়। উপরন্তু, তারা আপনার কোডে সংজ্ঞায়িত অন্যান্য ভেরিয়েবলের সাথে নামকরণের সংঘর্ষের ঝুঁকি চালায় না।
একটি অন্তর্নির্মিত মডিউল আমদানি করতে, আপনি উপসর্গ ব্যবহার করুন std: বিল্ট-ইন মডিউলের শনাক্তকারী দ্বারা অনুসরণ করুন। উদাহরণস্বরূপ, সমর্থিত ব্রাউজারগুলিতে , আপনি নিম্নলিখিত কোড সহ KV স্টোরেজ মডিউল আমদানি করতে পারেন ( অসমর্থিত ব্রাউজারগুলিতে কীভাবে KV স্টোরেজ পলিফিল ব্যবহার করবেন তা নীচে দেখুন):
import storage, {StorageArea} from 'std:kv-storage';
কেভি স্টোরেজ মডিউল
কেভি স্টোরেজ মডিউলটি localStorage এপিআই- এর সরলতার সাথে একই রকম, কিন্তু এর API আকৃতি আসলে একটি জাভাস্ক্রিপ্ট Map কাছাকাছি। getItem() , setItem() , এবং removeItem() এর পরিবর্তে এতে get() , set() , এবং delete() রয়েছে। এটিতে অন্যান্য মানচিত্রের মতো পদ্ধতিগুলিও রয়েছে যা localStorage এ উপলব্ধ নয়, যেমন keys() , values() , এবং entries() , এবং Map এর মত, এর কীগুলি স্ট্রিং হতে হবে না। এগুলি যে কোনও কাঠামোগত-ক্রমিক টাইপ হতে পারে।
Map বিপরীতে, সমস্ত কেভি স্টোরেজ পদ্ধতি হয় প্রতিশ্রুতি দেয় বা অ্যাসিঙ্ক পুনরাবৃত্তিকারী (যেহেতু এই মডিউলের মূল বিষয় হল যে এটি localStorage বিপরীতে সিঙ্ক্রোনাস নয়)। বিস্তারিতভাবে সম্পূর্ণ API দেখতে, আপনি স্পেসিফিকেশন উল্লেখ করতে পারেন।
আপনি উপরের কোড উদাহরণ থেকে লক্ষ্য করেছেন যে, KV স্টোরেজ মডিউলটিতে একটি ডিফল্ট রপ্তানি storage রয়েছে এবং একটি নামে এক্সপোর্ট StorageArea রয়েছে।
storage হল 'default' নামের StorageArea ক্লাসের একটি উদাহরণ, এবং ডেভেলপাররা তাদের অ্যাপ্লিকেশন কোডে এটি প্রায়শই ব্যবহার করবে। StorageArea ক্লাসটি এমন ক্ষেত্রে সরবরাহ করা হয় যেখানে অতিরিক্ত বিচ্ছিন্নতার প্রয়োজন হয় (যেমন একটি তৃতীয় পক্ষের লাইব্রেরি যা ডেটা সঞ্চয় করে এবং ডিফল্ট storage ইনস্ট্যান্সের মাধ্যমে সংরক্ষিত ডেটার সাথে দ্বন্দ্ব এড়াতে চায়)। kv-storage:${name} নামের একটি IndexedDB ডাটাবেসে StorageArea ডেটা সংরক্ষণ করা হয়, যেখানে নাম হল StorageArea উদাহরণের নাম।
আপনার কোডে KV স্টোরেজ মডিউলটি কীভাবে ব্যবহার করবেন তার একটি উদাহরণ এখানে দেওয়া হল:
import storage from 'std:kv-storage';
const main = async () => {
const oldPreferences = await storage.get('preferences');
document.querySelector('form').addEventListener('submit', async () => {
const newPreferences = Object.assign({}, oldPreferences, {
// Updated preferences go here...
});
await storage.set('preferences', newPreferences);
});
};
main();
যদি একটি ব্রাউজার একটি অন্তর্নির্মিত মডিউল সমর্থন না করে?
আপনি যদি ব্রাউজারে নেটিভ জাভাস্ক্রিপ্ট মডিউল ব্যবহার করার সাথে পরিচিত হন, আপনি সম্ভবত জানেন যে (অন্তত এখন পর্যন্ত) URL ছাড়া অন্য কিছু আমদানি করলে একটি ত্রুটি তৈরি হবে। এবং std:kv-storage একটি বৈধ URL নয়।
তাই এটি প্রশ্ন উত্থাপন করে: আমরা আমাদের কোডে এটি ব্যবহার করার আগে সমস্ত ব্রাউজার বিল্ট-ইন মডিউল সমর্থন না করা পর্যন্ত আমাদের অপেক্ষা করতে হবে? সৌভাগ্যক্রমে, উত্তর না!
আপনি প্রকৃতপক্ষে অন্তর্নির্মিত মডিউলগুলি ব্যবহার করতে পারেন যত তাড়াতাড়ি এমনকি একটি ব্রাউজার তাদের সমর্থন করে অন্য একটি বৈশিষ্ট্যের সাহায্যে ধন্যবাদ যা আমরা আমদানি মানচিত্র নিয়ে পরীক্ষা করছি ৷
মানচিত্র আমদানি করুন
আমদানি মানচিত্র মূলত একটি প্রক্রিয়া যার মাধ্যমে বিকাশকারীরা এক বা একাধিক বিকল্প শনাক্তকারীর কাছে শনাক্তকারী আমদানি করতে পারে।
এটি শক্তিশালী কারণ এটি আপনাকে পরিবর্তন করার একটি উপায় দেয় (রানটাইমে) কীভাবে একটি ব্রাউজার আপনার সমগ্র অ্যাপ্লিকেশন জুড়ে একটি নির্দিষ্ট আমদানি শনাক্তকারীর সমাধান করে।
অন্তর্নির্মিত মডিউলগুলির ক্ষেত্রে, এটি আপনাকে আপনার অ্যাপ্লিকেশন কোডে মডিউলের একটি পলিফিল উল্লেখ করতে দেয়, তবে অন্তর্নির্মিত মডিউলটিকে সমর্থন করে এমন একটি ব্রাউজার পরিবর্তে সেই সংস্করণটি লোড করতে পারে!
কেভি স্টোরেজ মডিউল দিয়ে এই কাজটি করতে আপনি কীভাবে একটি আমদানি মানচিত্র ঘোষণা করবেন তা এখানে:
<!-- The import map is inlined into your page -->
<script type="importmap">
{
"imports": {
"/path/to/kv-storage-polyfill.mjs": [
"std:kv-storage",
"/path/to/kv-storage-polyfill.mjs"
]
}
}
</script>
<!-- Then any module scripts with import statements use the above map -->
<script type="module">
import storage from '/path/to/kv-storage-polyfill.mjs';
// Use `storage` ...
</script>
উপরের কোডের মূল বিষয় হল যে URL /path/to/kv-storage-polyfill.mjs দুটি ভিন্ন সংস্থানে ম্যাপ করা হচ্ছে: std:kv-storage এবং তারপর আবার মূল URL, /path/to/kv-storage-polyfill.mjs ।
সুতরাং যখন ব্রাউজারটি সেই URL ( /path/to/kv-storage-polyfill.mjs ) উল্লেখ করে একটি আমদানি বিবৃতির সম্মুখীন হয়, তখন এটি প্রথমে std:kv-storage লোড করার চেষ্টা করে, এবং যদি এটি না পারে, তাহলে এটি লোডিংয়ে ফিরে আসে। /path/to/kv-storage-polyfill.mjs ।
আবার, এখানে যাদু হল যে ব্রাউজারটিকে এই কৌশলটি কাজ করার জন্য আমদানি মানচিত্র বা অন্তর্নির্মিত মডিউলগুলিকে সমর্থন করার দরকার নেই কারণ আমদানি বিবৃতিতে পাস করা URL হল পলিফিলের URL৷ পলিফিল আসলে একটি ফলব্যাক নয়, এটি ডিফল্ট। অন্তর্নির্মিত মডিউল একটি প্রগতিশীল বর্ধন!
মডিউল সমর্থন করে না যে ব্রাউজার সম্পর্কে কি?
শর্তসাপেক্ষে অন্তর্নির্মিত মডিউলগুলি লোড করার জন্য আমদানি মানচিত্রগুলি ব্যবহার করার জন্য, আপনাকে প্রকৃতপক্ষে import বিবৃতি ব্যবহার করতে হবে, যার মানে আপনাকে মডিউল স্ক্রিপ্টগুলি ব্যবহার করতে হবে, যেমন <script type="module"> ।
বর্তমানে, 80% এরও বেশি ব্রাউজার মডিউল সমর্থন করে , এবং যে ব্রাউজারগুলি করে না, তাদের জন্য আপনি মডিউল/নোমডিউল কৌশলটি একটি লিগ্যাসি বান্ডেল পরিবেশন করতে ব্যবহার করতে পারেন। মনে রাখবেন যে আপনার nomodule বিল্ড তৈরি করার সময়, আপনাকে সমস্ত পলিফিল অন্তর্ভুক্ত করতে হবে কারণ আপনি নিশ্চিতভাবে জানেন যে মডিউলগুলি সমর্থন করে না এমন ব্রাউজারগুলি অবশ্যই অন্তর্নির্মিত মডিউলগুলিকে সমর্থন করবে না৷
কেভি স্টোরেজ ডেমো
পুরানো ব্রাউজারগুলিকে সমর্থন করার সময় অন্তর্নির্মিত মডিউলগুলি ব্যবহার করা সম্ভব তা ব্যাখ্যা করার জন্য, আমি একটি ডেমো একসাথে রেখেছি যা উপরে বর্ণিত সমস্ত কৌশলগুলিকে একত্রিত করে এবং আজ সমস্ত ব্রাউজারে চলে:
- যে ব্রাউজারগুলি মডিউল, আমদানি মানচিত্র এবং অন্তর্নির্মিত মডিউল সমর্থন করে সেগুলি কোনও অপ্রয়োজনীয় কোড লোড করে না।
- যে ব্রাউজারগুলি মডিউল সমর্থন করে এবং মানচিত্র আমদানি করে কিন্তু বিল্ট-ইন মডিউল সমর্থন করে না কেভি স্টোরেজ পলিফিল লোড করে (ব্রাউজারের মডিউল লোডারের মাধ্যমে)।
- যে ব্রাউজারগুলি মডিউল সমর্থন করে কিন্তু আমদানি মানচিত্র সমর্থন করে না তারাও KV স্টোরেজ পলিফিল (ব্রাউজারের মডিউল লোডারের মাধ্যমে) লোড করে।
- যে ব্রাউজারগুলি মডিউলগুলিকে সমর্থন করে না তারা তাদের লিগ্যাসি বান্ডেলে KV স্টোরেজ পলিফিল পায় (
<script nomodule>এর মাধ্যমে লোড করা হয়)।
ডেমোটি গ্লিচে হোস্ট করা হয়েছে, তাই আপনি এটির উত্স দেখতে পারেন। আমার কাছে README- এ বাস্তবায়নের বিস্তারিত ব্যাখ্যাও আছে। এটি কীভাবে তৈরি হয়েছে তা দেখতে আপনি আগ্রহী হলে নির্দ্বিধায় একবার দেখে নিন।
প্রকৃতপক্ষে নেটিভ বিল্ট-ইন মডিউলটি কার্যকরভাবে দেখতে, আপনাকে ক্রোম 74 বা তার পরে পরীক্ষামূলক ওয়েব প্ল্যাটফর্মের বৈশিষ্ট্য ফ্ল্যাগ চালু করে ডেমো লোড করতে হবে ( chrome://flags/#enable-experimental-web-platform-features )।
আপনি যাচাই করতে পারেন যে বিল্ট-ইন মডিউলটি লোড হচ্ছে কারণ আপনি DevTools-এর সোর্স প্যানেলে পলিফিল স্ক্রিপ্ট দেখতে পাবেন না; পরিবর্তে, আপনি অন্তর্নির্মিত মডিউল সংস্করণটি দেখতে পাবেন (মজার ঘটনা: আপনি আসলে মডিউলের উত্স কোডটি পরিদর্শন করতে পারেন বা এতে ব্রেকপয়েন্টও রাখতে পারেন!):
আমাদের মতামত দিন
এই ভূমিকা আপনাকে অন্তর্নির্মিত মডিউলগুলির সাথে কী সম্ভব হতে পারে তার স্বাদ দেওয়া উচিত ছিল। এবং আশা করি, আপনি উত্তেজিত! আমরা সত্যিই ডেভেলপারদের KV স্টোরেজ মডিউলটি চেষ্টা করে দেখতে চাই (সেইসাথে এখানে আলোচনা করা সমস্ত নতুন বৈশিষ্ট্য) এবং আমাদের প্রতিক্রিয়া জানাতে।
এখানে GitHub লিঙ্কগুলি রয়েছে যেখানে আপনি এই নিবন্ধে উল্লিখিত প্রতিটি বৈশিষ্ট্যের জন্য আমাদের প্রতিক্রিয়া জানাতে পারেন:
যদি আপনার সাইট বর্তমানে localStorage ব্যবহার করে, তাহলে আপনার KV স্টোরেজ API এ স্যুইচ করার চেষ্টা করা উচিত যে এটি আপনার সমস্ত চাহিদা পূরণ করে কিনা। এবং আপনি যদি KV স্টোরেজ অরিজিন ট্রায়ালের জন্য সাইন আপ করেন, আপনি আসলে আজই এই বৈশিষ্ট্যগুলি স্থাপন করতে পারেন। আপনার সমস্ত ব্যবহারকারীর ভাল স্টোরেজ কর্মক্ষমতা থেকে উপকৃত হওয়া উচিত, এবং Chrome 74+ ব্যবহারকারীদের কোনো অতিরিক্ত ডাউনলোড খরচ দিতে হবে না।