服务器端呈现 （SSR） 是指在服务器上完成的呈现过程。 最终呈现的 HTML 页面通过 HTTP 协议发送到客户端。 在 SEO 和首次加载速度方面，SSR 提供了显着的好处。
vue：这可以通过 nuxt 完成JS 实现。
react：这可以通过 next 来完成JS 实现。
GZIP压缩通过压缩文件显着提高了首次加载速度。 使用 gzip，您可以将文本文件压缩到至少原始大小的 40%。 但是，应该注意的是，不应使用 gzip 压缩图像文件。
在构建过程中设置 gzip 压缩的步骤如下：
在你的 vue 项目中安装 gzip 压缩所需的依赖，并将 productiongzip 设置为 true 以启用 gzip 压缩。
shell 复制 **npm install --s**e-dev compression-webpack-plugin --s**e-dev compression-webpack-plugin修改 build 命令以使用 gzip 压缩。 但是，需要注意的是，这可能会遇到错误“ValidationError：压缩插件无效选项”。 为了解决这个问题，根据官方文档，设置从“asset”更改为“filename”。
再次运行构建命令 npm run build，您将构建 .gz 文件，表示压缩成功。
Brotli 是一种新型的开源压缩算法（由 Google 于 2015 年推出，GitHub 地址：与 GZIP 相比，启用 Brotli 压缩可以额外减少 20% 的 CDN 流量。 在各种情况下，Brotli 的性能比 gzip 高出 17-25%，尤其是当设置为 1 级时，超过了 gzip 9 级的压缩效果。 （数据来自 Google 数据报告：.）大多数主流浏览器都支持 Brotli 压缩，但 Internet Explorer 和 Opera Mini 除外。
要在 vite 项目中启用 brotli 压缩，可以使用 vite-plugin-compression 插件。 修改你的。 env.生产文件，请相应地设置 vite 压缩全局变量。
ini Copy** 压缩默认禁用：压缩默认禁用：vite compression ="none"以下配置支持在不删除原始文件的情况下进行压缩： 启用 gzip 压缩： vite compression ="gzip"启用 brotli 压缩：vite compression="brotli"同时启用 gzip 和 brotli 压缩：vite compression="both"以下配置可以压缩和删除原始文件： 启用 gzip 压缩： vite compression ="gzip-clear"启用 brotli 压缩：vite compression="brotli-clear"同时启用 gzip 和 brotli 压缩：vite compression="both-clear"缓存是一种基本的优化技术，它通过减少 IO 操作和 CPU 计算来提高性能。 性能调优的第一条规则是确定缓存的优先级。
缓存选项包括浏览器缓存、CDN 缓存、反向**、本地缓存、分布式缓存和数据库缓存。
AJAX 缓存请求的 URL 和响应结果，以提高页面响应能力和用户体验。 发出 AJAX 请求时，请尝试使用 get 方法利用客户端缓存并提高请求速度。
例如，使用第三方组件库时，仅导入必要的组件。
从“vant”导入 css copy import from 'vant'使用 import（） 在需要时动态导入第三方库和组件。 例如，在测试环境中，仅当主机域名不是生产域名时，才会启用 vconsole 调试。
js copy **if （location.host !== ‘production-domain’)使用 import 或 require 方法异步加载组件：
js copy **（=> import（'@ pages xxx.vue’) resolve => require(['@/pages/xxx.vue'], resolve)延迟加载路由是一种在路由配置中应用异步组件加载的方法：
js 复制**内容分发网络 （CDN） 将静态文件、音频、脚本资源等分发到世界各地的服务器。 通过提供附近 CDN 服务器的资源，您可以减少延迟并提高加载速度。
因为浏览器限制了每个域的活动连接数。 为了同时超过此限制，域分片将内容拆分为多个子域。 当使用多个域处理多个资源时，浏览器能够同时拥有更多资源，从而缩短页面加载时间并改善用户体验。
dns-prefetch 尝试在请求资源之前解析域名。当浏览器从（第三方）服务器请求资源时，必须先将跨域域名解析为IP地址，然后浏览器才能发出请求。 此过程称为 DNS 解析。 虽然 DNS 缓存可以帮助减少这种延迟，但 DNS 解析可能会大大增加请求的延迟。 对于那些与许多第三方有开放连接的人来说，这种延迟会显着降低加载性能。
DNS-prefetch 可帮助开发人员屏蔽 DNS 解析延迟。
html 元素通过将 rel 属性值设置为 dns-prefetch 来提供此功能。
HTML 复制**Web Workers 为 J**Ascript 创建了一个多线程环境，允许任务在后台运行而不会阻塞主线程。 对于计算密集型任务，请使用 Web Worker 来优化性能。