හැඹිලි CSS / JS ගොනු නැවත පූරණය කිරීමට බ්‍රව්සරයට බල කරන්නේ කෙසේද?

සමහර බ්‍රව්සර් (විශේෂයෙන් ෆයර්ෆොක්ස් සහ ඔපෙරා) .css සහ .js ගොනු වල හැඹිලි පිටපත් භාවිතා කිරීමේදී ඉතා ජ්වලිත බව මම දුටුවෙමි . ඔබ මෙම ලිපිගොනු වලින් එකක් යාවත්කාලීන කරන විට මෙය ගැටළුවක් ඇති කරයි, නමුත් පරිශීලකයාගේ බ්‍රව්සරය හැඹිලි පිටපත දිගටම භාවිතා කරයි.

ප්‍රශ්නය නම්: ගොනුව වෙනස් වූ විට එය නැවත පූරණය කිරීමට පරිශීලකයාගේ බ්‍රව්සරයට බල කිරීමේ වඩාත් අලංකාර ක්‍රමය කුමක්ද?

පිටුවට යන සෑම අවස්ථාවකම ගොනුව නැවත පූරණය කිරීමට බ්‍රව්සරයට විසඳුම බල නොකරනු ඇත. මම පිළිතුරක් ලෙස මගේම විසඳුමක් පළ කරමි, නමුත් යමෙකුට වඩා හොඳ විසඳුමක් තිබේදැයි මට කුතුහලයක් ඇති අතර ඔබේ ඡන්දය තීරණය කිරීමට මම ඉඩ දෙමි.

යාවත්කාලීන කිරීම:

ටික වේලාවක් මෙහි සාකච්ඡා කිරීමට ඉඩ දීමෙන් පසුව, ජෝන් මිලිකින් සහ da5id ගේ යෝජනාව ප්‍රයෝජනවත් බව මට පෙනී ගියේය. මේ සඳහා යෙදුමක් ඇති බව පෙනේ : ස්වයංක්‍රීය අනුවාදය .

මම නව පිළිතුරක් පහතින් පළ කර ඇති අතර එය මගේ මුල් විසඳුම හා ජෝන් ගේ යෝජනාවේ එකතුවකි.

SCDF විසින් යෝජනා කරන ලද තවත් අදහසක් වනුයේ ව්‍යාජ විමසුම් දාමයක් ගොනුවට එකතු කිරීමයි. (ව්‍යාජ විමසුම් නූලක් ලෙස කාලරාමුව ස්වයංක්‍රීයව භාවිතා කිරීම සඳහා සමහර පයිතන් කේත ඉදිරිපත් කරන ලද්දේ pi විසිනි .) කෙසේ වෙතත්, බ්‍රව්සරය විමසුම් නූලක් සහිත ගොනුවක් හැඹිලි කරන්නේද නැද්ද යන්න පිළිබඳව යම් සාකච්ඡාවක් පවතී. (මතක තබා ගන්න, අපට අවශ්‍ය වන්නේ බ්‍රව්සරය ගොනුව හැඹිලිගත කර අනාගත චාරිකා සඳහා භාවිතා කිරීමයි. අපට අවශ්‍ය වන්නේ එය වෙනස් වූ විට එය නැවත ලබා ගැනීම පමණි.)

ව්‍යාජ විමසුම් නූලකින් කුමක් සිදුවේද යන්න පැහැදිලි නැති බැවින් මම එම පිළිතුර පිළිගන්නේ නැත.

යාවත්කාලීන කිරීම: ජෝන් මිලිකින් සහ da5id වෙතින් යෝජනා ඇතුළත් කිරීමට නැවත ලියා ඇත. මෙම විසඳුම PHP වලින් ලියා ඇති නමුත් වෙනත් භාෂාවන්ට පහසුවෙන් අනුගත විය යුතුය.

යාවත්කාලීන 2: අදහස් ෙයොදා නික් ජොන්සන් මුල් බව .htaccessregex වැනි ගොනු සමඟ ගැටළු ඇති විය හැක json-1.3.js. විසඳුම වන්නේ නැවත ලිවීම අවසානයේ හරියටම ඉලක්කම් 10 ක් තිබේ නම් පමණි. (ඉලක්කම් 10 ක් 9/9/2001 සිට 11/20/2286 දක්වා සියලුම කාලරාමු ආවරණය කරයි.)

පළමුව, අපි .htaccess හි පහත සඳහන් නැවත ලිවීමේ රීතිය භාවිතා කරමු:

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

දැන් අපි පහත PHP ශ්‍රිතය ලියන්නෙමු:

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *  
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

දැන්, ඔබ ඔබේ CSS ඇතුළත් කරන ඕනෑම තැනක සිට මෙය වෙනස් කරන්න:

<link rel="stylesheet" href="/css/base.css" type="text/css" />

මේ සඳහා:

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

මේ ආකාරයෙන්, ඔබට නැවත කිසි විටෙක සම්බන්ධක ටැගය වෙනස් කිරීමට අවශ්‍ය නොවන අතර පරිශීලකයා සෑම විටම නවතම CSS දකිනු ඇත. බ්‍රව්සරයට CSS ගොනුව හැඹිලිගත කිරීමට හැකි වනු ඇත, නමුත් ඔබ ඔබේ CSS හි යම් වෙනසක් සිදු කළ විට බ්‍රව්සරය මෙය නව URL එකක් ලෙස දකිනු ඇත, එබැවින් එය හැඹිලි පිටපත භාවිතා නොකරනු ඇත.

මෙය රූප, ෆේවිකොන් සහ ජාවාස්ක්‍රිප්ට් සමඟද ක්‍රියා කළ හැකිය. මූලික වශයෙන් ගතිකව ජනනය නොවන ඕනෑම දෙයක්.

සරල සේවාදායක පාර්ශවීය තාක්ෂණය

