HTTP ক্যাশিং আচরণ কনফিগার করা হচ্ছে

Jeff Posnick

এই কোডল্যাবটি অনুসরণ করতে, একটি দ্বিতীয় ট্যাবে এই সমস্যাটি খুলুন।

দ্রষ্টব্য: এই কোডল্যাবটি Chrome DevTools ব্যবহার করে। আপনার কাছে আগে থেকে না থাকলে Chrome ডাউনলোড করুন ৷

এই কোডল্যাব আপনাকে দেখায় কিভাবে একটি Node.js-ভিত্তিক ওয়েব সার্ভার দ্বারা প্রত্যাবর্তিত HTTP ক্যাশিং শিরোনামগুলি পরিবর্তন করতে হয়, এক্সপ্রেস সার্ভিং ফ্রেমওয়ার্ক চালিয়ে৷ Chrome এর DevTools-এ নেটওয়ার্ক প্যানেল ব্যবহার করে আপনি যে ক্যাশিং আচরণটি আশা করছেন তা বাস্তবে প্রয়োগ করা হচ্ছে তা নিশ্চিত করবেন তাও এটি দেখাবে।

দ্রষ্টব্য: যদিও নির্দিষ্ট নির্দেশাবলী এক্সপ্রেসের জন্য তৈরি করা হয়েছে, সঠিক ক্যাশিং শিরোনামগুলি বেছে নেওয়ার বিষয়ে সাধারণ নীতিগুলি যে কোনও ওয়েব সার্ভার পরিবেশে প্রযোজ্য।

নমুনা প্রকল্পের সাথে পরিচিত হন

নমুনা প্রকল্পে আপনি যে মূল ফাইলগুলির সাথে কাজ করবেন সেগুলি হল:

• server.js এ Node.js কোড থাকে যা ওয়েব অ্যাপের বিষয়বস্তু পরিবেশন করে। এটি HTTP অনুরোধ এবং প্রতিক্রিয়া পরিচালনা করতে এক্সপ্রেস ব্যবহার করে। বিশেষ করে, express.static() পাবলিক ডিরেক্টরির সমস্ত স্থানীয় ফাইল পরিবেশন করতে ব্যবহৃত হয়, তাই serve-static ডকুমেন্টেশন কাজে আসবে।
• public/index.html হল ওয়েব অ্যাপের HTML। বেশিরভাগ এইচটিএমএল ফাইলের মতো, এটির URL এর অংশ হিসাবে এটিতে কোনো সংস্করণ তথ্য থাকে না।
• public/app.15261a07.js এবং public/style.391484cf.css হল ওয়েব অ্যাপের JavaScript এবং CSS সম্পদ। এই ফাইলগুলির প্রতিটিতে তাদের বিষয়বস্তুর সাথে মিল রেখে তাদের URL-এ একটি হ্যাশ থাকে৷ কোন নির্দিষ্ট সংস্করণের ইউআরএল লোড করতে হবে তা ট্র্যাক রাখার জন্য index.html দায়ী।

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

আমাদের HTML এর জন্য ক্যাশিং হেডার কনফিগার করুন

ভার্সনিং তথ্য নেই এমন URL-এর অনুরোধে সাড়া দেওয়ার সময়, আপনার প্রতিক্রিয়া বার্তাগুলিতে Cache-Control: no-cache যোগ করা নিশ্চিত করুন। সেই সাথে, দুটি অতিরিক্ত প্রতিক্রিয়া শিরোনামের মধ্যে একটি সেট করার সুপারিশ করা হয়: হয় Last-Modified বা ETag । index.html এই বিভাগে পড়ে। আপনি এটিকে দুটি ধাপে ভাগ করতে পারেন।

প্রথমত, Last-Modified এবং ETag হেডারগুলি etag এবং lastModified কনফিগারেশন বিকল্প দ্বারা নিয়ন্ত্রিত হয়। এই দুটি বিকল্পই প্রকৃতপক্ষে সমস্ত HTTP প্রতিক্রিয়াগুলির জন্য true হিসাবে ডিফল্ট, তাই এই বর্তমান সেটআপে, আপনাকে সেই আচরণটি পেতে অপ্ট-ইন করতে হবে না। কিন্তু আপনি যাইহোক আপনার কনফিগারেশনে স্পষ্ট হতে পারেন।

দ্বিতীয়ত, আপনাকে Cache-Control: no-cache হেডারে যোগ করতে সক্ষম হতে হবে, তবে শুধুমাত্র আপনার HTML নথির জন্য ( index.html , এই ক্ষেত্রে)। শর্তসাপেক্ষে এই শিরোনামটি সেট করার সবচেয়ে সহজ উপায় হল একটি কাস্টম setHeaders function লেখা, এবং এর মধ্যে, ইনকামিং অনুরোধটি একটি HTML নথির জন্য কিনা তা পরীক্ষা করে দেখুন৷

• প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷

server.js এ স্ট্যাটিক সার্ভিং কনফিগারেশন এভাবে শুরু হয়:

app.use(express.static('public'));

• উপরে বর্ণিত পরিবর্তনগুলি করুন, এবং আপনার এমন কিছু দিয়ে শেষ করা উচিত যা দেখতে:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

সংস্করণযুক্ত URL গুলির জন্য ক্যাশিং শিরোনামগুলি কনফিগার করুন৷

যখন " আঙ্গুলের ছাপ " বা সংস্করণ সংক্রান্ত তথ্য ধারণ করে এমন URLগুলির অনুরোধে সাড়া দেওয়ার সময়, এবং যার বিষয়বস্তুগুলি কখনই পরিবর্তন করার জন্য নয়, আপনার প্রতিক্রিয়াগুলিতে Cache-Control: max-age=31536000 যোগ করুন৷ app.15261a07.js এবং style.391484cf.css এই বিভাগে পড়ে।

