前端性能优化【vuecli3开启gzip压缩】

1.下载依赖

cnpm install compression-webpack-plugin -D

2.修改vue.config.js

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
    configureWebpack: {
        plugins: [
            new CompressionPlugin({
                test: /\.(js|css)(\?.*)?$/i,//需要压缩的文件正则
                threshold: 10240,//文件大小大于这个值时启用压缩
                deleteOriginalAssets: false//压缩后保留原文件
            })
        ]
    },
};

3.打包

npm run build

4.服务端修改配置

开启 nginx 服务端 gzip性能优化。找到nginx配置文件在 http 配置里面添加如下代码，然后重启nginx服务即可。

http:{ 

      gzip on; 

      gzip_static on;

      gzip_buffers 4 16k;

      gzip_comp_level 5;

      gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 

                 image/gif image/png;

}

5.tomcat开启gzip压缩,切记一点：需要将userSendfile属性进行关闭，设置
userSendfile="false"，并且userSendfile="false"一定要放到最后！！！！！！！！

今天针对tomcat配置了gzip压缩，修改%TOMCAT_HOME%/conf/server.xml 文件

但是测试的时候，发现文件并没有进行压缩，后面又找了一些相关资料，需要将userSendfile属性进行关闭，设置
userSendfile="false"

配置完成之后，经过测试压缩正常，压缩率大约在80%左右，效果显著。
查看是否启动压缩方法：
1、对比服务端与前端的文件大小

 
2、使用浏览器开发者模式，Content-Enconding:gzip 

87K的js文件，压缩后24.7K。