双端开启 gzip

webpack 开启 gzip

安装 compression-webpack-plugin
在 config 中设置

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
    plugins: [
        new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp('\\.(js|css)$'),
            threshold: 10240,
            minRatio: 0.8,
            // 是否删除源文件，默认: false
            deleteOriginalAssets: false
        })
    ]
}

其中 minRatio 是压缩比例.比如，一个1024b大小的文件，压缩后大小为768b，minRatio :34 0.75。threshold 是阙值，只有大小超过这个值才会进行压缩

服务端 nginx 开启 gzip

在 nginx 配置文件中添加一下配置

server {
    gzip on;
	gzip_static on;
	gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
	gzip_proxied  any;
	gzip_vary on;
	gzip_comp_level 6;
	gzip_buffers 16 8k;
	gzip_http_version 1.1;
}

当 nginx 开启了 gzip 之后，当客户端请求资源是，服务器会尝试查找并发送 gzip 文件，如果没有或者客户端不支持，则返回源文件

试验

下面是试验对比，首先没有使用 compression 打包出来的

然后是使用了 compression

其中 vendor 切割出来的两个文件进行了压缩，大小有明显的区别（图片中的第三和第四个）