前端优化,开启gzip压缩

在项目中启用压缩后，文件大小减少了70%以上，优化效果十分明显

Nginx 服务器开启 gzip，会将静态资源在服务端进行压缩，压缩包传输给浏览器后，浏览器再进行解压使用，这大大提高了网络传输的效率，尤其对 js，css 这类文本的压缩，效果很明显。

安装依赖 注:加了版本号,防止安装太高版本报错webpack找不到

npm i  [email protected] -D

修改 vue.config.js 配置

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
 
module.exports = {
 ...
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
            threshold: 10240, // 归档需要进行压缩的文件大小最小值，这里是10K以上的进行压缩
            deleteOriginalAssets: false // 是否删除原文件
          })
        ]
      }
    }
  }
}

打包后查看js文件

所有文件都被压缩了三分之二以上

在Nginx服务器也要做相应的配置

# 开启|关闭 gzip。
gzip on|off;
# 文件大于指定 size 才压缩，以 kb 为单位。
gzip_min_length 10;
# 压缩级别，1-9，值越大压缩比越大，但更加占用 CPU，且压缩效率越来越低。
gzip_comp_level 2;
# 压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
# 开启后如果能找到 .gz 文件，直接返回该文件，不会启用服务端压缩。
gzip_static on|off
# 是否添加响应头 Vary: Accept-Encoding 建议开启。
gzip_vary on;
# 请求压缩的缓冲区数量和大小，以 4k 为单位，32 为倍数。
gzip_buffers 32 4K;

注：遇到服务端开启gzip后，并没有生效的问题，发现是nginx配置压缩文件类型时 application/x-javascript，如果是这样的写法则并不会生效。

JavaScript的MIME类型通常为“application/x-javascript”, 非IE的浏览器认“application/javascript”,

所以在上述配置中 application/javascript 和 application/x-javascript 并用，可以解决该问题。

然后重启nginx服务
systemctl restart nginx.service

当在请求中出现如下标识，即开启成功