SPA (单页面应用) 性能优化 - 前端 | NIDLH = 学问勤中得，萤窗万卷书。 = 勤学

# 异步路由

vue-router 的路由配置

() => import("vue路径");

# UI 框架按需引入

根据 UI 框架的提示，在项目中（Vue， React）按需引入

# 压缩静态资源

图片压缩
vite 中的图片压缩工具有（具体配置查看以下链接）：

vite-plugin-compress
vite-plugin-imagemin

小图片转化 base64

vite 中的配置

	export default defineConfig(({ command, mode }) => {
	return {
	build:{
	assetsInlineLimit: 8192, // 小于 8KB 的图片会被转换成 base64 编码的 Data URI 格式
	}
	};
	});

webpack 配置

暂无

# 组件重复打包

暂时没有发现此问题

# Gzip 压缩 (性能提升最为明显)

Gzip 是一种文件压缩格式，用于减小文件大小，提高文件传输速度。在 Nginx 中，你可以通过配置 Gzip 来启用对响应内容的压缩，以减小传输的数据量，提高网站性能。

在打包工具 vite 和 webpack 中使用 gzip 是为了优化前端资源的传输。输过程中将被压缩，减小文件体积，加快传输速度。这个过程通常发生在前端构建阶段。

webpack 开启 Gzip 的工具 compression-webpack-plugin
vite 开启 Gzip 的工具 vite-plugin-compression

nginx 中配置 Gzip，当用户请求服务器时，服务器会检查客户端是否支持 Gzip，如果支持，服务器会发送经过 Gzip 压缩的内容。

我这里需要和 nginx 配合使用。当 Nginx 接收到这些请求时，如果客户端支持 Gzip，Nginx 会在发送这些资源时再次使用 Gzip 压缩。

这种双重的 Gzip 压缩可以确保从服务器到客户端的整个传输链路都经过了压缩，最终减小了传输的数据量，提高了网站的加载速度。

# HTTP2.0

拥有证书的情况下可在 nginx 的 listen 的最后添加 http2

图片懒加载

vue-lazyload
vue3-lazyload
react-lazyload

# SSR (服务端渲染)

# 骨架屏

降低用户等待久的感受

# 虚拟列表

# 避免重复发起资源请求

# 节流

# 防抖

# Nginx 知识普及

nginx 重定向通常通过 location 指令的 return 或者 rewrite 来实现。

# return 方式

	location /old-url {
	return 301 http://yourdomain.com/new-url;
	}

# rewrite 方式

	location /old-url {
	rewrite ^/old-url(.*)$ http://yourdomain.com/new-url$1 permanent;
	}

# Nginx 重定向（Redirect）：

本质：重定向是一种将客户端请求导向到另一个 URL 的过程。
作用：当服务器接收到客户端的请求时，如果需要将请求转发到另一个地址，服务器会返回一个指示浏览器重新发起请求的响应，包括一个新的 URL。
HTTP 状态码：重定向通常伴随着 HTTP 状态码，常见的有 301 永久重定向和 302 临时重定向。
例子：你的网站从 http://example.com 移动到 http://newexample.com，可以使用重定向将旧的链接指向新的地址。

# Nginx 代理（Proxy）：

本质：代理是一种服务器接收客户端请求后，代表客户端将请求发送到另一个服务器，并将另一个服务器的响应返回给客户端的过程。
作用：代理服务器可以用于转发请求、缓存响应、修改请求或响应、过滤内容等。客户端直接与代理服务器通信，而代理服务器负责与目标服务器通信。
HTTP 状态码：代理不一定伴随着 HTTP 状态码，客户端可能并不知道代理的存在。
例子：企业内部可能有一个代理服务器，用于过滤和监控对外部网站的访问，或者用于缓存常用的内容，减轻对外部服务器的压力。

# 前端 Nginx 配置（非 SSR）

无 SSL 的 Nginx 配置

	server {
	listen 80; #IPV4 # IPV4 和 IPV6 二选一
	listen [::]:80; #IPV6 # IPV4 和 IPV6 二选一
	server_name sunsmicro.com; # 域名

	# Gzip 配置
	gzip on;
	gzip_comp_level 6; # 压缩级别，范围 1-9
	gzip_vary on;
	gzip_min_length 1000; # 只压缩大于 1000 字节的文件
	gzip_proxied any;
	gzip_types text/plain text/css application/json application/x-javascript application/javascript application/x-httpd-php text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png;;
	gzip_disable "MSIE [1-6]\.(?!.*SV1)"; # 禁用 IE6 的 Gzip 压缩

	root 项目文件夹; # 项目文件夹
	index index.html; # 项目 index 页

	# 后端部分反向代理
	location /api/ {
	proxy_next_upstream http_500 http_502 http_503 http_504 error timeout invalid_header;
	proxy_set_header Host $host;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_pass http://120.79.223.47:8082/; # 请求后端的代理地址
	expires 0;
	}
	# 反向代理可以有多个
	location / {
	add_header Cache-Control "no-store, no-cache"; #用于控制服务端更新，用户浏览器不同步问题
	add_header Pragma no-cache;
	try_files $uri $uri/ /index.html;
	}
	}

无 SSL 的 Nginx 配置以及 HTTP2.0

	server {
	listen 443 ssl http2;
	#配置 HTTPS 的默认访问端口为 443。
	#如果未在此处配置 HTTPS 的默认访问端口，可能会造成 Nginx 无法启动。
	#如果您使用 Nginx 1.15.0 及以上版本，请使用 listen 443 ssl 代替 listen 443 和 ssl on。
	server_name 域名; #需要将域名替换成证书绑定的域名。

	# Gzip 配置
	gzip on;
	gzip_comp_level 6; # 压缩级别，范围 1-9
	gzip_vary on;
	gzip_min_length 1000; # 只压缩大于 1000 字节的文件
	gzip_proxied any;
	gzip_types text/plain text/css application/json application/x-javascript application/javascript application/x-httpd-php text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png;;
	gzip_disable "MSIE [1-6]\.(?!.*SV1)"; # 禁用 IE6 的 Gzip 压缩

	root 项目文件夹; # 项目文件夹
	index index.html / index.hml; # 项目 index 页

	# SSL 证书配置
	ssl_certificate cert/cert-file-name.pem;
	#需要将 cert-file-name.pem 替换成已上传的证书文件的名称。
	ssl_certificate_key cert/cert-file-name.key;
	#需要将 cert-file-name.key 替换成已上传的证书私钥文件的名称。
	ssl_session_timeout 5m;
	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
	#表示使用的加密套件的类型。
	ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
	#表示使用的 TLS 协议的类型。
	ssl_prefer_server_ciphers on;

	# 反向代理
	location / {
	add_header Cache-Control "no-store, no-cache"; #用于控制服务端更新，用户浏览器不同步问题
	root html; #Web 网站程序存放目录。
	index index.html index.htm;
	}
	}

过去无法挽回，未来可以改变，有的人成日殚精竭虑，却掀不起什么风浪，有的人却因一念之差，让世界天翻地覆，这就是命运权重。

前端性能优化 SPA VueJs ReactJs