SPA单页面网站首屏加载优化
对于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应该也能做到。