首页 > 其他分享 >性能优化

性能优化

时间:2022-12-07 13:36:13浏览次数:35  
标签:http 性能 开启 nginx gzip 优化 vite

一、性能优化工具: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

相关文章