শেষ ধাপে ব্যবহৃত setHeaders function তৈরি করে, আপনি একটি প্রদত্ত অনুরোধ একটি সংস্করণযুক্ত URL এর জন্য কিনা তা পরীক্ষা করতে অতিরিক্ত যুক্তি যোগ করতে পারেন এবং যদি তাই হয়, Cache-Control: max-age=31536000 হেডার৷

এটি করার সবচেয়ে মজবুত উপায় হল একটি রেগুলার এক্সপ্রেশন ব্যবহার করে দেখার জন্য যে সম্পদের অনুরোধ করা হচ্ছে সেটি একটি নির্দিষ্ট প্যাটার্নের সাথে মেলে কিনা যা আপনি জানেন যে হ্যাশগুলি পড়ে। এই নমুনা প্রকল্পের ক্ষেত্রে, এটি সর্বদা 0-9 সংখ্যার সেট থেকে আটটি অক্ষর এবং ছোট হাতের অক্ষর a–f (অর্থাৎ হেক্সাডেসিমেল অক্ষর)। হ্যাশ সবসময় একটি দ্বারা পৃথক করা হয় . উভয় দিকে চরিত্র।

একটি রেগুলার এক্সপ্রেশন যা এই সাধারণ নিয়মগুলির সাথে মেলে new RegExp('\\.[0-9a-f]{8}\\.') হিসাবে প্রকাশ করা যেতে পারে।

দ্রষ্টব্য: ভবিষ্যতের সমস্যাগুলি থেকে রক্ষা করার জন্য এই নিয়মগুলি নিয়ে আসার সময় এটি যতটা সম্ভব নির্দিষ্ট হতে সাহায্য করে। আরও সাধারণ মিল, যেমন .js বা .css ফাইল এক্সটেনশন চেক করা, আপনি যদি আপনার প্রকল্পে অতিরিক্ত, পরিবর্তনবিহীন জাভাস্ক্রিপ্ট বা CSS সম্পদ যোগ করেন তাহলে রাস্তার নিচে সমস্যা হতে পারে।

• setHeaders ফাংশন পরিবর্তন করুন যাতে এটি এইরকম দেখায়:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

DevTools ব্যবহার করে নতুন আচরণ নিশ্চিত করুন

দ্রষ্টব্য: আপনি এই কোডল্যাবের মাধ্যমে কাজ করে Chrome এর DevTools-এ নেটওয়ার্ক প্যানেলের সাথে পরিচিত হতে পারেন।

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

• সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .

• কলাম হেডারে ডান-ক্লিক করে সবচেয়ে প্রাসঙ্গিক তথ্য অন্তর্ভুক্ত করতে নেটওয়ার্ক প্যানেলে প্রদর্শিত কলামগুলি কাস্টমাইজ করুন:

এখানে, Name , Status , Cache-Control , ETag , এবং Last-Modified কলামগুলিকে মনোযোগ দিতে হবে।

• নেটওয়ার্ক প্যানেলে DevTools খোলার সাথে, পৃষ্ঠাটি রিফ্রেশ করুন।

পৃষ্ঠাটি লোড হওয়ার পরে, আপনি নেটওয়ার্ক প্যানেলে এন্ট্রিগুলি দেখতে পাবেন যা নীচের মত দেখাচ্ছে:

প্রথম সারিটি HTML নথির জন্য যা আপনি নেভিগেট করেছেন৷ এটি সঠিকভাবে Cache-Control: no-cache । সেই অনুরোধের জন্য HTTP প্রতিক্রিয়া স্থিতি হল একটি 304 । এর মানে হল যে ব্রাউজারটি ক্যাশ করা এইচটিএমএলকে অবিলম্বে ব্যবহার করতে জানত না, কিন্তু এর পরিবর্তে ওয়েব সার্ভারে একটি HTTP অনুরোধ করেছিল, Last-Modified এবং ETag তথ্য ব্যবহার করে দেখতে যে এইচটিএমএল এর কোনো আপডেট আছে কিনা তা আগে থেকেই তার ক্যাশে ছিল। . HTTP 304 প্রতিক্রিয়া নির্দেশ করে যে আপডেট করা HTML নেই।

দ্রষ্টব্য: Cache-Control: no-cache মানে "ক্যাশড কপি কখনই ব্যবহার করা হয়নি" নয়। এর মানে "সর্বদা প্রথমে সার্ভারের সাথে চেক করুন, এবং একটি HTTP 304 প্রতিক্রিয়া থাকলে ক্যাশেড কপি ব্যবহার করুন।"

পরবর্তী দুটি সারি সংস্করণযুক্ত জাভাস্ক্রিপ্ট এবং CSS সম্পদের জন্য। আপনি তাদের Cache-Control: max-age=31536000 , এবং প্রতিটির জন্য HTTP স্থিতি হল 200 । ব্যবহৃত কনফিগারেশনের কারণে, Node.js সার্ভারে কোনো প্রকৃত অনুরোধ করা হচ্ছে না, এবং এন্ট্রিতে ক্লিক করলে আপনাকে অতিরিক্ত বিবরণ দেখাবে, যার মধ্যে প্রতিক্রিয়া এসেছে "(ডিস্ক ক্যাশে থেকে)"।

ETag এবং শেষ-সংশোধিত কলামগুলির প্রকৃত মানগুলি খুব বেশি গুরুত্বপূর্ণ নয়৷ গুরুত্বপূর্ণ বিষয় হল নিশ্চিত করা যে তারা সেট করা হচ্ছে।

জিনিষ আপ সারসংক্ষেপ

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