当前位置：网站首页>SPA首屏加载优化

SPA首屏加载优化

就是从输入网址址，到所有资源渲染到页面，首屏加载可以说是用户体验中最重要的环节，由于单页面应用，资源体积过大，首次进行全部加载耗时，导致白屏

在页面渲染的过程，导致加载速度慢的因素可能如下：

比如路由懒加载和异步组件，配置路由时采用动态加载路由形式

 {
    path: '/404',
    component: () => import('@/views/404'),
  },

采用强制缓存和协商缓存，设置Cache-Control, Last-Modified, Etag字段

合理利用localStorage

例如使用element-ui框架时，使用组件不要全部将整个框架导入，应该按需导入

全部导入：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

按需导入：

import { Button, Input } from 'element-ui';
Vue.use(Button)
Vue.use(Input)

将小图片base64化，或者使用在线字体图标、雪碧图减少服务器压力

SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器

从头搭建一个服务端渲染是很复杂的, Vue应用建议使用Nuxt.js实现服务端渲染

版权声明
本文为[思ۣۖิิۣۖิ**空**]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_45228255/article/details/124334607