打包时生成gzip文件

@vue/cli3.0.0+

vue.config.js

vue配置

const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
    configureWebpack: config =>{
        if (process.env.NODE_ENV === 'production'){
            return {
                plugins: [
                    new CompressionWebpackPlugin({
                        filename: '[path].gz[query]',
                        algorithm: 'gzip',
                        test: productionGzipExtensions,
                        threshold: 2048,
                        minRatio: 0.8
                    })
                ]
            }
        }
    }
};

build 后的信息

配置项参照webpack

vue-cli2.9.x

修改 config/index.js

image

成功后生成额外的 .gz 文件

image

打开浏览器

如果此时并未生效，可能服务器端没开启gzip

image

nginx gzip 配置

image

刷新浏览器

    # 开启gzip

    gzip on;

    # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩

    gzip_min_length 1k;

    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明

    gzip_comp_level 1;

    # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。

    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 application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

    # 是否在http header中添加Vary: Accept-Encoding，建议开启

    gzip_vary on;

    # 禁用IE 6 gzip

    gzip_disable "MSIE [1-6]\.";

    # 设置压缩所需要的缓冲区大小

    gzip_buffers 32 4k;

    # 设置gzip压缩针对的HTTP协议版本

    gzip_http_version 1.0;

对比

开启 gzip

关闭 gzip