Pytanie Jak mogę sprawić, aby przeglądarka widziała zmiany w CSS i JavaScript?


Pliki CSS i Javascript nie zmieniają się zbyt często, więc chcę, aby były buforowane przez przeglądarkę internetową. Ale chcę również, aby przeglądarka internetowa widziała zmiany dokonane w tych plikach bez konieczności czyszczenia pamięci podręcznej przeglądarki. Potrzebne jest również rozwiązanie, które dobrze współpracuje z systemem kontroli wersji, takim jak Subversion.


Niektóre rozwiązania, które widziałem, obejmują dodanie numeru wersji na końcu pliku w postaci ciągu zapytania.

Może użyć numeru wersji SVN, aby zautomatyzować to za Ciebie: Numer wersji SVN w ASP.NET Display

Czy możesz określić sposób dołączania Rewizja zmienna innego pliku? To jest w pliku HTML Mogę dołączyć numer wersji w adresie URL do pliku CSS lub JavaScript.

w Książka Subversion mówi o wersji: "To słowo kluczowe opisuje ostatnią znaną wersję, w której ten plik został zmieniony w repozytorium".

Firefox umożliwia również naciskanie CTRL+R aby ponownie załadować wszystko na określonej stronie.

Aby wyjaśnić, szukam rozwiązań, które nie wymagają od użytkownika nic z ich strony.


41
2017-08-06 09:38


pochodzenie




Odpowiedzi:


Zauważyłem, że jeśli dodasz ostatni zmodyfikowany znacznik czasu pliku na końcu adresu URL, przeglądarka poprosi o pliki, gdy zostanie zmodyfikowana. Na przykład w PHP:

function urlmtime($url) {
   $parsed_url = parse_url($url);
   $path = $parsed_url['path'];

   if ($path[0] == "/") {
       $filename = $_SERVER['DOCUMENT_ROOT'] . "/" . $path;
   } else {
       $filename = $path;
   }

   if (!file_exists($filename)) {
       // If not a file then use the current time
       $lastModified = date('YmdHis');
   } else {
       $lastModified = date('YmdHis', filemtime($filename));
   }

   if (strpos($url, '?') === false) {
       $url .= '?ts=' . $lastModified;
   } else {
       $url .= '&ts=' . $lastModified;
   }

   return $url;
}

function include_css($css_url, $media='all') {
   // According to Yahoo, using link allows for progressive 
   // rendering in IE where as @import url($css_url) does not
   echo '<link rel="stylesheet" type="text/css" media="' .
        $media . '" href="' . urlmtime($css_url) . '">'."\n";
}

function include_javascript($javascript_url) {
   echo '<script type="text/javascript" src="' . urlmtime($javascript_url) .
        '"></script>'."\n";
}

20
2017-08-06 09:41



hi grom, próbowałem tej metody. jednak dowiedziałem się, że po uwzględnieniu parametru przeglądarka nie buforowała pliku css. Ładuje plik css za każdym razem, gdy ponownie przeglądam stronę bez jej buforowania. Wykryłem to przez ciągłe wprowadzanie zmian w pliku css, aby sprawdzić, czy plik css jest buforowany przez przeglądarkę. Używam chrome. Czy mogę wiedzieć, jak uczynić przeglądarkę cache w pliku css i ładować tylko przy zmianie parametru? Dzięki. - davidlee
@benmsia, czy sprawdziłeś, jakie nagłówki HTTP są zwracane podczas żądania pliku CSS? - grom


Niektóre rozwiązania, które widziałem, obejmują dodanie numeru wersji na końcu pliku w postaci ciągu zapytania.

<script type="text/javascript" src="funkycode.js?v1">

Możesz użyć numeru wersji SVN, aby zautomatyzować to dla Ciebie włączając słowo LastChangedRevision w twoim pliku html po tym, gdzie v1 pojawi się powyżej. Musisz również skonfigurować swoje repozytorium, aby to zrobić.

Mam nadzieję, że to jeszcze bardziej wyjaśni moją odpowiedź?

Firefox umożliwia również naciskanie CTRL + R aby ponownie załadować wszystko na określonej stronie.


9
2017-08-06 09:52





Moim zdaniem lepiej jest, aby numer wersji był częścią samego pliku, np. myscript.1.2.3.js. Możesz ustawić swój serwer WWW tak, aby zawsze zapisywał w pamięci podręcznej ten plik i dodawał nowy plik js, gdy masz nową wersję.


6
2017-08-06 21:33





Po wydaniu nowej wersji bibliotek CSS lub JS należy wykonać następujące czynności:

  1. zmodyfikuj nazwę pliku, aby zawierał unikatowy ciąg wersji
  2. zmodyfikuj pliki HTML, które odwołują się do biblioteki, aby wskazywały na wersjonowany plik

(Zwykle jest to prosta sprawa dla skryptu wydania)

Teraz możesz ustawić Wygasanie dla CSS / JS na lata w przyszłości. Za każdym razem, gdy zmieniasz zawartość, jeśli referencyjny kod HTML wskazuje na nowy identyfikator URI, przeglądarki nie będą już używać starej kopii w pamięci podręcznej.

Powoduje to zachowanie buforowania, które nie wymaga niczego od użytkownika.


5
2017-08-09 14:37





Zastanawiałem się też, jak to zrobić, gdy znalazłem odpowiedź Groma. Dzięki za kod.

Walczyłem ze zrozumieniem, w jaki sposób kod powinien zostać użyty. (Nie używam systemu kontroli wersji.) Podsumowując, dodajesz sygnaturę czasową (ts), gdy wywołujesz arkusz stylów. Nie planujesz często zmieniać arkusza stylów:

<?php 
    include ('grom_file.php');
    // timestamp on the filename has to be updated manually
    include_css('_stylesheets/style.css?ts=20080912162813', 'all');
?>

5
2017-09-13 16:54



?? funkcja include_css doda ostatni zmodyfikowany znacznik czasu do pliku na końcu adresu URL. Nie jest wymagana kontrola wersji. - grom