How to solve the cache problem of h5, vue, uniapp and other items
When we redevelop web projects, we often encounter the modification of static files such as css, js and html, which are deployed to the server. When you use the browser to access, you find that there is no change, which is static caching. How should we deal with static caching? First, let's understand what static caching is.
Static cache
Static caching generally refers to a caching technology that uses static files / resources such as pictures, js, css, video and html through disk / memory caching to improve resource response and reduce server pressure / resource overhead in web applications. It can be roughly divided into browser cache, server cache, CDN, etc
1, Browser cache
Browser cache, also known as client cache, is commonly used as follows
Add Expires time to html file
<meta http-equiv="Expires" content="60">
2, Server cache
Server side cache can be divided into memory cache and disk cache. Take nginx as an example:
#To cache file suffixes, you can set them below.
http{
proxy_connect_timeout 10; #Timeout for server connection
proxy_read_timeout 180; #After the connection is successful, wait for the response time of the back-end server
proxy_send_timeout 5; #Data return time of back-end server
proxy_buffer_size 16k; #Buffer size
proxy_buffers 4 32k; #Set the number of buffers for each connection as number and the size of each buffer as size
proxy_busy_buffers_size 96k; #After the buffer response function is enabled, when the write buffer reaches a certain size without reading all the responses, nginx will send a response to the client until the buffer is less than this value.
proxy_temp_file_write_size 96k; #Set the size limit for nginx to write data to temporary files every time
proxy_temp_path /tmp/temp_dir; #The storage path of temporary files received from the back-end server
proxy_cache_path /tmp/cache levels=1:2 keys_zone=cache_one:100m inactive=1d max_size=10g; #Set the cache path and other parameters. If the cached data is not accessed within the time specified by the inactive parameter (currently 1 day), it will be removed from the cache
server {
listen 80 default_server;
server_name localhost;
root /mnt/blog/;
location / {
}
#To cache file suffixes, you can set them below.
location ~ .*\.(gif|jpg|png|css|js)(.*) {
proxy_pass http://localhost:9090; # If the resource cannot be obtained from nginx cache, forward the request to the address, obtain the new resource and cache it
proxy_redirect off; #Set the replacement text of the "Location" response header and "Refresh" response header of the back-end server
proxy_set_header Host $host; #Allows you to redefine or add request headers to back-end servers
proxy_cache cache_one; #Specifies the shared memory used for page caching, corresponding to the keys set in the http layer_ zone
proxy_cache_valid 200 302 24h; #Set different cache times for different response status codes
proxy_cache_valid 301 30d;
proxy_cache_valid any 5m;
expires 90d; #time
add_header wall "cache"; #Header setting custom information
}
}
# blog port without nginx cache
server {
listen 9090;
server_name localhost;
root /mnt/blog/;
location / {
}
}
}
3, CDN cache
CDN is the most typical representative of static cache acceleration. CDN technology is not a new technology. It is a static cache acceleration technology based on traditional web cache technologies such as nginx, squid and varnish, combined with DNS intelligent resolution.
-
Node cache
For website applications that need to be accelerated, the corresponding static resources are cached on the server through memory cache + disk cache.
-
Precise scheduling
Intelligently analyze and schedule the accessed user ip to realize the access of the nearest cache node. If a CDN server caches www.test Com website data, when someone visits this CDN, they won't pull the data again.
How to solve the problem of static caching
We already know what static cache is, so how should we deal with these caches.
1. Solve browser cache
Add the following code to the head tag of the html file:
<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">
2. Server cache
Remove the relevant code from the server cache
3.CDN cache
CDN caching is a headache. How should we deal with CDN caching.
All static files are time stamped
<script src="https://www.test.com/main.js?v=1623375509210"></script> <link rel="stylesheet" href="./static/index.776c78d1.css?v=1623375509210">
Because all static files need to be time stamped and need to be adjusted every time, you can directly use js code to reference relevant files
function loadScript(src) {
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.src = src + "?v=" + (new Date()).getTime();
oHead.appendChild(oScript);
}
function loadLink(src) {
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += `<link rel="stylesheet" href="${src}?v=${(new Date()).getTime()}">`;
document.getElementsByTagName('head')[0].innerHTML = headHTML;
}
loadScript("./static/js/chunk-vendors.js")
loadScript("./static/js/index.js")
loadScript("./static/css/index.css")
Vue solution cache
When vue cli packages vue files, the static files will have hash value by default. We should first remove the hash value. We just need to be in vue config. JS. This method also uses the same method as uniapp:
module.exports = {
// ... webpack related configuration
filenameHashing: false
}