webpack优化系列二：Vue配置compression-webpack-plugin实现Gzip压缩

gzip压缩：

HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。
简单来说，gzip是一种压缩技术。

webpack其他相关给、推荐
一：webpack优化相关
1：webpack优化系列一：webpack不同环境打包配置
2：webpack优化系列二：Vue配置compression-webpack-plugin实现Gzip压缩
3：webpack优化系列三：vue子目录路径更改—publicPath
4：webpack优化系列四：vue打包后生成的chunk-vendors文件过大,利用SplitChunks插件，分离chunk

为何要使用gzip压缩?

打包的时候开启gzip可以很大程度减少包的大小，页面大小可以变为原来的30%甚至更小，非常适合于上线部署。
更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验

为什么gzip压缩后页面加载速度提升

浏览器向服务器发出请求，并且在请求头中声明可以使用gzip的编码格式，服务器接受到请求之后，读取压缩后的文件，服务器直接返回给浏览器gzip格式的文件，浏览器进行解压缩，这样以来就节省了服务器压缩的时间

需求实现

1.安装依赖

cnpm i -D compression-webpack-plugin

2.修改vue.config.js配置

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProdOrTest = process.env.NODE_ENV !== 'development'
module.exports = {
    productionSourceMap: false,// 设为false，既可以减少包大小，也可以加密源码
    transpileDependencies: ['element-ui'],//指定某个库在打包的时候需要编译
    chainWebpack(config) {
        config.plugins.delete('prefetch');//默认开启prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个功能模块
        if (isProdOrTest) {
            // 对超过10kb的文件gzip压缩
            config.plugin('compressionPlugin').use(
                new CompressionWebpackPlugin({
                    test: /\.(js|css|html)$/,// 匹配文件名
                    threshold: 10240,
                })
            );
        }
    }
}

3.执行命令：npm run build

如图则开启Gzip压缩成功

4.配置nginx

服务端 Nginx 需开启 gzip_static 功能;
在nginx.conf的server模块中加入以下代码:

server{
    //开启和关闭gzip模式
	gzip on;
	//gizp压缩起点，文件大于2k才进行压缩;设置允许压缩的页面最小字节数，页面字节数从header头得content-length中进行获取。 默认值是0，不管页面多大都压缩。建议设置成大于2k的字节数，小于2k可能会越压越大。
	gzip_min_length 2k;
	// 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
	gzip_buffers 4 16k;
	// 设置gzip压缩针对的HTTP协议版本
	gzip_http_version 1.0;
	// gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
	gzip_comp_level 2;
	//进行压缩的文件类型
	gzip_types text/plain application/javascript text/css application/xml;
	// 是否在http header中添加Vary: Accept-Encoding，建议开启
	gzip_vary on;
}

5.资源发布到服务器

访问时，通过抓包可看到 请求 和 回复 里都带有gzip标记

以csdn网站为例

6：检测网页gzip压缩是否成功

可借用如下工具：链接

以csdn网站为例

可能问题

报错现象

如图，报错：Cannot read property ‘tapPromise’ of undefined

报错原因

compression-webpack-plugin版本问题，不可以使用最新版本，需指定版本下载

报错解决

先执行卸载命令->npm uninstall compression-webpack-plugin
执行安装命令->npm i compression-webpack-plugin@5.0.1