项目启用gzip加速

启用gzip需要前后端都开启

• 前端
  需要用到 compression-webpack-plugin

1. 安装 npm i -D compression-webpack-plugin
2. 以vue-cli3为例子

const CompressionWebpackPlugin = require("compression-webpack-plugin") //引入compression-webpack-plugin
module.exports = {
    //代码
    configureWebpack: {
        plugins:[
            new CompressionWebpackPlugin({
            filename: "[path].gz[query]", //
            algorithm: "gzip",
            test: /\.(js|vue|css|json|txt|html|ico|svg)(\?.*)?$/i,
            threshold: 1024, //当文件大于 1024B 时进行压缩
            minRatio: 0.8, //压缩率
            deleteOriginalAssets: false //压缩完毕是否删除源文件
          })                     
        ]
    }
}

前端配置完毕

• 后端 以tomcat 为例
• 找到 tomcat目录/conf/server.xml 在tomcat监听端口配置项下加入

<Connector port="8080"
        protocol="HTTP/1.1"
        connectionTimeout="20000"
        redirectPort="8443"    
        compression="on"  //新加代码 => 设置压缩为on || off || force 表示强制压缩
        compressionMinSize="2048" //新加代码 => 设置当文件大于此大小时才压缩
        compressableMimeType="text/html, text/xml, text/javascript, application/javascript, text/css, text/plain, text/json" //新加代码 => 设置压缩得文件类型
/>

可能会碰到得问题

• 当前端代码打包后单个文件大于48k时, tomcat 将不会压缩此文件因为可能回影响到服务器性能 默认压缩的文件最大值时48kb
  如果想修改此值需要进入到 tomcat目录/conf/web.xml 手动修改此值大小

//代码
<para-name>sendfileSize</para-name>
<para-value>500</para-value> //修改后 当文件大于500Kb后服务器不会压缩此文件

引用

Vue CLI3 开启gzip压缩
Tomcat 开启gzip