Optimization of front-end performance based on Gruntjs

This article is how to use Gruntjs to make simple front-end performance optimization of the automated processing, I wrote a complete example on GitHub, you can refer to. For Yahoo's front-end optimization rules, please refer to: Best practices for speeding up Your Web Site

Front-end performance of the main image compression, JS and CSS Merge, compression, the files of all static files according to its content and hash, and then the CSS, HTML and other files to replace all the static file name with a new hash. Add CDN URLs to all static content paths, and finally upload all the static files to the seven KN CDN. Let's take a look at the function below.

Image compression

Many pictures, especially PNG images, sometimes contain a large number of meaningless fills, increasing the size of the image. We can compress all images by contrib-imagemin to reduce the size of the image. According to our experience, it is generally possible to compress about 5% to 10%.

JS and CSS files merge compression <p merge JS and CSS can be a lot of reduce HTTP requests, to optimize the performance of the front end. At the same time the CSS and JS files are static files that can be compressed to a very small size. Gruntjs official provided the Contrib-concat,contrib-cssmin, contrib-uglify and other corresponding plug-ins to do the corresponding things. We are here because of the replacement of the file name, using the Usemin plug-in, it will automatically invoke the above several plug-ins, so in our gruntfile.js does not have these 3 plug-in configuration information, but only in the task list called these plug-ins. For details, please refer to: usemin. Static file Cache processing

In order to maximize the browser loading speed, the best way is to let the browser will all the static files to the client, where the cache refers to expire and Cache-control max-age, not last-modified, Because the use of last-modified and if-modified-since will still make the request, but not the update to return 304 status code and Max-age will not make the request, but directly use the local cache. One of the problems with using the cache face is if the file has an update if the cache is cleaned or if the user is allowed to download the latest file. One approach is to add a static file with a version number, such as style.css?v=1.1. This approach can achieve the purpose of clearing the cache, but the maintenance is relatively troublesome, the comparison version number is not how to change, there is no way to determine whether the file is updated. Another option is to hash the contents of the file and then add the hash value to the file name, such as Style.abd1q2.css. This is easy to automate, we use the Yeoman developed Filerev plug-in, it can MD5 the contents of the file, and then add the hash of the operation to the file name, so it is easy to determine whether the file has been modified, At the same time it can be combined perfectly with the usemin.

Substitution of file names after hash processing

After compressing and merging the CSS and JS and Filerev all the static resources, the original file name of the static resources such as HTML, CSS, JS and so on will need to be replaced with the new file name. For example, a reference to CSS and JS in HTML, a reference to a picture in CSS. We used the usemin developed by Yeoman to replace it. It works by looking at the static resources in the files that need to be processed, finding the corresponding files that have been filerev processed in the specified folder, and replacing them with the corresponding files if found. For example, we refer to CSS in code as follows: <link type= "Text/css" href= "style.css"; Usemin will look for files similar to STYLE.ABD1Q2.CSS under the specified folder, and if found, will automatically replace our CSS reference code with the following: <link type= "Text/css" href= "Style.abd1q2.css" >. For details, please refer to: usemin.

Replacement of CDN Paths

References to all static resources in the development process are directed to the project's own domain. If you want to use a CDN, you need to refer to the CDN domain for all static resources. The Gruntjs plug-in CDN is used here to globally replace all static resources.

Upload static resources to CDN

When the above steps are complete, you can upload all the static files to the CDN. Seven cattle officially provided the Nodejs SDK, but it seems to be more difficult to use. Our example uses a third-party developed Nodejs module QN, very simple, see: QN. My practice is to upload images and css/js in the same directory, respectively, to add different prefixes to the picture and Css/js. Because seven cattle is not provided in the inside to build the folder. See Cdn.js file for details.

Usage

1. Grunt Build
2. Grunt Upload