A static resource

　　Includes: except html, CSS, js, also including various images of resources, audio resources, fonts and other resources, due to the limited bandwidth and latency impact, so it is necessary to do some optimization of resources.

　　Note: As of static resources available to compress and add cache to achieve

Second, resource compression

　　Concept: the process of reducing the size of the resource is called the resource compression. There are different compression techniques for different types of resources. This paper summarizes the compressed text resources. That is our web page above code text such as JS, CSS and so on.

Code compression

　　Code text inside a number of run no effect for some, such as extra white space, comments , in a production environment we they may be removed to reduce network traffic bytes.

gulp-uglify compression JS

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const gutil = require('gulp-util');

gulp.task('script', function() {
    gulp.src('src/*.js')
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(uglify())
        .on('error', err=> {
             gutil.log(gutil.colors.red('[Error]'), err.toString()); 
        })
        .pipe(gulp.dest('dist'))
});

To src / script.js example:

SCRIPT1 // 
const. 3 = A; A // 

const = B. 4; B // 

const. 5 = C; C // 

const of arr1 = [A, B, C]; 

for (Item of the let of arr1) {   // iterate arr array 
    console.log (item); // every print
 } 

// test file compression scheme. 

// modify test

After compiling babel, if not compressed, the size of 805 bytes, 468 bytes after compression. gulp-uglify all the code into a single line to remove all spaces, comments.

sourcemap

Code or compile the source code and the code is compressed difference is relatively large, it is difficult to read, debug code that eventually becomes very difficult, you can use sourcemap solve, or to gulp for example, to rewrite the above gulpfile.js:

gulp.task('script', function() {
    gulp.src('src/*.js')
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(uglify())
        .on('error', err=> {
             gutil.log(gutil.colors.red('[Error]'), err.toString()); 
        })
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('dist'))
});

Compression css

　　For example in a gulp, gulp-minify-css css will remove the extra spaces, comments, will also rule the same selector are combined:

gulp.task('style',()=>{
    gulp.src('css/*.css')
        .pipe(minifyCSS())
        .pipe(gulp.dest('dist/css'))
});

Compression ago:

HTML, body { 
    width : 100% ; 
    height : 100% ; 
} / * cassette Related * / 
#red { 
    width : 40px ; 
    height : 40px ; 
    background-Color : Red ; 
} / * Font correlation * / 
#red { 
    font- size : 16px ; 
    font-weight : Bold ; 
}

After compression:

body,html{width:100%;height:100%}#red{width:40px;height:40px;background-color:red;font-size:16px;font-weight:700}

Gzip

　　gzip is a very popular Web resource compression scheme to Node example:

const gzip = require('zlib').createGzip();
const fs = require('fs');
const path = require('path');

const inp = fs.createReadStream(path.join(__dirname,'./file/test.txt')); //830字节
const outp = fs.createWriteStream(path.join(__dirname,'./file/test.txt.gzip')); //345字节

inp.pipe(gzip).pipe(outp);

See detailed API: https://nodejs.org/dist/latest-v8.x/docs/api/zlib.html

Use Gzip compression in the express:

const compression = require('compression')
const express = require('express')

const app = express()
// compress all responses
app.use(compression())

HTTP compression

Header field

To select a compression algorithm to be used, will be used to initiate consultations mechanism between the browser and the server.

The client request header: Accept-Encoding: xxx, xxx specify a list of supported compression algorithms and priority.

Server response headers: Content-Encoding: xxx indicates the compression algorithm used.

---- static front-end performance optimization of resources, resource compression