පොදුවේ ගත් කල, හැඹිලි කිරීම හොඳයි .. එබැවින් ඔබ වෙබ් අඩවියක් සංවර්ධනය කරන විට ඔබ විසින්ම ගැටලුව විසඳා ගන්නේද, නැතහොත් නිෂ්පාදන පරිසරයක හැඹිලිය පාලනය කිරීමට උත්සාහ කරන්නේද යන්න මත පදනම්ව ක්‍රම කිහිපයක් තිබේ.

ඔබේ වෙබ් අඩවියට පිවිසෙන සාමාන්‍ය අමුත්තන්ට ඔබ වෙබ් අඩවිය සංවර්ධනය කරන විට ඇති අත්දැකීම් සමාන නොවේ. සාමාන්‍ය ආගන්තුකයා අඩුවෙන් වෙබ් අඩවියට පැමිණෙන බැවින් (ඔබ ගූගල් හෝ හයි 5 ජාලයක් හැරෙන්නට සෑම මසකම කිහිප වතාවක් පමණි), එවිට ඔවුන් ඔබේ ලිපිගොනු හැඹිලි වල තබා ගැනීමට ඇති ඉඩකඩ අඩු වන අතර එය ප්‍රමාණවත් විය හැකිය. ඔබට නව අනුවාදයක් බ්‍රව්සරයට බල කිරීමට අවශ්‍ය නම්, ඔබට සැමවිටම ඉල්ලීමට විමසුම් දාමයක් එක් කළ හැකි අතර, ඔබ විශාල වෙනස්කම් සිදු කරන විට අනුවාද අංකය ඉහළට ඔසවන්න:

<script src="/myJavascript.js?version=4"></script>

සෑම කෙනෙකුටම නව ගොනුව ලැබෙන බව මෙය සහතික කරයි. එය ක්‍රියාත්මක වන්නේ බ්‍රව්සරය එහි හැඹිලියේ පිටපතක් තිබේද යන්න තීරණය කිරීම සඳහා ගොනුවේ URL ය දෙස බලන බැවිනි. විමසුම් දාමය සමඟ කිසිවක් කිරීමට ඔබේ සේවාදායකය සකසා නොමැති නම්, එය නොසලකා හරිනු ඇත, නමුත් නම බ්‍රව්සරයට නව ගොනුවක් මෙන් පෙනෙනු ඇත.

අනෙක් අතට, ඔබ වෙබ් අඩවියක් සංවර්ධනය කරන්නේ නම්, ඔබේ සංවර්ධන අනුවාදයේ වෙනසක් සුරකින සෑම අවස්ථාවකම අනුවාද අංකය වෙනස් කිරීමට ඔබට අවශ්‍ය නැත. එය වෙහෙසකරයි.

එබැවින් ඔබ ඔබේ වෙබ් අඩවිය සංවර්ධනය කරන අතරතුර, හොඳ උපක්‍රමයක් වනුයේ ස්වයංක්‍රීයව විමසුම් වචන පරාමිතියක් ජනනය කිරීමයි:

