性能优化

一、性能优化工具：devtool的【网络】、【性能】、【lighhthouse】。

【网络】：看哪些接口需要后端人员优化；接口请求次数优化。

【性能】：可看调用树call-tree，看哪里可以优化。

【lighhthouse】：会出示优化建议。

二、优化方法

1、gzip：压缩打包的文件，节省生产环境下载打包的文件的时间。前端和nginx都需要开启gzip。

（1）vue3 + vite配置gzip

安装vite-plugin-compression： npm install vite-plugin-compression -D

配置vite.config.js 

import viteCompression from "vite-plugin-compression";

 

检验：yarn build，若打包出来有.gz后缀，则成功。

 （2）nginx配置gzip。目录：/nginx/conf/nginx.conf。在http、server、location模块配置都可。

开启模块之前可以查看是否有gzip模块（默认有）：--with-http_gunzip_module --with-http_gzip_static_module

#开启gzip功能
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;