一、Gzip 在本项目中的应用说明
1. Gzip 的作用与项目应用场景
Gzip 是一种常用的 HTTP 压缩技术，可以大幅减小前端静态资源（如 JS、CSS、HTML、图片等）的体积，加快页面加载速度，提升用户体验。在本项目（如 web-admin、web-company 前端和 web-server 后端），Gzip 可用于前端构建产物的压缩和后端接口响应的压缩。
2. 项目中 Gzip 的实现方法
（1）前端打包开启 Gzip（以 Vite 项目为例）
在 web-admin 或 web-company 目录下安装插件：
npm install vite-plugin-compression --save-dev
在 vite.config.ts 中引入并配置：
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
// ...其他配置
plugins: [
viteCompression({
algorithm: 'gzip',
ext: '.gz'
})
]
})
打包后会生成 .gz 文件，部署到支持 Gzip 的服务器即可自动压缩传输。
（2）后端开启 Gzip（以 Express 为例）
在 web-server/app.js 中：
const compression = require('compression')
app.use(compression())
这样所有接口响应都会自动 Gzip 压缩。
二、问题
1. 问：你在项目中是如何开启 Gzip 压缩的？为什么要这样做？
答：
在本项目中，前端（如 web-admin）通过 Vite 的 vite-plugin-compression 插件开启 Gzip，打包时自动生成 .gz 文件。后端（如 web-server）用 compression 中间件开启接口响应压缩。这样可以大幅减小资源体积，加快页面和接口响应速度，提升用户体验。
2. 问：Gzip 压缩对前端和后端分别有哪些优化效果？项目中实际效果如何？
答：
前端开启 Gzip 后，JS/CSS/HTML 等静态资源体积可减少 60% 以上，页面加载更快。后端接口开启 Gzip，数据传输更高效，尤其是大数据量接口。项目中实际测试，首页加载时间和接口响应时间都有明显下降。
3. 问：Gzip 压缩会带来哪些副作用？项目中如何权衡？
答：
Gzip 会增加服务器 CPU 压力，极少数老旧浏览器不支持。项目中只对体积较大的资源开启压缩，且服务器性能充足，未出现明显副作用。对于小文件可通过配置不压缩，避免资源浪费。
4. 问：如何验证 Gzip 是否生效？项目中是如何测试的？
答：
可以用 Chrome DevTools 的 Network 面板，查看资源的 Content-Encoding 是否为 gzip，或响应头是否有 Content-Encoding: gzip。项目中部署后通过浏览器和 curl 工具验证，确认所有静态资源和接口响应都已被 Gzip 压缩。
5. 问：除了 Gzip，还有哪些前端资源压缩优化手段？项目中有用到吗？
答：
除了 Gzip，还可以用 Brotli 压缩、图片压缩（如 webp）、代码分割、Tree Shaking、CDN 加速等。项目中前端已用 Vite 进行代码分割和 Tree Shaking，图片采用 webp 格式，部分服务器也支持 Brotli，进一步提升了加载性能。