<!-- Development version: -->
<script>document.write('<script src="/myJavascript.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>

ඉල්ලීමට විමසුම් නූලක් එකතු කිරීම සම්පතක් අනුවාද කිරීමට හොඳ ක්‍රමයකි, නමුත් සරල වෙබ් අඩවියක් සඳහා මෙය අනවශ්‍ය විය හැකිය. මතක තබා ගන්න, හැඹිලි කිරීම හොඳ දෙයක්.

ලිපිගොනු හැඹිලියේ තබා ගැනීම ගැන බ්‍රව්සරය නොසැලකිලිමත් නොවන බව ද සඳහන් කිරීම වටී. බ්‍රව්සර් සතුව මෙවැනි දේ සඳහා ප්‍රතිපත්ති ඇති අතර ඒවා සාමාන්‍යයෙන් සෙල්ලම් කරන්නේ HTTP පිරිවිතරයේ දක්වා ඇති නීති රීති අනුව ය. බ්‍රව්සරයක් සේවාදායකයකු වෙත ඉල්ලීමක් කළ විට, ප්‍රතිචාරයේ කොටසක් EXPIRES ශීර්ෂයකි .. එය කොපමණ කාලයක් හැඹිලියේ තබා ගත යුතුදැයි බ්‍රව්සරයට පවසන දිනයකි. ඊළඟ වතාවේ බ්‍රව්සරය එකම ගොනුවක් සඳහා ඉල්ලීමක් හමු වූ විට, එය හැඹිලියේ පිටපතක් ඇති බව දකින අතර එය භාවිතා කළ යුතුද යන්න තීරණය කිරීම සඳහා EXPIRES දිනය දෙස බලයි.

එබැවින් එය විශ්වාස කරන්න හෝ නොවන්න, ඇත්ත වශයෙන්ම ඔබේ බ්‍රව්සරය හැඹිලිය එතරම්ම ස්ථීර කරන්නේ ඔබේ සේවාදායකයයි. ඔබට ඔබේ සේවාදායක සැකසුම් සකස් කර EXPIRES ශීර්ෂයන් වෙනස් කළ හැකිය, නමුත් මා ඉහත ලියා ඇති කුඩා තාක්‍ෂණය ඔබට ඒ පිළිබඳව යාමට වඩා සරල ක්‍රමයක් විය හැකිය. හැඹිලිගත කිරීම හොඳ බැවින්, ඔබට සාමාන්‍යයෙන් එම දිනය අනාගතයට ("දුර-අනාගත කල් ඉකුත් වන ශීර්ෂයක්") සැකසීමට අවශ්‍ය වන අතර වෙනසක් බල කිරීම සඳහා ඉහත විස්තර කර ඇති තාක්ෂණය භාවිතා කරන්න.

ඔබ HTTP පිළිබඳ වැඩි විස්තර හෝ මෙම ඉල්ලීම් කරන්නේ කෙසේද යන්න ගැන උනන්දුවක් දක්වන්නේ නම්, හොඳ පොතක් වන්නේ ස්ටීව් සවුඩර්ස් විසින් රචිත “ඉහළ කාර්යසාධන වෙබ් අඩවි” ය. එය විෂය පිළිබඳ ඉතා හොඳ හැඳින්වීමකි.

අපාචේ සඳහා ගූගල් හි mod_pagespeed ප්ලගිනය ඔබ වෙනුවෙන් ස්වයංක්‍රීය අනුවාදයක් කරනු ඇත. එය ඇත්තෙන්ම සිනිඳුයි.

එය වෙබ් සේවාදායකයෙන් පිටතට යන විට HTML විග්‍රහ කරයි (PHP, රේල් පීලි, පයිතන්, ස්ථිතික HTML - ඕනෑම දෙයක් සමඟ ක්‍රියා කරයි) සහ CSS, JS, රූප ලිපිගොනු වෙත සබැඳි නැවත ලියයි, එවිට ඒවාට හැඳුනුම් කේතයක් ඇතුළත් වේ. එය නවීකරණය කරන ලද URL වල ඇති ගොනු ඉතා දිගු හැඹිලි පාලනයක් සහිතව සපයයි. ලිපිගොනු වෙනස් වූ විට, එය ස්වයංක්‍රීයව URL වෙනස් කරයි, එවිට බ්‍රව්සරයට ඒවා නැවත ලබා ගත යුතුය. ඔබේ කේතයේ කිසිදු වෙනසක් නොමැතිව එය මූලික වශයෙන් ක්‍රියාත්මක වේ. එය ඔබගේ කේතයද පිටතට යන විට අවම කරයි.

අනුවාදය අතින් වෙනස් කිරීම වෙනුවට, සත්‍ය CSS ගොනුවේ MD5 හෑෂ් භාවිතා කිරීමට මම ඔබට නිර්දේශ කරමි.

එබැවින් ඔබගේ URL එක සමාන වනු ඇත

http://mysite.com/css/[md5_hash_here]/style.css

හැෂ් ඉවත් කිරීමට ඔබට තවමත් නැවත ලිවීමේ රීතිය භාවිතා කළ හැකිය, නමුත් වාසිය නම් දැන් ඔබට ඔබේ හැඹිලි ප්‍රතිපත්තිය "සදහටම හැඹිලිය" ලෙස සැකසිය හැකිය, මන්ද URL එක සමාන නම්, එයින් අදහස් වන්නේ ගොනුව නොවෙනස්ව පවතින බවයි.

එවිට ඔබට සරල ෂෙල් ස්ක්‍රිප්ට් එකක් ලිවිය හැකි අතර එය ගොනුවේ හැෂ් ගණනය කර ඔබගේ ටැගය යාවත්කාලීන කරයි (ඔබට එය ඇතුළත් කිරීම සඳහා වෙනම ගොනුවකට ගෙන යාමට අවශ්‍ය වනු ඇත).

CSS වෙනස් වන සෑම විටම එම ස්ක්‍රිප්ට් එක ධාවනය කරන්න, එවිට ඔබ හොඳයි. ඔබගේ ලිපිගොනු වෙනස් කළ විට පමණක් බ්‍රව්සරය නැවත පූරණය වේ. ඔබ සංස්කරණයක් කර එය අහෝසි කළහොත්, ඔබේ අමුත්තන් නැවත බාගත නොකිරීමට ඔබ ආපසු යා යුත්තේ කුමන අනුවාදයටදැයි සොයා බැලීමේ කිසිදු වේදනාවක් නොමැත.

මෙම විසඳුම ක්‍රියාත්මක කිරීම සඳහා ඔබ මෙතරම් වේදනාවක් ගන්නේ මන්දැයි නිශ්චිතවම කිව නොහැක.

ගොනුවේ නවීකරණය කරන ලද කාලරාමුව ලබාගෙන එය ගොනුවට විමසුමක් ලෙස එකතු කරන්නේ නම් ඔබ කළ යුත්තේ

PHP හි මම එය කරන්නේ:

<link href="mycss.css?v=<?= filemtime('mycss.css') ?>" rel="stylesheet">

filemtime යනු PHP ශ්‍රිතයක් වන අතර එය ගොනුව නවීකරණය කරන ලද කාලරාමුව ලබා දෙයි.

?foo=1234ඔබේ css / js ආනයනය අවසානයේ ඔබට තැබිය හැකිය , 1234 ඔබ කැමති දෙයක් ලෙස වෙනස් කරන්න. උදාහරණයක් ලෙස SO html ප්‍රභවය දෙස බලන්න.

එහි අදහස එයද? කෙසේ වෙතත් ඉල්ලීම මත පරාමිතීන් ඉවතලනු ලැබේ / නොසලකා හරිනු ලබන අතර ඔබ නව අනුවාදයක් පෙරළන විට එම අංකය වෙනස් කළ හැකිය.

සටහන: මෙය හැඹිලියට හරියටම බලපාන ආකාරය සම්බන්ධයෙන් යම් තර්කයක් තිබේ. එහි සාමාන්‍ය සාරාංශය වන්නේ පරාමිතීන් සමඟ හෝ නැතිව GET ඉල්ලීම් ලබා ගත හැකි බැවින් ඉහත විසඳුම ක්‍රියාත්මක විය යුතු බවයි.

කෙසේ වෙතත්, එය පිරිවිතරයේ එම කොටස සහ පරිශීලකයා භාවිතා කරන බ්‍රව්සරය පිළිපැදීමට අවශ්‍ය දැයි තීරණය කිරීම වෙබ් සේවාදායකයට දෙකටම බලපාන අතර, එය කෙසේ හෝ ඉදිරියට ගොස් නැවුම් අනුවාදයක් ඉල්ලා සිටිය හැකිය.

මම මෙය "ස්වයංක්‍රීය අනුවාදය" ලෙස අසා ඇත්තෙමි. වඩාත් පොදු ක්‍රමය වන්නේ ස්ථිතික ගොනුවේ වේලාව URL හි කොතැනක හෝ ඇතුළත් කිරීම සහ නැවත ලිවීමේ හසුරුවන්නන් හෝ URL confs භාවිතා කර එය ඉවත් කිරීමයි:

මෙයද බලන්න:

• ජැන්ගෝ හි ස්වයංක්‍රීය වත්කම් අනුවාදය
• ඔබේ CSS සහ JavaScript ගොනු ස්වයංක්‍රීයව සංස්කරණය කරන්න

දැනට පවතින පිළිතුරු 30 ක් හෝ ඊට වැඩි ප්‍රමාණයක් 2008 පමණ වෙබ් අඩවියකට හොඳ උපදෙස් වේ. කෙසේ වෙතත්, නවීන, තනි පිටු යෙදුමක් (SPA) සම්බන්ධයෙන් ගත් කල, සමහර මූලික උපකල්පන නැවත සිතා බැලීමට කාලය විය හැකිය… විශේෂයෙන් ම, වෙබ් සේවාදායකයාට තනි, නවතම අනුවාදයකට පමණක් සේවය කිරීම සුදුසු යැයි යන අදහස ගොනුව.

ඔබ ඔබේ බ්‍රව්සරයට පටවා ඇති SPA හි M අනුවාදය ඇති පරිශීලකයෙකු යැයි සිතන්න :

1. ඔබේ CD නල නව අනුවාදය යොදවා එන් සේවාදායකය මතට අයදුම්පත්
2. ඔබ SPA තුළ සැරිසැරීම, එය ලබා ගැනීම සඳහා XHR සේවාදායකයට යවයි /some.template
   • (ඔබගේ බ්‍රව්සරය පිටුව නැවුම් කර නැත, එබැවින් ඔබ තවමත් M අනුවාදය ධාවනය කරයි )
3. සේවාදායකය අන්තර්ගතය සමඟ ප්‍රතිචාර දක්වයි /some.template- ඔබට එය අච්චුවේ M හෝ N අනුවාදය නැවත ලබා දීමට අවශ්‍යද ?

ආකෘතිය නම් /some.templateඅනුවාද අතර වෙනස් එම් සහ එන් (හෝ ගොනුව නැවත නම් හෝ කුමන විය) , ඔබට මීට අනුවාදය අවශ්ය නැහැ එන් ආකෘතියේ පැරණි අනුවාදය ධාවනය කරන බව ද බ්රව්සරය වෙත යවන එම් විග්රහකය ක . †

කොන්දේසි දෙකක් සපුරා ඇති විට වෙබ් යෙදුම් මෙම ගැටලුවට මුහුණ දෙයි:

• ආරම්භක පිටු පැටවීමෙන් ටික කලකට පසු සම්පත් අසමමුහුර්තව ඉල්ලා සිටී
• යෙදුම් තර්කනය සම්පත් අන්තර්ගතය පිළිබඳ දේවල් (අනාගත අනුවාදවල වෙනස් විය හැකිය) උපකල්පනය කරයි

ඔබගේ යෙදුමට සමාන්තරව බහුවිධ අනුවාදයන් සැපයීමට අවශ්‍ය වූ පසු, හැඹිලි විසඳීම සහ "නැවත පූරණය කිරීම" ඉතා සුළු වේ:

1. වෙළුම් dirs, සියලු අඩවි ගොනු ස්ථාපනය කරන්න: /v<release_tag_1>/…files…,/v<release_tag_2>/…files…
2. ලිපිගොනු සදහටම හැඹිලි කිරීමට බ්‍රව්සර්ට ඉඩ දීමට HTTP ශීර්ෂයන් සකසන්න
   • (හෝ වඩා හොඳ තවමත්, සියල්ල CDN එකක තබන්න)
3. අනුවාද කරන ලද ඩර් වලින් එකක එම ගොනුව වෙත යොමු කිරීම සඳහා සියල්ල <script>සහ <link>ටැග් ආදිය යාවත්කාලීන කරන්න

ඔබේ සේවාදායකයේ හෝ සේවාදායක පාර්ශවීය කේතයේ සෑම URL එකක් සඳහාම URL සාදන්නෙකු ඇමතීමට අවශ්‍ය විය හැකි බැවින්, එම අවසාන පියවර ව්‍යාකූල බවක් පෙනේ. නැතහොත් ඔබට <base>ටැගය දක්ෂ ලෙස භාවිතා කර වත්මන් අනුවාදය එක තැනකින් වෙනස් කළ හැකිය.

Around මේ සඳහා එක් ක්‍රමයක් නම් නව අනුවාදයක් නිකුත් වූ විට බ්‍රව්සරයට සියල්ල නැවත පූරණය කිරීමට බල කිරීම ගැන ආක්‍රමණශීලී වීමයි. නමුත් කිසියම් ප්‍රගතිශීලී මෙහෙයුම් සම්පූර්ණ කිරීමට ඉඩ දීම සඳහා, සමාන්තරව අවම වශයෙන් අනුවාද දෙකක් වත් සහාය දීම තවමත් පහසු විය හැකිය: v-current සහ v-previous.

Foo.css භාවිතා නොකරන්න? අනුවාදය = 1! බ්‍රව්සර් GET විචල්‍යයන් සමඟ URL හැඹිලිගත නොකළ යුතුය. Http://www.thinkvitamin.com/features/webapps/serving-javascript-fast ට අනුව , IE සහ Firefox මෙය නොසලකා හැරියද, ඔපෙරා සහ සෆාරි එසේ නොකරයි! ඒ වෙනුවට, foo.v1234.css භාවිතා කරන්න, සහ අනුවාද අංකය ඉවත් කිරීමට නැවත ලිවීමේ නීති භාවිතා කරන්න.

Laravel (PHP) හි අපට එය පැහැදිලි හා අලංකාර ආකාරයකින් අනුගමනය කළ හැකිය (ගොනු වෙනස් කිරීමේ කාලරාමුව භාවිතා කරමින්):

<script src="{{ asset('/js/your.js?v='.filemtime('js/your.js')) }}"></script>

CSS සඳහා සමාන වේ

<link rel="stylesheet" href="{{asset('css/your.css?v='.filemtime('css/your.css'))}}">

උදාහරණ html ප්‍රතිදානය ( filemtimeආපසු එන කාලය යුනික්ස් කාලරාමුව ලෙස )

<link rel="stylesheet" href="assets/css/your.css?v=1577772366">

RewriteRule සඳහා js හෝ css ගොනු සඳහා කුඩා යාවත්කාලීන කිරීමක් අවශ්‍ය වන අතර එය අවසානයේ තිත් අංකන අනුවාදයක් අඩංගු වේ. උදා json-1.3.js.

මම රිජෙක්ස් වෙත තිත් නිෂේධන පංතියක් [^.] එකතු කළෙමි .නම්බර්. නොසලකා හරිනු ලැබේ.

RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]

