网站性能优化-静态资源gzip压缩处理

[huangshuwei]

前言

随着项目功能增多，打包产生的js\css 越来越大，尤其是移动端H5应用，不仅导致网络传输增大，界面加载速度也会越来越慢。接下来介绍一种降低网络传输，加快页面加载速度的方法：gzip 压缩

gzip 是什么

gzip是一种文件格式和用于文件压缩和解压缩的软件应用程序。后来也用于 HTTP 压缩，是一种用于加速HTML和万维网上其他内容发送的技术。

gzip 原理

客户端和服务器之间是如何通信来支持gzip的呢？通过下图可以清晰的了解，图片来源

网站 gzip 文件如何生成

通过 nginx 生成
nginx 有一个模块是 gzip 模块，然后你只要开启了，nginx就会帮你把数据（静态资源 和 接口数据）进行压缩，然后传入到客户端，客户端来解压。从而节约传输时间，然后网站就能更快的打开。

node 获取其他服务端也可以生成 gzip文件

通过客户端生成
客户端生成有很大的好处，当请求到达站点服务器时就不需要通过服务器进行压缩了，直接拿 zp 文件返回就行。尤其是访问量较大的时候，可以降低服务器压力。

vue 项目中配置生成 gzip

1、项目安装插件 compression-webpack-plugin

yarn add compression-webpack-plugin -D

2、配置插件

// vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
    publicPath: "./",
configureWebpack: {
        devtool: "source-map",
        // 打包gzip压缩
        new CompressionWebpackPlugin({
            filename: '[path][name].gz', 
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.jpg$/,
            threshold: 10240,
            minRatio: 0.8
        })]
    },
}

重新打包项目，原来的js 或者css 文件会再生成一个 .gz 的文件，可以看到js 文件大小缩小了2/3左右，如下

nginx 配置

nginx gzip部分配置

// nginx.config
    	gzip on;
	gzip_min_length 1k;
	gzip_buffers 4 16k;
	gzip_comp_level 5;
	gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	gzip_static on;
	gzip_disable "MSIE [1-6]\.";

验证网站gzip 是否开启成功

只需浏览器（以chrome为例）打开开发模式，点击请求js 文件，“请求标头”包含 Accept-Encoding:gzip 代表浏览器支持gzip。“响应表头”包含Content-Encoding:gzip表示响应内容包含gzip，代表gzip开启成功。

总结

网站通过gzip处理，静态资源降低了2/3 左右，大大降低了网络传输，提升了页面加载速度。总之非常值得使用！

参考

• https://en.wikipedia.org/wiki/Gzip
• https://zhuanlan.zhihu.com/p/24764131
• https://juejin.cn/post/6983486365740564511
• https://juejin.cn/post/6889306089846734862