乐趣区

关于javascript:前端优化开启gzip压缩

jiezi

在我的项目中启用压缩后，文件大小缩小了 70% 以上，优化成果非常显著

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

装置依赖 注: 加了版本号, 避免装置太高版本报错 webpack 找不到 

npm i  compression-webpack-plugin@5.0.1 -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

当在申请中呈现如下标识，即开启胜利

退出移动版