项目性能优化--gzip

小熊代码加2024-08-03 15:55

1.项目放到服务器上访问，查看js请求，加载的是js文件；

优化-生成gzip包并优先匹配gzip资源

第一种方式：纯nginx服务器配置

1.nginx配置

# 开启
gzip on;

# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 1;

# 进行压缩的文件类型。javascript有多种形式。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

# http版本，不填不生效
gzip_http_version 1.0;

2.请求，发现请求的是gzip

第二种方式：前端生成gzip

使用compression-webpack-plugin插件 https://www.npmjs.com/package/compression-webpack-plugin

1.vue.config.js中配置

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

module.exports = {
  configureWebpack: {
    plugins: [
      // 启用gzip
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false // 是否删除源文件
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, 
        minChunkSize: 100
      })
    ]
  }
}

deleteOriginalAssets为true时，会删除js文件，访问时会报404

2.build后产生gzip文件

3.需要服务端配置

// 会优先查找静态gzip资源
gzip_static on;