Vue项目开启代码压缩

前端项目配置代码压缩

一、前端项目配置

1.webpack配置

需安装依赖：

js 复制代码

npm install compression-webpack-plugin@^9.0.0 --save-dev

webpack进行配置

js 复制代码

module.exports = defineConfig({
  productionSourceMap: false,
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    client: {
      overlay: false,
    },
  },
  configureWebpack: {
    plugins: [
      // Gzip 压缩配置
      new CompressionPlugin({
        filename: "[path][base].gz", 
        algorithm: "gzip", 
        test: /\.(js|css|html|json|txt|svg|ico|ttf)$/i,
        threshold: 10240, 
        minRatio: 0.8,
        deleteOriginalAssets: false, // 保留原始文件
      }),
    ],
  }
});

2.Vite也类似

安装依赖

复制代码

npm install vite-plugin-compression -D

进行配置

js 复制代码

// vite.config.js 
import viteCompression from 'vite-plugin-compression'; 

export default {
  plugins: [
    viteCompression({
      algorithm: 'gzip',      // 可选 'brotliCompress' 生成 .br
      ext: '.gz',            // 扩展名
      threshold: 10240,      // 大于10KB的文件才压缩
      deleteOriginFile: false // 保留原始文件
    })
  ]
}

二、服务器进行配置

1.caddy配置

ruby 复制代码

example.com {
    root * /path/to/dist
    precompressed gzip br    # 自动检测 .gz/.br 预压缩文件
    encode {                 # 动态压缩备用方案（当预压缩文件不存在时）
        gzip 6               # 压缩级别 1-9（6 是平衡值）
        br                   # 启用 Brotli 动态压缩
    }
    header {
        # 强制启用压缩传输
        ?Accept-Encoding     Vary
    }
    file_server
}

预压缩构建后检查 /dist 目录，应看到 .gz 文件动态压缩由服务器配置比较吃服务器带宽

在 Caddy 2.5+ 中，precompressed 指令会自动 禁用同类型动态压缩 （例如已有 .gz 文件时不会执行 gzip 动态压缩）

2.nginx配置

具体配置如下

登录服务器在nginx.conf添加gzip配置

一般是在http里面加，也可以在某个server里加

打开本项目的前端服务器配置文件，比如 nginx.conf文件

js 复制代码

http {
	#...其他配置

	##
	# Gzip Settings
	##
    
	##表示开启gzip压缩
	gzip on;

	 gzip_vary on;
    ##定义了应该压缩哪些类型的连接，这里是全部
	 gzip_proxied any;
    ##设置 Gzip 的压缩级别。压缩级别的值可以从 1 到 9
	 gzip_comp_level 6;
    ##设置用于压缩的缓冲区的大小和数量。这个指令设置了 16 个缓冲区，每个大小为 8 千字节
	 gzip_buffers 16 8k;
    ##定应该启用 Gzip 压缩的 HTTP 协议版本
	 gzip_http_version 1.1;
    ##指定应该被压缩的 MIME 类型
	 gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}

三、查看是否配置成功

我们可以看下响应信息，如果有Content-Encoding: gzip这个响应头表明Gzip压缩已经启用了