在 Vue 3 项目中使用 yarn build 打包时启用 Gzip，可以通过以下步骤实现：
1. 安装 compression-webpack-plugin
首先，使用 yarn 安装 compression-webpack-plugin，这个插件可以在 Webpack 打包时生成 Gzip 文件。
- yarn add compression-webpack-plugin --dev
2. 配置 vue.config.js
在项目根目录下找到 vue.config.js 文件（如果没有这个文件，则需要创建一个），然后配置 compression-webpack-plugin。
- const CompressionWebpackPlugin = require('compression-webpack-plugin');
- module.exports = {
- configureWebpack: {
- plugins: [
- new CompressionWebpackPlugin({
- filename: '[path][base].gz', // 输出的文件名
- algorithm: 'gzip', // 压缩算法
- test: /\.(js|css|html|svg)$/, // 需要压缩的文件类型
- threshold: 10240, // 只处理大于10KB的文件
- minRatio: 0.8, // 最小压缩比达到0.8时才压缩
- deleteOriginalAssets: false, // 是否删除原始文件
- }),
- ],
- },
- };
VITE项目看下边！！！
3. 打包项目
配置完成后，运行以下命令打包项目，并生成 Gzip 文件：
- yarn build
4. 配置服务器支持 Gzip
生成 Gzip 文件后，确保服务器配置正确以提供 Gzip 压缩的文件。例如：
Nginx：可以通过 nginx.conf 配置 gzip on; 来启用 Gzip 支持。
Node.js (Express)：可以使用 compression 中间件处理 Gzip 请求。
这样，项目打包时就会生成 Gzip 压缩文件，并且服务器可以直接提供这些压缩后的文件给客户端，提升加载速度。
在 Vue 3 项目中使用 Vite 作为构建工具时，配置 Gzip 压缩通常是通过插件来实现。
以下是如何在 Vite 项目中启用 Gzip 压缩的步骤：
1. 安装 vite-plugin-compression
首先，安装用于 Gzip 压缩的 Vite 插件 vite-plugin-compression：
- yarn add vite-plugin-compression -D
- ##或者
- npm install vite-plugin-compression -D
2. 配置 vite.config.ts
接下来，在 vite.config.ts 文件中引入并配置该插件。你可以按照以下步骤修改配置文件：
- import { defineConfig } from 'vite';
- import vue from '@vitejs/plugin-vue';
- import viteCompression from 'vite-plugin-compression';
- export default defineConfig({
- plugins: [
- vue(),
- viteCompression({
- // 配置 gzip
- verbose: true, // 输出压缩结果到控制台
- disable: false, // 是否禁用，默认为 false，设置为 true 关闭压缩
- threshold: 10240, // 体积大于 threshold 才会被压缩，单位是字节，默认 10kb
- algorithm: 'gzip', // 压缩算法，默认为 gzip
- ext: '.gz', // 生成的压缩包后缀
- }),
- ],
- });
3. 解释配置项
verbose: true：是否在构建时输出压缩结果到控制台。
disable: false：可以根据需要动态开启或关闭压缩，通常设置为 false。
threshold: 10240：设置文件大小超过多少字节才进行压缩，默认是 10KB。
algorithm: 'gzip'：压缩算法，通常是 gzip，你也可以选择 brotliCompress 来使用 Brotli 压缩。
ext: '.gz'：生成的压缩文件的扩展名，可以根据需要修改。
4. 打包完成后，你的输出目录（通常是 dist）中会包含 .gz 压缩文件。
5. 配置服务器支持 Gzip
虽然生成了 Gzip 文件，但是你还需要在服务器（例如 Nginx、Apache）中配置正确的 Gzip 支持，这样服务器才会将 .gz 文件传递给客户端。
配置Nginx启用Gzip
1. 打开 Nginx 配置文件
Nginx 的主配置文件通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf，也可能根据安装方式有所不同。
使用文本编辑器打开该文件：
- sudo nano /etc/nginx/nginx.conf
2. 启用 Gzip
在 Nginx 配置文件中，添加或修改以下配置以启用 Gzip 压缩：
- http {
- # 启用 Gzip
- gzip on;
- # 对文件启用 Gzip 压缩的最小文件大小，文件小于该值将不会被压缩
- gzip_min_length 1024;
- # 启用 Gzip 压缩的 HTTP 版本
- gzip_http_version 1.1;
- # Gzip 压缩级别，范围是1到9，数字越大压缩率越高，但占用 CPU 资源更多
- gzip_comp_level 6;
- # 允许 Gzip 压缩的 MIME 类型
- gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
- # 是否压缩响应中的 `Vary` 头字段
- gzip_vary on;
- # 禁用对 IE6 的 gzip 压缩
- gzip_disable "msie6";
- # 压缩响应头
- gzip_proxied any;
- # 不压缩临时文件
- gzip_buffers 16 8k;
- }
gzip_min_length：设置压缩的最小文件大小，单位是字节。一般设置为 1024 字节（1KB），对于小文件启用压缩的收益不大。
gzip_types：设置需要压缩的文件类型，常见的类型如 text/css, application/javascript, application/json 等。可以根据需求增加或减少。
gzip_comp_level：设置压缩级别，取值范围是 1-9，数字越大表示压缩率越高，但会消耗更多的 CPU 资源。通常设置为 5-6 比较平衡。
gzip_vary：启用 Vary: Accept-Encoding 头，确保代理服务器可以为支持 Gzip 的客户端提供压缩后的文件。
gzip_proxied：指定是否启用 Gzip 压缩代理请求的响应。
3. 保存并退出
编辑完成后，保存配置文件并退出文本编辑器。
4. 测试 Nginx 配置
在重新加载 Nginx 服务之前，建议先测试 Nginx 配置文件是否正确：
- sudo nginx -t
如果配置没有错误，将会显示类似如下的输出：
- nginx: configuration file /etc/nginx/nginx.conf test is successful
5. 重新加载 Nginx 服务
测试通过后，重新加载 Nginx 服务以使配置生效：
- sudo systemctl reload nginx
6. 验证 Gzip 是否启用
可以使用浏览器开发者工具的 "Network" 选项卡，查看请求的响应头是否包含 Content-Encoding: gzip，来验证 Gzip 是否启用了。
或者在终端使用 curl 发送请求并查看响应头：
- curl -I -H "Accept-Encoding: gzip" http://your-domain.com
如果 Gzip 正常工作，响应头应该会包含 Content-Encoding: gzip。
