vue3+vite项目性能优化

经历三次重构

开启gzip压缩

什么是gzip

一种类似winRaR的文件压缩程序。用于在服务器给客户端传送内容的时候，对内容进行压缩（压缩效果很明显），从而可以缩短页面加载时间，提高网站性能。

gzip对纯文本内容可压缩到原大小的40%。但png、gif、jpg、jpeg这类图片文件并不推荐使用gzip压缩（svg是个例外），首先经过压缩后的图片文件gzip能压缩的空间很小。事实上，添加标头，压缩字典，并校验响应体可能会让它更大。

如何实现

服务器可以给文件进行gzip压缩，这需要消耗服务器的性能。同时，前端也在打包资源文件时，也可以打包成gzip压缩包，这样可以省去服务器压缩的时间，减少一些服务端的消耗。

所以现在的一半做法是

前端使用vite-plugin-compression插件

import viteCompression from 'vite-plugin-compression'; // 开启gzip压缩

export default defineConfig({
  plugins: [
    viteCompression() 
  ],

服务器配置nginx

# 开启
gzip on;

# 开启gzip静态压缩功能
gzip_static on; 

# gzip缓存大小
gzip_buffers 4 16k;

# gzip http版本
gzip_http_version 1.1;

# gzip 压缩级别 1-10 
gzip_comp_level 5;

# gzip 压缩类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

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