جلوگیری از cache شدن پروژه

, ,

سلام ، وقت همگی بخیر

نمی دونم توی دسته بندی درستی دارم سوال می پرسم یا نه ، اگر دسته بندی درست نیست بهم بگید توی کدوم دسته قرار بدم

من روی فرانت یک پروژه کار می کنم ، توی این پروژه من از فریمورک هایی مانند آنگولار یا react یا غیره استفاده نمی کنم و قرار هم نیست استفاده بشه

از زبان ها و امکاناتی که من استفاده می کنم عبارتند از :
html, css, js, jquery , bootstrap

الان مشکل cache شدن پروژه دارم ، می خوام هر وقت توی فایلی تغییری میدم اون فایل ازنو از سرور خونده بشه

به غیر از فایل های css و js در حال حاضر مشکل cache شدن توی فایل html دارم ، خیلی ساده بگم وقتی توی فایل index.html تغییری میدم و تغییرات آپلود می کنم حتما باید clear vache کنم تا تغییرات مشاهده کنم

لطفا کمک کنید این مشکل برطرف کنم

1 Likes

سوال اول اینه که شما روی لوکال کار میکنید و بعد نتیجه‌ی مثلا دوروز کار کردنتون رو آپلود میکنید روی سرور؟
یا کلا روی سیستم لوکال خودتون هیچ سروری ندارید و مجبورید هر خطی از کد رو که تغییر میدید بفرستیدش روی سرور تا بتونید تغییرات رو ببینید؟

اگه حالت دومه، باید سیستم توسعتون رو تغییر بدید و از یه سرور لوکال استفاده کنید برای توسعه‌ی نرم‌افزار.
اگه حالت اوله و مشکلتون اینه که وقتی آپدیت جدید برای پروژه میدید، هیچ‌کدوم از یوزرها نمیتونن ببیننش چون سیستمشون ورژن قبلی رو کش کرده، اینو میشه با تغییر توی headerها، درستش کرد.

قضیه اینه که وقتی یه ریکوئستی از یه کلاینت (مثلا بروزر) به سرور زده میشه، یه سری header همراه خودش داره (مثلا بروزر میگه که از gzip پشتیبانی میکنه) و سرور هم وقتی جواب میده، یه سری header داره مثلا میگه که این فایل رو برای مدت یک هفته cache کن (و اصولا کلاینتها به این مقادیر احترام میذارن) و این header برای هر فایل میتونه تفاوت داشته باشه. مثلا برای فایلهای html بگه یک روز cache کن، برای cssها بگه یک هفته!

حالا اینکه چطوری مدت زمان این cache رو تعیین کنیم، بستگی به سرورتون داره.
توی داکیومنت موزیلا یه عالمه توضیح داده که کلا قضیه‌ی cache control چیه. با یه کم سرچ توی اینترنت، میشه به توضیحات و مثالهای بیشتری رسید.
اگه سرور شما Apache2 هست، میتونید یه فایل به نام .htaccess (اول اسمش نقطه داره. به اینجور فایلها میگن dotfile و اصولا file managerهای لینوکسی، اینا رو نشون نمیدن. یه جور hidden!) توی دایرکتوری اصلی سرور (جایی که index.html اصلی قرار میگیره) بذارید. و توش بگید چه هدرهایی برای cache، به کلاینت بفرسته. یه مثال:

<ifModule mod_headers.c>
  # 1 Day for html, xml and txt
  <filesMatch ".(html|htm|shtml|xml|txt)$">
  Header set Cache-Control "max-age=86400, public, must-revalidate"
  </filesMatch>

  # 1 Month for most static assets
  <filesMatch ".(css|js|svg|jpg|jpeg|png|gif|ico)$">
  Header set Cache-Control "max-age=2592000, public"
  </filesMatch>

  # 1 Year for fonts
  <filesMatch ".(woff|woff2|ttf|otf|eot)$">
  Header set Cache-Control "max-age=31104000, public"
  </filesMatch>
</ifModule>

اگه max-age رو روی 0 بذارید و بعدش must-revalidate بنویسید، بروزرها از cache استفاده نمیکنن.


در آخر باید بگم که اگه فقط میخواید روی سیستم خودتون نسخه‌ی آخر رو ببینید، با Ctrl+F5 صفحه رو ریفرش کنید. یا Web Developer Tools رو (توی فایرفاکس) باز کنید. زمانی که این باز باشه، از cache استفاده نمیکنه!
البته ممکنه این ویژگی به صورت پیشفرض توی تنظیماتش فعال نباشه.

1 Likes

خیلی ممنون از راهنمایتون
کار من جز حالت اول هستش

حالت اوله و مشکلتون اینه که وقتی آپدیت جدید برای پروژه میدید، هیچ‌کدوم از یوزرها نمیتونن ببیننش چون سیستمشون ورژن قبلی رو کش کرده، اینو میشه با تغییر توی headerها، درستش کرد

توی شرایط ایده آل می خوام این جوری باشه که هر فایلی تغییر می کنه از نو از سرور خوانده بشه و cache جدید روی مرورگر کاربر اتفاق بیوفته . فریمورک آنگولار اینار انجام میده

یه سری سایت ها نوشته بودن که تغییر اسم در فایل css و js بدید یا جایی که فایل ها رو صدا می زنید علامت سوال آخرش بزارید و یک عدد جدید وارد کنید مثل اینا

<link rel="stylesheet" href="references/css/common.css?version=2021-10-20">
<script type="module" src="references/js/pages/dashboard/dashboard.js?version=2021-10-20"></script>

من نمی خوام فایل هایی که تغییر نداشتن از نو از سرور خونده بشن می خوام فقط فایل های تغییر کرده از سرور خونده بشن

نمیدونم چیکار میکنه. تا حالا باهاش کار نکردم.

خب این مشکل html رو حل نمیکنه. (بروزر هم ممکنه query string‌ رو نادیده بگیره ولی اصولا بهش احترام میذارن)
درضمن، نیاز نیست طولانی باشه. من معمولا یه همچین کاری میکنم:

<link rel=stylesheet href="https://pouyacode.net/theme/css/style.css?v=0">

خب اضافه کردن query string به لینک فایلهای استاتیک، این مشکل رو حل میکنه.

پس این راهکار شما مشکل فایل های html حل می کنه ،با query string هم مشکل فایل css و js حل میشه
امتحان می کنم و نتیجه میگم

چون من با یه دستور لینوکسی این تغییر توی کل متن پروژه میدم ، طولانی قرار دادم که با متن های دیگه به اشتباه replace نشه ، از تاریخ هم استفاده می کنم که تکراری نشه