Analisis ringkas tentang masalah caching kemasukan dalam Vue (perkongsian kod)

Dalam artikel sebelumnya "Mekanisme cache HTTP yang anda patut ketahui (penjelasan kod terperinci) ", kami mengetahui tentang mekanisme cache HTTP. Artikel berikut akan membantu anda memahami masalah caching entri dalam Vue. Mari kita lihat.

Mengenai strategi caching web, saya mengesyorkan artikel ini: Mekanisme caching HTTP

sering digunakan semasa pembangunan Kami menghadapi masalah. Kami mengawal masalah caching berdasarkan nombor versi Apabila kami mengeluarkan versi baharu dan menggunakan nombor versi, kami mendapati bahawa nombor versi yang dipetik dalam html adalah nombor versi lama fail html telah dicache , banyak kali kami sediakan untuk melarang html fail daripada dicache, tetapi ia masih dicache.

<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" />

Mengapa kita kadangkala menetapkan f351569b22943d200c75ad4268539142 untuk melarang caching, tetapi halaman kita masih dicache?

Kerana kami hanya menumpukan pada klien, tetapi mengabaikan tetapan bahagian pelayan Jika nginx bahagian pelayan menetapkan Cache-control, ia akan menimpa set Cache-control dalam halaman kami, jadi kadangkala Kami akan mendapati. bahawa walaupun css dan js telah ditambah dengan nombor versi, fail css dan js lama masih dirujuk dalam fail html

Sebaik sahaja kami menggunakan kemas kini penuh, iaitu Sebelum setiap versi dikeluarkan, fail js dan css sebelumnya akan dipadamkan, kemudian index.html tidak akan dapat memuatkan js, css sebelumnya dan beberapa fail sumber statik lain, dan dan js tidak akan dimuatkan dan skrin putih akan muncul. css

Disebabkan mekanisme caching pelayan,

dan css lama tidak akan dipadamkan serta-merta. Dalam kes ini, anda perlu bekerjasama dengan pelayan untuk menyediakan cache, mengambil js sebagai contohnginx

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;
}

Anda hanya boleh menetapkan satu no-cache,no-store

Pelayar akan cache, tetapi apabila memuat semula halaman atau membukanya semula, ia akan meminta pelayan, dan pelayan boleh bertindak balasno-cache Jika fail ditukar, ia akan Bertindak Balas304200

Pelayar tidak cache, menyegarkan halaman memerlukan muat turun semula halamanno-store

Disyorkan pembelajaran:

tutorial vue.js

Atas ialah kandungan terperinci Analisis ringkas tentang masalah caching kemasukan dalam Vue (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!