一、compression-webpack-plugin

使用该插件可配置静态资源打包大小，进而可优化静态资源的加载速度!

compression-webpack-plugin 插件地址

1、安装

尽可能安装低版本插件，安装高版本，可能会引起不必要的错误!

1
cnpm install compression-webpack-plugin@1.1.11 --save-dev
2、配置

文件位置 ==vue.config.js==

2.1 引入插件实例
1
const CompressionPlugin = require('compression-webpack-plugin');
2.2 配置压缩文件类型
1
const productionGzipExtensions = ['js', 'css', 'img']; //压缩的文件类型
2.3 插件实例配置选项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
configureWebpack: {
    plugins: [
        new CompressionPlugin({
        	//[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
        	filename: '[path].gz[query]', // 提示compression-webpack-plugin@3.0.0的话asset改为filename
        	//可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
        	algorithm: 'gzip',
        	//所有匹配该正则的资源都会被处理。默认值是全部资源。
        	test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        	//只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
        	threshold: 51200, // 5KB
        	//只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
        	minRatio: 0.8
        }),
    ],
    
}
3、nginx配置

nginx Gzip 配置详解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
gzip on;
#不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1k;
#buffer，就是，嗯，算了不解释了，不用改
gzip_buffers 4 16k;
#用了反向代理的话，末端通信是HTTP/1.0,默认是HTTP/1.1
#gzip_http_version 1.0;
#压缩级别，1-10，数字越大压缩的越好，时间也越长，看心情随便改吧
gzip_comp_level 2;
#进行压缩的文件类型，缺啥补啥就行了，JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式application/javascript 就行了
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
#跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary off;
#IE6对Gzip不怎么友好，不给它Gzip了
gzip_disable "MSIE [1-6]\.";