一、性能优化工具: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;
标签:http,性能,开启,nginx,gzip,优化,vite From: https://www.cnblogs.com/the-big-dipper/p/16962144.html