在vue-cli4开发环境下完成项目开发后，我们在编译部署项目的时候可以使用compression-webpack-plugin对打包后的js、css等文件进行gzip压缩，以提升项目加载速度

开发环境搭建可参考

node开发环境搭建 vue-cli4开发环境搭建

使用流程

引入compression-webpack-plugin

npm i -D compression-webpack-plugin

在 vue.config.js中配置 （vue-cli4脚手架创建的项目默认没有这个文件，自己在项目根目录下添加这个文件即可）

//Vue config
const CompressionPlugin = require('compression-webpack-plugin');//引入compression-webpack-plugin

module.exports = {
    //公共文件路径
    publicPath: '/',
    //静态资源(js、css、img、fonts)目录
    assetsDir: 'static',
    //代码检测
    lintOnSave: false,
    //sourceMap
    productionSourceMap: false,
    //代理
    devServer:{
        proxy:{
            '/api':{
                target: "http://192.168.31.247:8012",
                pathRewrite: {
                    '^/api': ''
                }
            }

        }
    },
    //css处理
    css: {
        extract: process.env.NODE_ENV === "development" ? false : true
    },
    configureWebpack:config =>{//打包时对js/css文件进行压缩
        if(process.env.NODE_ENV === 'production'){//生产环境
            config.plugins.push(
                new CompressionPlugin({
                    /* [file]被替换为原始资产文件名。
                       [path]替换为原始资产的路径。
                       [dir]替换为原始资产的目录。
                       [name]被替换为原始资产的文件名。
                       [ext]替换为原始资产的扩展名。
                       [query]被查询替换。*/
                    filename: '[path].gz[query]',
                    //压缩算法
                    algorithm: 'gzip',
                    //匹配文件
                    test: /\.js$|\.css$|\.html$/,
                    //压缩超过此大小的文件,以字节为单位
                    threshold: 10240,
                    minRatio: 0.8,
                    //删除原始文件只保留压缩后的文件
                    //deleteOriginalAssets: false
                })
            )
        }
    }

}

按上述流程配置之后，运行 npm run build 编译打包项目

npm run build

可以看到，在打包后的静态文件中，可以看到有很多 .gz 的同名文件，这个就是gzip压缩后的文件，基本上可以压缩 3-5倍左右

最后，在部署的时候，我们需要在nginx上开启gzip

    gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

前端不会配置的可以咨询一下后端或者运维同事去做配置