ASP.NET 4.5 සහ ඊට වැඩි ඔබට ස්ක්‍රිප්ට් බණ්ඩල් කිරීම භාවිතා කළ හැකිය .

ඉල්ලීම http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81AllMyScripts සඳහා වන අතර විමසුම් නූල් යුගලයක් v = r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81 අඩංගු වේ. විමසුම් දාමයේ අගය ටෝකනයක් ඇති අතර එය හැඹිලිය සඳහා භාවිතා කරන අද්විතීය හඳුනාගැනුමකි. බණ්ඩලය වෙනස් නොවන තාක් කල්, ASP.NET යෙදුම මෙම ටෝකනය භාවිතා කර AllMyScripts බණ්ඩලය ඉල්ලනු ඇත. බණ්ඩලයේ කිසියම් ගොනුවක් වෙනස් වුවහොත්, ASP.NET ප්‍රශස්තිකරණ රාමුව මඟින් නව ටෝකනයක් ජනනය කරනු ඇත, බණ්ඩලය සඳහා බ්‍රව්සර් ඉල්ලීම් නවතම මිටියක් ලබා දෙන බවට සහතික වේ.

කුඩා කිරීම සමඟ පළමු වරට පිටු පැටවීමේ කාර්ය සාධනය වැඩි කිරීම ඇතුළුව බණ්ඩල් කිරීම සඳහා වෙනත් වාසි ඇත.

