Home / Questions / 63716
Accepted
Jorius
Asked: 2020-04-19 12:07:55 +0800 CST 2020-04-19 12:07:55 +0800 CST

Как избежать кеша файлов css и js

  • 772

В последнее время я видел много проблем в Google Chrome (в других браузерах он работает нормально, кроме Safari на Mac) при загрузке новой версии таблицы стилей ( .css) или скрипта javascript ( .js), я думал, что смогу это решить по простому:

<link rel="stylesheet" href="/private/css/visual.css?v=1" />
<script src="/private/js/visual.js?v=1"></script>

Но это не всегда работает для меня, и мне приходится постоянно менять значение v=1, чтобы оно загружало новые версии соответствующих файлов.

Есть ли способ предотвратить кеширование должным образом?

Получите библиотеку, собственный код javascript, что-то, что можно добавить в мои файлы .cssили .js, изменить на моем сервере, изменить на моем компьютере, настройки браузера и т. д. и избежать этой проблемы.

ПРИМЕЧАНИЕ . Кэш остается как локальным, так и уже размещенным на сервере/домене .

ОБНОВЛЕНИЕ: Возможно, сначала я был не очень ясен, хотя ответы и производные от JuankGlezz помогают мне в среде разработки, я ищу ответ, который может служить моим конечным пользователям без необходимости что-либо трогать ...

javascript

8 Answers

  1. Best Answer

    Это можно использовать в производственных и отладочных средах, если вы один из тех, кто постоянно модифицирует SCRIPT и CSS веб-страниц, но вы обычно не держите консоль браузера открытой и хотите избежать кеша, вы можете добавить следующее строки в HTML.

    <head>
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Last-Modified" content="0">
  <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
  <meta http-equiv="Pragma" content="no-cache">
</head>

    В WordPress, чтобы добавить теги, </head>мы должны отредактировать шаблон или тему , в частности, мы должны отредактировать файл, header.phpв котором расположены теги <head>и </head>.

    В приложении, разработанном на PHP, вы можете заставить его не сохранять кеш в браузере, вы можете использовать следующие строки:

    <?php
  header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
  header("Expires: Sat, 1 Jul 2000 05:00:00 GMT"); // Fecha en el pasado
?>

    Если вы разработчик и не хотите добавлять предыдущие строки, вы можете избежать кеша из консоли браузера (F12).

    Рекомендуется оставить консоль браузера открытой (F12) и включить флажок отключения кеша на вкладке сети .

    включить галочку отключения кеша на вкладке сети

    Для Firefox откройте консоль отладчика (F12)

    1. переходим к параметрам панели инструментов
    2. мы пытаемся отключить кеш http

    включить флажок отключения кеша в firefox

    Примечание:

    Для этого консоль должна быть всегда открыта (F12) иначе она продолжит сохранять кеш и для Google Chrome и для Mozilla Firefox .
    Наиболее рекомендуемым в области отладки является открытие окна в режиме инкогнито.

    • 24

  2. Один из способов — когда вы ссылаетесь на файлы JavaScript, которые вы помещаете в конце ?1, Это означает, что ?1это какая-то версия файла, так что браузер перезагружает его снова и не загружает кэшированные файлы. Например:

    <script type="text/javascript"
    src="http://sitio.com/jsFiles/miArchivoJavaScript.js?123">
</script>

    Рекомендуется иметь какую-то функцию, чтобы после вопросительного знака я генерировал случайное число.

    Преимущество использования этой функции в том, что она не требует вмешательства пользователя.

    Обновлять

    Поскольку вы используете решение PHP, было бы лучше сгенерировать динамическое число для версии файла JavaScript или CSS, чтобы гарантировать, что файл всегда загружается с сервера, а не из кеша браузера, используя функцию rand()для создания случайного количество.

    Например:

    <link rel="stylesheet" href="/private/css/visual.css?v=<?php echo(rand()); ?>" />
<script src="/private/js/visual.js?v=<?php echo(rand()); ?>"></script>
    • 21

  3. Вы можете проверить этот способ, если ваш файл имеет расширение .php :

    <script type="text/javascript"
 src="http://sitio.com/jsFiles/miArchivoJavaScript.js?v=<?php echo time();?>">
 </script>

    И если вы хотите сделать это из JS, возможно, вам поможет что-то вроде этого:

    var js = document.querySelectorAll('script');

for (var i = 0; i < js.length; i++) {
    js[i].src = js[i].src + '?v=' + Date.now();
}

var css = document.querySelectorAll('link');

for (var i = 0; i < css.length; i++) {
    css[i].href = css[i].href + '?v=' + Date.now();
}

    Просто помните, что если вы используете код JS, ваши файлы JS или CSS должны быть загружены первыми, а затем сразу же обновлять атрибут src или href .

    • 4

  4. Если вы всегда хотите избежать кеша, вы можете сделать:

    <script type="text/javascript">
  var estilos = 'carpeta/css/style.css?' + Math.random();
