对于vue和react这些单页面应用都有一个弊端，首屏加载时间长，对于用户的使用体验很不好，我们这次的目标是把页面整体加载时间控制在800ms以内
首先说下我的项目情况是vite+vue3+ts
下面主要说说要做哪些事情：
一、开启gzip资源压缩
gzip需要后端配置，在nginx里面开启，nginx的安装和其他配置就不说了，一般绝大多数开发人员都用过
1，前端使用gzip
vite使用插件vite-plugin-compression ，webpack的话使用compression-webpack-plugin
前端的配置vite.config.ts如下：
使用webpack的话，配置文件vue.config.js如下：
然后执行npm run build 打包前端项目，结果如下：
我们可以发现图片是不会压缩的，而css和js文件基本上都只有原来的30%左右，甚至更少。
注意：
不压缩图片的原因，首先我们会对图片进行优化压缩适合前端使用，这个时候通过再gzip压缩效果就会很差，大小的话区别很小，如果使用了gzip反而给服务器的cpu增加了压力，所以这里我们不对图片使用gzip。
2，nginx配置gzip
一般是/etc/nginx/nginx.conf文件，添加到http里面，也可以单独搞个配置文件，放到/etc/nginx/conf.d/下面。
#开启gzip
gzip on;
#低于1kb的资源不压缩
gzip_min_length 1k;
#压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在5左右。
gzip_comp_level 5;
#需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6]\.";
#是否添加“Vary: Accept-Encoding”响应头
gzip_vary on;执行systemctl reload nginx 重新载入配置即可
二、静态资源上cdn
CDN加速的本质是缓存加速。将服务器上存储的静态内容缓存在CDN节点上，当访问这些静态内容时，无需访问服务器源站，就近访问CDN节点即可获取相同内容，从而达到加速的效果，同时减轻服务器源站的压力。**
这个因为第三方cdn都是要钱的，暂时就没有考虑用上。本质就是资源分流，把静态资源放到别人的服务器上，别人有大的带宽，各个节点缓存，就近获取，自然就减小了我们自己服务器的压力。
三、按需引入三方库
这个也不多说了，像element-ui这种第三方ui库，不全局引入，只在当前页面引入用到的第三方组件，减小外部库的冗余引入。
四、路由懒加载
整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块。
按需去加载路由对应的资源，提高首屏加载速度（首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）。
实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容。
未进行懒加载写法如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index.vue'
import Home from '@/views/home/home.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/home', component: Home }
]
export default router懒加载写法如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/login', component: () => import('@/views/login/index.vue') },
{ path: '/home', component: () => import('@/views/home/home.vue') }
]
export default router五、图片用TinyPNG压缩
TinyPNG做了什么？
TinyPNG使用智能有损压缩技术将您的WebP, PNG and JPEG图片的文件大小降低。 通过选择性的减少图片中的颜色，只需要很少的字节数就能保存数据。 对视觉的影响几乎不可见，但是在文件大小上有非常大的差别。
我为什么要使用TinyPNG？
PNG很有用，因为它是唯一可以存储部分透明图像的广泛支持的格式。 这个格式使用了压缩，但是文件依旧很大。 使用TinyPNG为您的应用和站点压缩图片。 将会减少带宽占用，并更快加载。
它是如何工作的？
当您上传一张PNG（Portable Network Graphics）图片时，图片中相似的颜色会被合并。 这种技术被称作“量化（quantization）”。 通过减少颜色数量，可以将24位PNG文件转换成更小的8位索引颜色图像。 所有不必要的元数据也被丢弃。 结果是支持100%透明度的更好的PNG文件。 两者兼得！
上面这些描述是我在TinyPNG官方复制过来的，很好的说明了TinyPNG的作用，但通过上面的原理我们不难发现PS应该也能做到。