මෙන්න පිරිසිදු ජාවාස්ක්‍රිප්ට් විසඳුමක්

(function(){

    // Match this timestamp with the release of your code
    var lastVersioning = Date.UTC(2014, 11, 20, 2, 15, 10);

    var lastCacheDateTime = localStorage.getItem('lastCacheDatetime');

    if(lastCacheDateTime){
        if(lastVersioning > lastCacheDateTime){
            var reload = true;
        }
    }

    localStorage.setItem('lastCacheDatetime', Date.now());

    if(reload){
        location.reload(true);
    }

})();

ඉහත දැක්වෙන්නේ පරිශීලකයා ඔබේ වෙබ් අඩවියට අවසන් වරට ගිය අවස්ථාවයි. ඔබ නව කේතයක් නිකුත් කිරීමට පෙර අවසන් වරට පැමිණියේ නම්, එය location.reload(true)සේවාදායකයෙන් පිටු නැවුම් කිරීමට බල කරයි .

මම සාමාන්‍යයෙන් මෙය පළමු පිටපත ලෙස සලකන බැවින් <head>වෙනත් අන්තර්ගතයන් පැටවීමට පෙර එය ඇගයීමට ලක් කෙරේ. නැවත පූරණය වීමට අවශ්‍ය නම්, එය පරිශීලකයාට නොපෙනේ.

බ්‍රවුසරයේ අවසන් වරට නැරඹුම් කාලරාමුව ගබඩා කිරීම සඳහා මම දේශීය ආචයනය භාවිතා කරමි, නමුත් ඔබ IE හි පැරණි අනුවාදයන්ට සහය දැක්වීමට බලාපොරොත්තු වන්නේ නම් ඔබට මිශ්‍රණයට කුකීස් එකතු කළ හැකිය.

සිත්ගන්නා තනතුර. මෙහි ඇති සියලුම පිළිතුරු කියවා ඇති මට “ව්‍යාජ” විමසුම් නූල් සමඟ කිසිඳු ගැටළුවක් නොතිබුණි (මෙය භාවිතා කිරීමට සෑම කෙනෙක්ම එතරම් අකමැති ඇයිදැයි මට විශ්වාස නැත) මම විසඳුම අනුමාන කරමි (එමඟින් අපාචේ නැවත ලිවීමේ නීති රීති ඉවත් කරයි පිළිගත් පිළිතුරෙහි මෙන්) යනු CSS ගොනු අන්තර්ගතයේ කෙටි HASH එකක් (ගොනුව දිවා කාලය වෙනුවට) ව්‍යාජ විමසුමක් ලෙස ගණනය කිරීමයි.

මෙහි ප්‍රති result ලය වනුයේ:

<link rel="stylesheet" href="/css/base.css?[hash-here]" type="text/css" />

ඇත්ත වශයෙන්ම දිවා කාලයේ විසඳුම් මඟින් CSS ගොනුවක් සංස්කරණය කිරීමේ කාර්යය ඉටු කරනු ලැබේ, නමුත් මම සිතන්නේ එය CSS ගොනු අන්තර්ගතය ගැන මිස ගොනුවේ දිවා කාලය ගැන නොවේ, එබැවින් මේවා මිශ්‍ර වන්නේ ඇයි?

මගේ සංවර්ධනය සඳහා, ක්‍රෝම්ට හොඳ විසඳුමක් ඇති බව මට පෙනී ගියේය.

https://developer.chrome.com/devtools/docs/tips-and-tricks#hard-reload

සංවර්ධක මෙවලම් විවෘතව ඇති විට, නැවුම් බොත්තම දිගු ක්ලික් කර "හිස් හැඹිලිය සහ දෘ Re රීලෝඩ්" එකෙහි සැරිසැරූ පසු යන්න.

මෙය මගේ හොඳම මිතුරා වන අතර ඔබට අවශ්‍ය දේ ලබා ගැනීමට සුපිරි සැහැල්ලු ක්‍රමයකි!

ඔහුගේ පරිපූර්ණ විසඳුමට Kip හි ස්තූතියි!

මම එය Zend_view_Helper ලෙස භාවිතා කිරීමට දිගු කළෙමි. මගේ සේවාදායකයා ඔහුගේ පිටුව අතථ්‍ය ධාරකයක ධාවනය කරන නිසා මම ඒ සඳහා එය දිගු කළෙමි.

