Dodaj wersję, która wskazuje, że buforowana stara wersja pliku statycznego jest aktualna, aby uniknąć użycia

Ponieważ przednia scena jest długa, jeśli chcesz zobaczyć tylko program, pomiń go.

Środowiska

Visual Studio

• Visual Studio 2019

Rdzeń ASP.NET

• 3.1 (strona razor, MVC)

Buforowanie plików na stronach sieci Web — informacje

Podczas odwiedzania strony sieci Web, oprócz kodu HTML, .js plików (Javascript), .css plików (arkusze stylów) i plików obrazów są pobierane do klienta w celu wyświetlenia i wykonania. Jednak niektóre pliki obrazów są duże, a pobieranie ich za każdym razem może być kosztowne. Ponadto .js pliki i pliki .css są często używane na innych stronach i nie ma potrzeby ich pobierania za każdym razem. Pliki te mogą zostać tymczasowo zapisane w przeglądarce po pobraniu. To się nazywa buforowanie.

Jeśli plik jest buforowany, na przykład kod HTML jest pobierany z serwera sieci Web podczas odwiedzania tej samej strony. Inne pliki są wyświetlane i uruchamiane przy użyciu lokalnie przechowywanych plików bez pobierania ich, jeśli istnieje pamięć podręczna. Zmniejsza to obciążenie serwera i umożliwia klientowi wyświetlanie strony z dużą prędkością bez zużywania przepustowości komunikacji.

Problemy spowodowane buforowania

To, czy pliki umieszczone na serwerze i pliki w pamięci podręcznej są takie same, zależy zazwyczaj od ścieżki pliku opisanej w formacie HTML. Ta sama ścieżka pliku jest w zasadzie buforowane pliki. (Mogą istnieć inne warunki, ale ścieżka pliku jest pewna)

Poniżej przedstawiono przykład ścieżki pliku. Obowiązują parametry atrybutu href i src.

<!-- スタイルシート (.css) -->
<link rel="stylesheet" href="/css/site.css" />

<!-- 画像ファイル -->
<img src="/image/sample.png" alt="サンプル画像" />

<!-- JavaScript (.js) -->
<script src="/js/site.js"></script>

Jednak to zachowanie może być problemem.

Jeśli na przykład użytkownik ma plik JavaScript w wersji 1 przy pierwszym dostępie do niego, plik JavaScript w wersji 1 jest buforowany. Następnie serwer publikuje plik JavaScript w wersji 2. Jeśli ścieżka pliku JavaScript była taka sama, gdy użytkownik odwiedził tę samą stronę, można użyć pliku Javascript w wersji 1 buforowanego bez pobierania pliku JavaScript w wersji 2 serwera. Może to spowodować wady, których opinia publiczna nie zamierza.

W tej chwili myślę, że często widzisz "Spróbuj usunąć pamięć podręczną" jako jeden z środków zaradczych po stronie użytkownika, ale może to być przyczyną.

Jak radzić sobie z problemami z pamięcią podręczną po stronie serwera

Jak wspomniano powyżej, to, czy pliki w pamięci podręcznej są używane, zależy w dużej mierze od ścieżki pliku (ADRESU URL).

W związku z tym podczas aktualizowania pliku, można wymusić jego pobranie nowego pliku, zmieniając nazwę pliku.

Na przykład, jeśli plik w wersji 1

<link rel="stylesheet" href="/css/site.css" />

Kiedy plik został zaktualizowany w wersji 2

<link rel="stylesheet" href="/css/site2.css" />

Site2 jest .css po stronie klienta.

Jeśli jednak zrobisz to ręcznie, może to być uciążliwe i podatne na błędy, aby zmienić ścieżki i zmienić nazwę plików fizycznych.

Dodawanie parametrów kwerendy do ścieżki pliku

Sposób działania sieci Web umożliwia dodawanie parametrów kwerendy za pomocą kombinacji klawiszy i wartości po ścieżce. W mechanizmie buforowania klienta, nawet jeśli pliki fizyczne są takie same, jeśli parametry kwerendy są różne, zostaną one rozpoznane jako oddzielne pliki. Parametry kwerendy są wartościami, które nie mają znaczenia, jeśli nie ma celu użycia, nawet jeśli są dodawane.

