Cache Advanced Processing: Automatically add version numbers to Gulp-based front-end static files

As shown above, in the development of Web front-end projects, caching is a difficult point, this is Mu-online millet engineer Liu Yan light ppt on the opening of a passage, very classic, the cache is interested strongly recommend everyone to see, Link: Front-End caching those things.

Let me talk about the process of caching.

Stage One: Do not handle

In the beginning of the Web front-end development, the cache is not in a muddle, the first project does not have any cache processing, neither add <meta> cache tags in the. html file

Phase two: Manually adding version numbers

One of the ways to quickly upgrade yourself in this area of software is to learn to analyze other people's code, and in the process, I've found that a lot of people will add a "ver=0.01" identifier after the referenced JS and CSS file, as shown in the following figure.

What the hell is this? So Baidu, originally this is the version number, so that you can solve the issue of version number, each time the file is updated, you should add or upgrade the version number after the filename. When the browser loads the page, it will compare the files in the cache with the files in the server, for example, for main.min.css this file, first the browser will launch a request to the server, I need "main.min.css?ver=0.02" this file, The resource in my local cache is "MAIN.MIN.CSS" and it is not up to date. The server tells the browser that the filename has changed and that the resource needs to be downloaded again from the server. Of course it's just a figurative description. The real process is related to etag parameters, and interested children can find the corresponding data.

Phase III:. html file

For phase two, although it is already possible to basically deal with the problem of caching, it is far from enough. Because in the rapid iterative software development, not only JS and CSS files need to be updated, the. html file also needs to be updated, so what to do. Add a version number to the. html file? If there are 10 projects referencing the same down.html page, down.html page update, then is not all of these 10 projects have to update the down.html version number, which is obviously unscientific, and <meta> Caching tags can solve this problem.

In the public service project I maintained, I added the header of each HTML file:

<meta http-equiv= "Cache-control" content= "No-cache" >

So, all of the. html I don't need to think about caching, anyway, as long as the. html file on the server is updated, the browser should download the latest. html file.

Phase four: Automatically add version numbers to the front-end static files based on Gulp

Phase Two plus phase three approach, has been able to basically deal with front-end caching problems, but still not convenient, first of all, all the. html page does not cache, will inevitably affect the CHP (cache hit rate) value, for CHP introduction and analysis, I still recommend everyone to see: front-end caching those things.

Next I began to search the process, the front-end Automation tools automatically add version number of articles and blog check a lot, speak the most clearly and I measured can be used in these two articles:

Add a version number to a reference to a page by using Gulp-rev-append

Gulp a detailed introductory tutorial

Front-end automation tools, the most recommended online is grunt and gulp, and Gulp is better than grunt, so chose Gulp.

As for the specific steps, the above two articles have been very detailed and clear, I will not swim the fish.

Finally upload the screenshot before and after I generated the version number:

Before build:

After build:

So for caching in front-end development, the best approach is to add <meta http-equiv= "Cache-control" content= "No-cache" > tags to index.html (that is, your home page). Other static files with update requirements are automatically added with Gulp version number. This does the front-end page performance is the best.

January 10, 2017 added:

<meta> Cache label support is limited and currently requires a server to set up. (to be added)