How to solve the cache problem of h5, vue, uniapp and other items

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.

  1. Node cache

    For website applications that need to be accelerated, the corresponding static resources are cached on the server through memory cache + disk cache.

  2. 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
}

Keywords: html5 Vue css JaveScript

Added by doa24uk on Tue, 01 Feb 2022 21:47:26 +0200