一、效能優化工具：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;