එය වෙනත් කෙනෙකුට ද උපකාරී වේ යැයි සිතමි.

/**
 * Extend filepath with timestamp to force browser to
 * automatically refresh them if they are updated
 *
 * This is based on Kip's version, but now
 * also works on virtual hosts
 * @link http://stackoverflow.com/questions/118884/what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files
 *
 * Usage:
 * - extend your .htaccess file with
 * # Route for My_View_Helper_AutoRefreshRewriter
 * # which extends files with there timestamp so if these
 * # are updated a automatic refresh should occur
 * # RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]
 * - then use it in your view script like
 * $this->headLink()->appendStylesheet( $this->autoRefreshRewriter($this->cssPath . 'default.css'));
 *
 */
class My_View_Helper_AutoRefreshRewriter extends Zend_View_Helper_Abstract {

    public function autoRefreshRewriter($filePath) {

        if (strpos($filePath, '/') !== 0) {

            // path has no leading '/'
            return $filePath;
        } elseif (file_exists($_SERVER['DOCUMENT_ROOT'] . $filePath)) {

            // file exists under normal path
            // so build path based on this
            $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $filePath);
            return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
        } else {

            // fetch directory of index.php file (file from all others are included)
            // and get only the directory
            $indexFilePath = dirname(current(get_included_files()));

            // check if file exist relativ to index file
            if (file_exists($indexFilePath . $filePath)) {

                // get timestamp based on this relativ path
                $mtime = filemtime($indexFilePath . $filePath);

                // write generated timestamp to path
                // but use old path not the relativ one
                return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
            } else {

                return $filePath;
            }
        }
    }

}

චියර්ස් සහ ස්තූතියි.

ස්ක්‍රිප්ට් නෝඩ් (හෝ සීඑස්එස්) මූලද්‍රව්‍යය ගතිකව නිර්මාණය කරමින් සේවාදායක පාර්ශවීය ඩොම් ප්‍රවේශය සොයාගෙන නැත:

<script>
    var node = document.createElement("script"); 
    node.type = "text/javascript";
    node.src = 'test.js?'+Math.floor(Math.random()*999999999);
    document.getElementsByTagName("head")[0].appendChild(node);
</script>

ක්රෝමියම් ඇත google Hard රීලෝඩ් මෙන්ම හිස් මතකය සහ සැර රීලෝඩ් option.You එක් තෝරා ගැනීමට රීලෝඩ් බොත්තම ක්ලික් කර පැවැත්වීමට (දී ප්රකාරය පරීක්ෂා) කළ හැක.

ඔබ සැසි හැඳුනුම්පත js / css ගොනුවේ ව්‍යාජ පරාමිතියක් ලෙස එකතු කළහොත් ඔබට "සැසිය පුරා හැඹිලි" බල කළ හැකිය:

<link rel="stylesheet" src="myStyles.css?ABCDEF12345sessionID" />
<script language="javascript" src="myCode.js?ABCDEF12345sessionID"></script>

ඔබට අනුවාදයක් පුරා හැඹිලියක් අවශ්‍ය නම් ගොනු දිනය මුද්‍රණය කිරීම සඳහා කේතයක් එක් කළ හැකිය. ඔබ ජාවා භාවිතා කරන්නේ නම්, සබැඳිය අලංකාර ආකාරයකින් ජනනය කිරීමට ඔබට අභිරුචි-ටැගයක් භාවිතා කළ හැකිය.

<link rel="stylesheet" src="myStyles.css?20080922_1020" />
<script language="javascript" src="myCode.js?20080922_1120"></script>

ඔබට මෙහි ගොනුවක් ඇති බව පවසන්න:

/styles/screen.css

ඔබට අනුවාද තොරතුරු සහිත විමසුම් පරාමිතියක් යූආර්අයි වෙත එකතු කළ හැකිය, උදා:

/styles/screen.css?v=1234

හෝ ඔබට අනුවාද තොරතුරු සකස් කළ හැකිය, උදා:

/v/1234/styles/screen.css

IMHO දෙවන ක්‍රමය CSS ලිපිගොනු සඳහා වඩා හොඳ වන්නේ ඒවාට සාපේක්ෂ URL භාවිතා කරමින් රූප වෙත යොමු විය හැකි බැවිනි, එයින් අදහස් වන්නේ ඔබ එවැනි background-imageදෙයක් සඳහන් කරන්නේ නම්:

body {
    background-image: url('images/happy.gif');
}

එහි URL effectively ලදායී වනු ඇත:

/v/1234/styles/images/happy.gif

මෙයින් අදහස් කරන්නේ ඔබ භාවිතා කළ අනුවාද අංකය යාවත්කාලීන කළහොත් සේවාදායකයා මෙය නව සම්පතක් ලෙස සලකනු ඇති අතර හැඹිලි අනුවාදයක් භාවිතා නොකරන බවයි. ඔබ ඔබේ අනුවාද අංකය උපසිරැසි / සීවීඑස් / යනාදිය මත පදනම් කරන්නේ නම්. සංශෝධනය කිරීම යනු CSS ලිපිගොනු වල සඳහන් රූපවල වෙනස්කම් දැකගත හැකි බවයි. ප්රථම යෝජනා ක්රමය, එනම්, URL එක සමග සහතික කර නැත images/happy.gifසාපේක්ෂව /styles/screen.css?v=1235කියන්නේ /styles/images/happy.gifඕනෑම අනුවාදයක තොරතුරු අඩංගු නොවන.