Parametry kwerendy można dołączać do ścieżki w następującym formacie:

<!-- クエリパラメータなし -->
<link rel="stylesheet" href="/css/site.css" />

<!-- クエリパラメータあり -->
<link rel="stylesheet" href="/css/site.css?key=value" />

Za pomocą tego mechanizmu należy zmienić ścieżkę, ale nie trzeba zmieniać nazwy pliku fizycznego.

Automatyczne dodawanie parametrów zapytania w programie (zły przykład)

Automatycznie dodając ten parametr zapytania w programie, Nie trzeba ręcznie zmieniać ścieżki pliku, jeśli zmienisz plik statyczny.

Łatwym przykładem jest dodanie bieżącego czasu do wykonywania zapytań o parametry, gdy użytkownik uzyskuje dostęp do strony sieci Web. To bardzo proste, ponieważ myślę, że można pisać w jednym wierszu w dowolnym języku programowania. Myślę, że przykład generacji wygląda następująco:

<link rel="stylesheet" href="/css/site.css?20210223120000" />

Ma to jednak tę wadę, że przewaga buforowania jest w ogóle tracona. Ścieżka zmienia się za każdym razem, gdy odwiedzasz stronę sieci Web, nawet jeśli jest to ten sam plik, co poprzedni. Ponieważ jest rozpoznawany jako oddzielny plik, pliki css są pobierane z serwera za każdym razem. Starsze wersje plików nie będą już używane, ale jest to takie samo, jak po prostu nie za pomocą funkcji buforowania.

ASP.NET kontroli wersji przez dodanie parametrów kwerendy w programie Core

Alcause nie ma pre ASP.NET Core zapewnia standardowe rozwiązanie tego problemu buforowania.

Wystarczy dodać atrybut do tagu, który opisuje asp-append-version="true" ścieżkę pliku w następujący sposób:

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
<img src="/image/sample.png" asp-append-version="true"/>
<script src="~/js/site.js" asp-append-version="true"></script>

Jeśli rzeczywiście odwiedzasz stronę po jej opublikowaniu w sieci Web, rozwinie się ona w następujący sposób:

<link rel="stylesheet" href="/css/site.css?v=S2ihmzMFFc3FWmBWsR-NiddZWa8kbyaQYBx2FDkIoHs" />
<img src="/image/sample.png?v=Z0tUqQmLt_3L_NSzPmkbZKxL8cMxglf08BwWb5Od5z4" />
<script src="/js/site.js?v=dLGP40S79Xnx6GqUthRF6NWvjvhQ1nOvdVSwaNcgG18"></script>

Losowy ciąg jest dołączany, ale nie zmienia to za każdym razem, gdy jest dokonywany dostęp. Ten ciąg jest wartością mieszania i jest generowany na podstawie zawartości pliku, do którego istnieje odwołanie. W związku z tym ten sam ciąg jest generowany tak długo, jak zawartość pliku nie zmieniają. Jeśli zawartość pliku ulegnie zmianie, zostanie on zmieniony na nowy ciąg.

Gwarantuje to, że buforowane pliki są preferowane, ponieważ jeśli pliki są takie same, ścieżki są takie same. Po zaktualizowaniu pliku ścieżka zmienia się, dzięki czemu można pobrać i użyć nowego pliku.

Nawiasem asp-append-version="true" mówiąc, ten atrybut jest standardowy tylko dla plików statycznych umieszczonych w folderze wwwroot. Należy zauważyć, że losowe ciągi nie są rozwijane po ustawieniu na inne pliki.

Przykładowy program o przykładowym programie

Domyślny szablon projektu .js asp-append-version szablonie witryny. witryna.css nie asp-append-version ma do niej dołączonego.

Przykładowy program _Layout.cshtml dodaje witrynę.js i asp-append-version witrynę.css pliku. Dodajemy również tagi img jako asp-append-version punkt odniesienia.