前端优化之Gzip

Gzip压缩可以减小打包后的文件体积，从而提高网站加载速度。

使用

首先介绍webpack的配置方式：

// 安装
yarn add compression-webpack-plugin -D

// vue.config.js配置
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
    // ...
    configureWebpack:{
        plugins: [new CompressionPlugin({
            algorithm: 'gzip',
            test: /\.js$|\.html$|\.css$/,// 需要压缩的文件类型
            filename: '[path].gz[query]',
            minRatio: 1,// 最小压缩比率，官方默认0.8
            threshold: 10240,// 以字节为单位压缩超过此大小的文件
            // 是否删除原有静态资源文件，建议false，还保留源文件
            // 以防.gz文件访问不了的时候，还可以访问源文件双重保障
            deleteOriginalAssets: false
        })]
    }
}

vite使用：

// 安装
yarn add vite-plugin-compression -D

// vite.config.js配置
import viteCompression from 'vite-plugin-compression';

export default defineConfig({ 
    plugins: [viteCompression()] 
});

可以看出压缩后的体积减少了很多

接下来还需要配置nginx

server {
    gzip on; # 开启gzip压缩
    gzip_min_length 4k; # 小于4k的文件不会被压缩，大于4k的文件才会去压缩
    gzip_buffers 16 8k; # 处理请求压缩的缓冲区数量和大小，比如8k为单位申请16倍内存空间；使用默认即可，不用修改
    gzip_http_version 1.1; # 早期版本http不支持，指定默认兼容，不用修改
    gzip_comp_level 2; # gzip 压缩级别，1-9，理论上数字越大压缩的越好，也越占用CPU时间。实际上超过2的再压缩，只能压缩一点点了，但是cpu确是有点浪费。因为2就够用了
    # 压缩的文件类型 MIME类型
    gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/x-woff font/ttf;
    gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，一般情况下建议开启  
}