මම ජාවා සර්වට්ලට් සමඟ මෙම තාක්ෂණය උපයෝගී කරගනිමින් හැඹිලි විසඳුමක් ක්‍රියාත්මක කර /v/*ඇති අතර යටින් පවතින සම්පතට (එනම් /styles/screen.css) පැවරෙන සර්වට්ලට් එකක් සමඟ ඉල්ලීම් හසුරුවන්නෙමි . සංවර්ධන මාදිලිය මම කල ගබඩා සේවාදායකය සමඟ හැම විටම සම්පත් නැවුම් බව පරීක්ෂා කිරීම සඳහා සේවාදායකයා කියන්න බව (මෙම සාමාන්යයෙන් ඔබ Tomcat ගේ කිරීමට භාර නම් 304 ප්රතිඵලයක් ශීර්ෂ සකස් DefaultServletහා .css, .jsයෙදවීම ආකාරයෙන් වන අතර, ආදිය ගොනුව වෙනස් වී නැති) මම "සදහටම හැඹිලිය" යනුවෙන් ශීර්ෂයන් සකසා ඇත.

ඔබට CSS / JS url වැනි අහඹු අංකයක් එක් කළ හැකිය

example.css?randomNo=Math.random()

ASP.NET සඳහා උසස් විකල්ප සමඟ ඊළඟ විසඳුම (නිදොස්කරණය / මුදා හැරීමේ මාදිලිය, අනුවාද) යැයි සිතමි:

Js හෝ Css ගොනු එවැනි ආකාරයකින් ඇතුළත් කර ඇත:

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Global.JsPostfix සහ Global.CssPostfix ගණනය කරනු ලබන්නේ Global.asax හි පහත දැක්වෙන ආකාරයට ය:

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif      
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}

මම මෑතකදී මෙය පයිතන් භාවිතයෙන් විසඳුවා. මෙහි කේතය (වෙනත් භාෂාවන්ට හුරු කරවීම පහසු විය යුතුය):

def import_tag(pattern, name, **kw):
    if name[0] == "/":
        name = name[1:]
    # Additional HTML attributes
    attrs = ' '.join(['%s="%s"' % item for item in kw.items()])
    try:
        # Get the files modification time
        mtime = os.stat(os.path.join('/documentroot', name)).st_mtime
        include = "%s?%d" % (name, mtime)
        # this is the same as sprintf(pattern, attrs, include) in other
        # languages
        return pattern % (attrs, include)
    except:
        # In case of error return the include without the added query
        # parameter.
        return pattern % (attrs, name)

def script(name, **kw):
    return import_tag("""<script type="text/javascript" """ +\
        """ %s src="/%s"></script>""", name, **kw)

def stylesheet(name, **kw):
    return import_tag('<link rel="stylesheet" type="text/css" ' +\
        """%s href="/%s">', name, **kw) 

මෙම කේතය මූලිකවම ලිපිගොනු කාල මුද්දරය විමසුම් පරාමිතියක් ලෙස URL වෙත එකතු කරයි. පහත දැක්වෙන ශ්‍රිතයේ ඇමතුම

script("/main.css")

ප්‍රති in ලය වනු ඇත

<link rel="stylesheet" type="text/css"  href="/main.css?1221842734">

පා course මාලාවේ වාසිය නම්, ඔබ කිසි විටෙකත් ඔබේ HTML වෙනස් කිරීමට අවශ්‍ය නොවන අතර, CSS ගොනුව ස්පර්ශ කිරීමෙන් ස්වයංක්‍රීයව හැඹිලි අවලංගු කිරීමක් සිදුවනු ඇත. ඉතා හොඳින් ක්‍රියා කරන අතර පොදු කාර්ය සැලකිය යුතු නොවේ.

ඔබ git + PHP භාවිතා කරන්නේ නම්, පහත දැක්වෙන කේතය භාවිතා කරමින් git repo හි වෙනසක් සිදුවන සෑම අවස්ථාවකම ඔබට ස්ක්‍රිප්ට් හැඹිලියෙන් නැවත පූරණය කළ හැකිය:

exec('git rev-parse --verify HEAD 2> /dev/null', $gitLog);
echo '  <script src="/path/to/script.js"?v='.$gitLog[0].'></script>'.PHP_EOL;

ඔබ හැඹිලිය වළක්වා ගැනීමට බලා සිටින සංවර්ධකයෙක් නම්, ක්‍රෝම් ජාල පටිත්තෙහි හැඹිලි විකල්පය අක්‍රීය කර ඇත. නැතිනම් ඔබට ස්ක්‍රිප්ට් ටැග් දෙකක් භාවිතා කර සේවාදායක විදැහුම්කරණ රාමුවක් නොමැතිව එය කළ හැකිය.

<script type="text/javascript">
    document.write('<script type="text/javascript" src="myfile.js?q=' + Date.now() + '">
    // can't use myfile.js stuff yet
</script>')
<script type="text/javascript">
    // do something with myfile.js
</script>

මෙහි ඇති සියලුම පිළිතුරු නාමකරණ යෝජනා ක්‍රමයේ යම් ආකාරයක අනුවාදයක් යෝජනා කරන අතර එහි අවාසි ඇත.

වෙබ් සේවාදායකයන්ගේ ප්‍රතිචාරය, විශේෂයෙන් http ශීර්ෂයන් කියවීමෙන් හැඹිලි කළ යුතු දේ සහ හැඹිලි නොකළ යුතු දේ ගැන බ්‍රව්සර් හොඳින් දැන සිටිය යුතුය - මෙම සම්පත කොපමණ කාලයක් වලංගු ද? මා අවසන් වරට එය ලබාගත් දා සිට මෙම සම්පත යාවත්කාලීන කර තිබේද? etcetera.

දේවල් 'නිවැරදිව' වින්‍යාස කර ඇත්නම්, ඔබගේ යෙදුමේ ලිපිගොනු යාවත්කාලීන කිරීම (යම් අවස්ථාවක දී) බ්‍රව්සර් හැඹිලි නැවුම් කළ යුතුය. ඔබට කිසි විටෙකත් ලිපිගොනු හැඹිලි නොකරන ලෙස බ්‍රව්සරයට පැවසීමට ඔබේ වෙබ් සේවාදායකය වින්‍යාසගත කළ හැකිය (එය නරක අදහසකි).

එය ක්‍රියාත්මක වන ආකාරය පිළිබඳ වඩාත් ගැඹුරු පැහැදිලි කිරීමක් මෙහි ඇත https://www.mnot.net/cache_docs/#WORK

ඔබට තදින් රීලෝඩ් කිරීමට අවශ්‍ය තැන මෙම කේතය එක් කරන්න (හැඹිලි CSS / JS ගොනු නැවත පූරණය කිරීමට බ්‍රව්සරයට බල කරන්න) .load තුළ මෙය කරන්න. එවිට එය ලූපයක් මෙන් නැවුම් නොවේ.

 $( window ).load(function() {
   location.reload(true);
});

ගොනුවේ දිනය එක් කිරීමට සේවාදායක පැත්තේ කේතය භාවිතා කරන්න ... ඒ ආකාරයෙන් එය හැඹිලිගත වනු ඇති අතර ගොනුව වෙනස් වූ විට පමණක් නැවත පූරණය වේ

ASP.NET හි

<link rel="stylesheet" href="~/css/custom.css?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/css/custom.css")).ToString(),"[^0-9]", ""))" />

<script type="text/javascript" src="~/js/custom.js?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/js/custom.js")).ToString(),"[^0-9]", ""))"></script>    

මෙය සරල කළ හැක්කේ:

<script src="<%= Page.ResolveClientUrlUnique("~/js/custom.js") %>" type="text/javascript"></script>

පිටුව දීර් extend කිරීම සඳහා ඔබේ ව්‍යාපෘතියට දිගු කිරීමේ ක්‍රමයක් එකතු කිරීමෙන්:

public static class Extension_Methods
{
    public static string ResolveClientUrlUnique(this System.Web.UI.Page oPg, string sRelPath)
    {
        string sFilePath = oPg.Server.MapPath(sRelPath);
        string sLastDate = System.IO.File.GetLastWriteTime(sFilePath).ToString();
        string sDateHashed = System.Text.RegularExpressions.Regex.Replace(sLastDate, "[^0-9]", "");

        return oPg.ResolveClientUrl(sRelPath) + "?d=" + sDateHashed;
    }
}

මෙම ප්‍රශ්නය ඉතා පැරණි වන අතර ඕනෑම අයෙකු මෙම ගැටලුව විසඳන විට එය පළමුවෙන්ම පෙනේ. මෙය දෘෂ්ටි කෝණයෙන් අවශ්‍ය ප්‍රශ්නයට පිළිතුරක් නොවේ, ඒ වෙනුවට සංවර්ධනය කිරීමේදී හා පරීක්ෂා කිරීමේදී මෙම ගැටලුව සමඟ ඩෙව්ස්ට පිළිතුරකි. අනුපිටපතක් ලෙස සලකුණු කෙරෙන බැවින් මට මෙම මාතෘකාව පිළිබඳ නව ප්‍රශ්නයක් පළ කළ නොහැක.

අනෙක් බොහෝ අය මෙන්, මට අවශ්‍ය වූයේ හැඹිලිය කෙටියෙන් ඉවත් කිරීමට ය.

"keep caching consistent with the file" .. එහි මාර්ගය ඕනෑවට වඩා කරදරයක් ..

පොදුවේ ගත් කල, වැඩිපුර ව්‍යාපෘති පැටවීම - වෙනස් නොවූ ලිපිගොනු නැවත පැටවීම පවා මට ප්‍රශ්නයක් නොවේ - බොහෝ ව්‍යාපෘති වල - ප්‍රායෝගිකව අදාළ නොවේ. යෙදුමක් සංවර්ධනය කරන අතරතුර - අපි බොහෝ දුරට තැටියෙන් පටවනු ලැබේ, localhost:port එබැවින් - එබැවින් මෙම increase in network trafficගැටළුව ගනුදෙනු කිරීමේ ගැටලුවක් නොවේ .

බොහෝ කුඩා ව්‍යාපෘති හුදෙක් සෙල්ලම් කරමින් සිටියි - ඒවා කිසි විටෙකත් නිෂ්පාදනයෙන් අවසන් නොවේ. එබැවින් ඔවුන් සඳහා ඔබට තවත් කිසිවක් අවශ්‍ය නොවේ ..

ඔබ ක්‍රෝම් දේව් මෙවලම් භාවිතා කරන්නේ නම් , පහත රූපයේ මෙන් ඔබට මෙම අක්‍රීය හැඹිලි ප්‍රවේශය අනුගමනය කළ හැකිය:

ඔබට ෆයර්ෆොක්ස් හැඹිලි ගැටළු තිබේ නම්:

මෙය සංවර්ධනයේදී පමණක් කරන්න, නිෂ්පාදනය සඳහා නැවත පූරණය කිරීමට ඔබට යාන්ත්‍රණයක් අවශ්‍ය වේ, මන්ද ඔබ ඔබේ යෙදුම නිතර යාවත්කාලීන කරන්නේ නම් ඔබේ පරිශීලකයින් පැරණි හැඹිලි අවලංගු මොඩියුල භාවිතා කරනු ඇති අතර පිළිතුරු වල විස්තර කර ඇති ආකාරයට කැපවූ හැඹිලි සමමුහුර්ත කිරීමේ යාන්ත්‍රණයක් ඔබ ලබා නොදේ. ඉහත.

ඔව්, මෙම තොරතුරු දැනටමත් පෙර පිළිතුරු වල ඇති නමුත් එය සොයා ගැනීමට මට ගූගල් සෙවුමක් කිරීමට අවශ්‍ය විය.

මෙම පිළිතුර ඉතා පැහැදිලිය, දැන් ඔබට අවශ්‍ය නැත.

පහත ක්‍රියාවලිය ක්‍රියාත්මක කිරීමට මම යෝජනා කරමි:

• ඔබ යෙදූ සෑම විටම ඔබේ css / js ගොනු සංස්කරණය කරන්න, වැනි දෙයක්: screen.1233.css (ඔබ අනුවාද පද්ධතියක් භාවිතා කරන්නේ නම් අංකය ඔබේ SVN සංශෝධනය විය හැකිය)

• පැටවීමේ වේලාවන් ප්‍රශස්ත කිරීම සඳහා ඒවා අවම කරන්න