小洛的前端技术博客Appearance
gzip压缩
TIP
将文本文件（JS、CSS、HTML 等）压缩为更小的.gz 文件，服务器返回时告诉浏览器：“嘿，我给你的是压缩过的文件，你解压一下再用！”
压缩效果
- JS/CSS 文件：通常能压缩 60%-80%
- HTML 文件：压缩率约 70%
- 图片 / 视频：本身已经压缩过，Gzip 效果甚微
性能提升
- 减少网络传输时间
- 降低服务器带宽压力
- 加快页面加载速度（尤其在移动网络环境下）
Vue CLI 项目配置
vue.config.js文件
优化打包体积，在性能方面可以起到优化作用
js
npm i compression-webpack-plugin --save-devnpm i compression-webpack-plugin --save-devjs
const { defineConfig } = require("@vue/cli-service");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = defineConfig({
configureWebpack: (config) => {
if (process.env. NODE_ENV === "production") {
return {
plugins: [
new CompressionWebpackPlugin({
test: /\.js$|\.html$|\.css/, // 压缩文件的后缀
threshold: 10240, // 对超过 1k 的文件进行压缩
deleteOriginalAssets: false, // 保留压缩前文件
}),
],
};
}
},
});const { defineConfig } = require("@vue/cli-service");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = defineConfig({
configureWebpack: (config) => {
if (process.env. NODE_ENV === "production") {
return {
plugins: [
new CompressionWebpackPlugin({
test: /\.js$|\.html$|\.css/, // 压缩文件的后缀
threshold: 10240, // 对超过 1k 的文件进行压缩
deleteOriginalAssets: false, // 保留压缩前文件
}),
],
};
}
},
});Vite 项目配置
同时也出了一个br压缩的插件，可以压缩js、css、html等文件。压缩率比 Gzip 高 15%-20%，现代浏览器都支持
在 vite.config.js 文件中添加以下代码：
js
npm i vite-plugin-compression --save-devnpm i vite-plugin-compression --save-devjs
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import compression from 'vite-plugin-compression';
export default defineConfig({
plugins: [
vue(),
// Gzip压缩配置
compression({
algorithm: 'gzip', // 压缩算法，可选 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw'
ext: '.gz', // 生成的压缩文件扩展名
threshold: 10240, // 只处理大于此大小的文件（字节）
deleteOriginFile: false, // 是否删除原文件
}),
// Brotli压缩配置
compression({
algorithm: 'brotliCompress',
ext: '.br',
threshold: 10240,
}),
],
});import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import compression from 'vite-plugin-compression';
export default defineConfig({
plugins: [
vue(),
// Gzip压缩配置
compression({
algorithm: 'gzip', // 压缩算法，可选 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw'
ext: '.gz', // 生成的压缩文件扩展名
threshold: 10240, // 只处理大于此大小的文件（字节）
deleteOriginFile: false, // 是否删除原文件
}),
// Brotli压缩配置
compression({
algorithm: 'brotliCompress',
ext: '.br',
threshold: 10240,
}),
],
});Nginx 服务器配置
启用 Gzip
nginx
# nginx.conf
http {
# 开启Gzip
gzip on;
gzip_vary on; # 告诉客户端服务器支持多种压缩格式
# 只压缩超过1KB的文件
gzip_min_length 1024;
# 压缩级别（1-9），9为最高压缩率，但消耗更多CPU
gzip_comp_level 6;
# 压缩类型
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# 不压缩ie6及以下版本
gzip_disable "msie6";
# 优先使用Brotli压缩（如果同时存在.br和.gz文件）
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}# nginx.conf
http {
# 开启Gzip
gzip on;
gzip_vary on; # 告诉客户端服务器支持多种压缩格式
# 只压缩超过1KB的文件
gzip_min_length 1024;
# 压缩级别（1-9），9为最高压缩率，但消耗更多CPU
gzip_comp_level 6;
# 压缩类型
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# 不压缩ie6及以下版本
gzip_disable "msie6";
# 优先使用Brotli压缩（如果同时存在.br和.gz文件）
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}性能优化
压缩策略
- 优先使用 Brotli：压缩率比 Gzip 高 15%-20%，现代浏览器都支持
- 组合使用：同时生成.gz 和.br 文件，让服务器根据客户端支持情况选择
- 排除不需要压缩的文件：图片、视频等二进制文件无需压缩
性能优化组合拳
- Gzip/Brotli 压缩
- 代码分割（Code Splitting）
- 图片优化（使用 WebP、压缩图片）
- 懒加载（Lazy Loading）
- CDN 加速