Vue のエントリ キャッシュの問題 (コード共有) の簡単な分析

前回の記事「知っておきたいHTTPキャッシュの仕組み（詳細コード解説）」では、HTTPキャッシュの仕組みについて学びました。次の記事は、Vue のエントリ キャッシュの問題を理解するのに役立ちます。見てみましょう。

web のキャッシュ戦略については、次の記事をお勧めします: Http Cache Mechanism

開発中に問題が発生することがよくあります。バージョン番号に基づいてキャッシュの問題を制御します。新しいバージョンをリリースしてバージョン番号を使用すると、html で囲まれたバージョン番号が古いバージョンであることがわかります。 #html ファイルがキャッシュされることを禁止するように何度も設定しましたが、それでもキャッシュされてしまうことがあります。

<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache" content="no-cache" />

なぜ時々

3dfc6a0f02a2289f11cf6b82e2110882を設定するのですか?この種のキャッシュの強制禁止は、私たちのページでもまだ行われています。キャッシュされた？

クライアントのみに焦点を当てており、サーバー側の設定は無視しているため、サーバー側の nginx が

Cache-control を設定すると、ページ上の ## 設定が上書きされます。 #Cache-control のため、css と js のバージョン番号が追加されていることがわかりますが、古い は依然として HTML ファイル内で参照されています。 .css および js ファイル 完全更新を使用すると、つまり、以前の

js

と css# は各バージョンの前に削除されます。 ## ファイルがリリースされた場合、index.html は以前の js、css およびその他の静的リソース ファイルをロードできなくなり、新しいjs と css は読み込まれず、白い画面が表示されます。 サーバーのキャッシュ機構により、古いcss

と

jsはすぐには削除されません。この場合、サーバーと連携して削除する必要があります。キャッシュを次のように設定しますnginx例

location / {
    root /home/www/test/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
    add_header Last-Modified $date_gmt;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    if_modified_since off;
    expires off;
    etag off;
}

no-cache,no-store

1つだけ設定できます

no-キャッシュ

ブラウザはキャッシュしますが、ページを更新するか再度開くときにサーバーが要求されます。サーバーは

304 に応答できます。ファイルが変更された場合は、200## に応答します。 no-store ブラウザはキャッシュしないため、ページを更新するにはページを再ダウンロードする必要があります

推奨される学習: vue.js チュートリアル

以上がVue のエントリ キャッシュの問題 (コード共有) の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。