</script>

<script type="text/javascript">
  document.write('<link href="' + estilos + '" rel="stylesheet">');
</script>

    Или же динамически создайте ссылку, помните, что переменная estilosможет быть набором строк.

    • 1

  5. Я делаю следующее:

    Я проверяю, что в коде нет ошибок.

    Я использую комбинацию Control + Shift + R

    Открываю консоль и захожу в раздел сети, после чего нажимаю F5, чтобы посмотреть, правильно ли импортируются файлы.

    • 0

  6. Другим способом избежать кеша, например, вашего css или js, будет изменение .htaccess вашего apache, чтобы предотвратить его кеширование или ограничить время жизни, это поможет вам загружать ваши js реже время и код состояния css = 200, а не 304, что он получает, когда ресурс уже находится в кеше.

    <IfModule mod_expires.c> 
      ExpiresActive On
      ExpiresDefault "access plus 1 seconds"
      ExpiresByType text/html "access plus 1 seconds"
      ExpiresByType image/x-icon "access plus 2592000 seconds"
      ExpiresByType image/gif "access plus 2592000 seconds"
      ExpiresByType image/jpeg "access plus 2592000 seconds"
      ExpiresByType image/png "access plus 2592000 seconds"
      ExpiresByType text/css "access plus 604800 seconds"
      ExpiresByType text/javascript "access plus 86400 seconds"
      ExpiresByType application/x-javascript "access plus 86400 seconds"
</IfModule>

    либо

    <FilesMatch "\.(?i:gif|jpe?g|png|ico|css|js|swf)$">

  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>

</FilesMatch>
    • 0

  7. Если вы используете сервер Apache в Linux , вы можете сделать следующее:

    активировать mod_expire :

        $ sudo a2enmod expires

    измените файл /etc/apache2/apache2.conf и добавьте следующее:

        <IfModule mod_expires.c>
     ExpiresActive On
     #ExpiresDefault "access plus 1 year"    # activar para servidor en producción
     ExpiresDefault "access plus 1 seconds" # activar para servidor en desarrollo
    </IfModule>

    Затем перезапустите сервер Apache:

        $ sudo service apache2 restart

    при этом вы должны разрешить кеш на клиенте. однако вы должны знать, что на рабочем сервере вам следует увеличить значение переменной ExpiresDefault .

    • 0

  8. Другой вариант, который вы можете применить, — это автоматическая версия вашего файла CSS y JS.

    ОПЦИЯ 1:

    Добавьте versión(например , дату последней модификации файла ) в качестве переменной в файл path.

    Так:

    1. Мы создаем функцию, которая получает дату последнего изменения (например: filemtime) файла и объединяет ее как переменную с файлом path.

      <?php
function autoVer($url)
{
  $path = pathinfo($url);
  $ver = '?v='.filemtime($_SERVER['DOCUMENT_ROOT'].$url);
  return $path['dirname'].'/'.$path['basename'].$ver;
}
?>

    2. Затем мы вызываем эту функцию для файлов версии.

      <link rel="stylesheet" href="<?php echo autoVer('/private/css/visual.css'); ?>" />
<script src="<?php echo autoVer('/private/js/visual.js'); ?>"></script>

    Результат будет примерно таким:

    <link rel="stylesheet" href="/private/css/visual.css?v=1492816098" />
<script src="/private/js/visual.js?v=1492816000"></script>

    ВАРИАНТ 2

    Предполагая, что вариант 1 «не всегда работает для вас» и следуя той же строке, мы можем добавить versiónкак часть имени файла и .htaccessпереписав pathих.

    Так:

    1. Мы создаем функцию, которая получает дату последнего изменения (например: filemtime) файла и включает ее как часть имени файла.

      <?php
function autoVer($url)
{
  $path = pathinfo($url);
  $ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url).'.';
  return $path['dirname'].'/'.str_replace('.', $ver, $path['basename']);
}
?>

    2. Затем мы вызываем эту функцию для файлов версии.

      <link rel="stylesheet" href="<?php echo autoVer('/private/css/visual.css'); ?>" />
<script src="<?php echo autoVer('/private/js/visual.js'); ?>"></script>

      Результат будет примерно таким:

      <link rel="stylesheet" href="/private/css/visual.1492816098.css" />
<script src="/private/js/visual.1492816000.js"></script>

    3. Создаем файл .htaccessправило для перевода этих "маршрутов"

      #Regla para archivos versionados
RewriteRule ^(private/(js|css|imgs)/)(.+)\.(.+)\.(js|css|jpg|gif|png)$ $1$3.$5 [L]
    • 0